New to Telerik UI for WPF? Download free 30-day trial

MVVM Support

The Telerik RadTimeBar control can be used with great success with the Model-View-ViewModel (MVVM) pattern. This help topic will demonstrate how to use the control with the pattern.

  1. Create new ViewModel class that inherits the ViewModelBase abstract class:

        public class ExampleViewModel : ViewModelBase 
            { 
                private DateTime periodStart; 
                private DateTime periodEnd; 
                private IEnumerable<double> data; 
                private DateTime visiblePeriodStart; 
                private DateTime visiblePeriodEnd; 
     
                [TypeConverter(typeof(DateTimeTypeConverter))] 
                public DateTime PeriodStart 
                { 
                    get 
                    { 
                        return this.periodStart; 
                    } 
                    set 
                    { 
                        if (this.periodStart == value) 
                            return; 
     
                        this.periodStart = value; 
                        this.OnPropertyChanged("PeriodStart"); 
                    } 
                } 
     
                [TypeConverter(typeof(DateTimeTypeConverter))] 
                public DateTime PeriodEnd 
                { 
                    get 
                    { 
                        return this.periodEnd; 
                    } 
                    set 
                    { 
                        if (this.periodEnd == value) 
                            return; 
     
                        this.periodEnd = value; 
                        this.OnPropertyChanged("PeriodEnd"); 
                    } 
                } 
     
                [TypeConverter(typeof(DateTimeTypeConverter))] 
                public DateTime VisiblePeriodStart 
                { 
                    get 
                    { 
                        return this.visiblePeriodStart; 
                    } 
                    set 
                    { 
                        if (this.visiblePeriodStart == value) 
                            return; 
     
                        this.visiblePeriodStart = value; 
                        this.OnPropertyChanged("VisiblePeriodStart"); 
                    } 
                } 
     
                [TypeConverter(typeof(DateTimeTypeConverter))] 
                public DateTime VisiblePeriodEnd 
                { 
                    get 
                    { 
                        return this.visiblePeriodEnd; 
                    } 
                    set 
                    { 
                        if (this.visiblePeriodEnd == value) 
                            return; 
     
                        this.visiblePeriodEnd = value; 
                        this.OnPropertyChanged("VisiblePeriodEnd"); 
                    } 
                } 
     
                public IEnumerable<double> Data 
                { 
                    get 
                    { 
                        if (data == null) 
                        { 
                            Random r = new Random(); 
                            List<double> collection = new List<double>(); 
                            for (DateTime date = PeriodStart; date <= PeriodEnd; date = date.AddDays(1)) 
                            { 
                                collection.Add(r.Next(0, 100)); 
                            } 
                            this.data = collection; 
                        } 
                        return this.data; 
                    } 
                } 
            } 
    
        Public Class ExampleViewModel Inherits ViewModelBase 
                    Private periodStart_Renamed As Date 
                    Private periodEnd_Renamed As Date 
                    Private data_Renamed As IEnumerable(Of Double) 
                    Private visiblePeriodStart_Renamed As Date 
                    Private visiblePeriodEnd_Renamed As Date 
     
                    <TypeConverter(GetType(DateTimeTypeConverter))> 
                    Public Property PeriodStart() As Date 
                          Get 
                                Return Me.periodStart_Renamed 
                          End Get 
                          Set(ByVal value As Date) 
                                If Me.periodStart_Renamed Is value Then 
                                      Return 
                                End If 
     
                                Me.periodStart_Renamed = value 
                                Me.OnPropertyChanged("PeriodStart") 
                          End Set 
                    End Property 
     
                    <TypeConverter(GetType(DateTimeTypeConverter))> 
                    Public Property PeriodEnd() As Date 
                                                        Get 
                                Return Me.periodEnd_Renamed 
                          End Get 
                          Set(ByVal value As Date) 
                                If Me.periodEnd_Renamed Is value Then 
                                      Return 
                                End If 
     
                                Me.periodEnd_Renamed = value 
                                Me.OnPropertyChanged("PeriodEnd") 
                          End Set 
                    End Property 
     
                    <TypeConverter(GetType(DateTimeTypeConverter))> 
                    Public Property VisiblePeriodStart() As Date 
                          Get 
                                Return Me.visiblePeriodStart_Renamed 
                          End Get 
                          Set(ByVal value As Date) 
                                If Me.visiblePeriodStart_Renamed Is value Then 
                                      Return 
                                End If 
     
                                Me.visiblePeriodStart_Renamed = value 
                                Me.OnPropertyChanged("VisiblePeriodStart") 
                          End Set 
                    End Property 
     
                    <TypeConverter(GetType(DateTimeTypeConverter))> 
                    Public Property VisiblePeriodEnd() As Date 
                          Get 
                                Return Me.visiblePeriodEnd_Renamed 
                          End Get 
                          Set(ByVal value As Date) 
                                If Me.visiblePeriodEnd_Renamed Is value Then 
                                      Return 
                                End If 
     
                                Me.visiblePeriodEnd_Renamed = value 
                                Me.OnPropertyChanged("VisiblePeriodEnd") 
                          End Set 
                    End Property 
     
                    Public ReadOnly Property Data() As IEnumerable(Of Double) 
                          Get 
                                If data_Renamed Is Nothing Then 
                                      Dim r As New Random() 
                                      Dim collection As New List(Of Double)() 
                                      Dim [date] As Date = PeriodStart 
                                      Do While [date] <= PeriodEnd 
                                            collection.Add(r.Next(0, 100)) 
                                            [date] = [date].AddDays(1) 
                                      Loop 
                                      Me.data_Renamed = collection 
                                End If 
                                Return Me.data_Renamed 
                          End Get 
                    End Property 
        End Class 
    

    The PeriodStart and PeriodEnd properties will specify the time period that the TimeBar will visualize. The VisiblePeriodStart and VisiblePeriodEnd properties will specify the visible time period on the screen. The Data collection will be used as datasource for the SparkLines that will be seen inside the TimeBar control.

  2. Add new RadTimeBar and RadSparkLine declarations in XAML and bind the mentioned properties:

    The properties should be bound using TwoWay binding. This is required because of the coercing of the values that happens when a binding is executed.

        <UserControl.DataContext> 
                <local:ExampleViewModel PeriodStart="01/01/2012" PeriodEnd="01/01/2013" VisiblePeriodStart="01/01/2012" VisiblePeriodEnd="01/01/2013" /> 
            </UserControl.DataContext> 
     
            <Grid x:Name="LayoutRoot" Background="White"> 
                <telerik:RadTimeBar Margin="8,8,8,0" Height="150" VerticalAlignment="Top" 
                                    PeriodStart="{Binding PeriodStart, Mode=TwoWay}" 
                                    PeriodEnd="{Binding PeriodEnd, Mode=TwoWay}" 
                                    VisiblePeriodStart="{Binding VisiblePeriodStart, Mode=TwoWay}" 
                                    VisiblePeriodEnd="{Binding VisiblePeriodEnd, Mode=TwoWay}"> 
                    <telerik:RadTimeBar.Intervals> 
                        <telerik:YearInterval/> 
                        <telerik:QuarterInterval/> 
                        <telerik:MonthInterval/> 
                        <telerik:WeekInterval /> 
                        <telerik:DayInterval /> 
                    </telerik:RadTimeBar.Intervals> 
     
                    <telerik:RadLinearSparkline ItemsSource="{Binding Data}" /> 
                </telerik:RadTimeBar> 
            </Grid> 
    

The result can be seen below:

WPF RadTimeBar with MVVM Data

In this article