Data Binding

RadNavigationView can be bound to a collection of objects through its ItemsSource property. This article will demonstrate how to data bind a collection of custom objects to RadNavigationView.

Note that for every business object from the data bound collection, RadNavigationView will generate a RadNavigationViewItem container representing this object.

Creating the Model and View Model

For the purposes of this article, we will create a simple object and a view model which will hold a collection of our models. The IconGlyph property of the NavigationItemModel holds the string which will be set to the Icon property of the RadNavigationViewItem. For more information about it, check out the Icon and IconTemplate article in our documentation.

Example 1: Creating the model and viewmodel

• C#
• VB.NET

public class NavigationItemModel 
{ 
    public string Title { get; set; } 
    public string IconGlyph { get; set; } 
} 
 
public class MainViewModel 
{ 
    private readonly string[] glyphStrings = new string[] { "", "", "" }; 
 
    public ObservableCollection<NavigationItemModel> Items { get; set; } 
 
 
    public MainViewModel() 
    { 
        this.Items = new ObservableCollection<NavigationItemModel>(); 
 
        for (int i = 1; i <= 3; i++) 
        { 
            var glyphString = this.glyphStrings[i - 1]; 
            this.Items.Add(new NavigationItemModel() {Title = "Item " + i, IconGlyph = glyphString }); 
        } 
    } 
} 

Public Class NavigationItemModel 
    Public Property Title() As String 
    Public Property IconGlyph() As String 
End Class 
 
Public Class MainViewModel 
    Private ReadOnly glyphStrings() As String = { "", "", "" } 
 
    Public Property Items() As ObservableCollection(Of NavigationItemModel) 
 
 
    Public Sub New() 
        Me.Items = New ObservableCollection(Of NavigationItemModel)() 
 
        For i As Integer = 1 To 3 
            Dim glyphString = Me.glyphStrings(i - 1) 
            Me.Items.Add(New NavigationItemModel() With { 
                .Title = "Item " & i, 
                .IconGlyph = glyphString 
            }) 
        Next i 
    End Sub 
End Class 

Defining the RadNavigationView

After we have created the viewmodel, the next step is to create an instance and set it to the DataContext of a RadNavigationView. This is demonstrated in Example 2. Note, that the change of the RadNavigationView Content is animated by a RadTransitionControl, which is bound to its SelectedItem. Additionally, a ContentTemplate is specified for the RadTransitionControl.

Example 2: Defining the control and the necessary styles

• XAML

<Window.Resources> 
 
    <local:MainViewModel x:Key="ViewModel" /> 
    <telerik:StringToGlyphConverter x:Key="StringToGlyphConverter" /> 
 
    <!-- If you are using the NoXaml binaries, you will have to base the style on the default one for the theme like so: 
    <Style TargetType="telerik:RadNavigationViewItem" BasedOn="{StaticResource RadNavigationViewItemStyle}">--> 
 
    <Style TargetType="telerik:RadNavigationViewItem" > 
        <Setter Property="Content" Value="{Binding Title}" /> 
        <Setter Property="Icon" Value="{Binding IconGlyph}" /> 
        <Setter Property="IconTemplate"> 
            <Setter.Value> 
                <DataTemplate> 
                    <telerik:RadGlyph Glyph="{Binding Converter={StaticResource StringToGlyphConverter}}" /> 
                </DataTemplate> 
            </Setter.Value> 
        </Setter> 
    </Style> 
 
     <DataTemplate x:Key="TransitionControlContentTemplate"> 
        <TextBlock Margin="10" Text="{Binding Title}" /> 
    </DataTemplate> 
</Window.Resources> 
 
<Grid> 
    <telerik:RadNavigationView DataContext="{StaticResource ViewModel}"  ItemsSource="{Binding Items}" PaneHeader="Header"> 
        <telerik:RadNavigationView.Content> 
            <telerik:RadTransitionControl Content="{Binding SelectedItem, RelativeSource={RelativeSource AncestorType=telerik:RadNavigationView}}" ContentTemplate="{StaticResource TransitionControlContentTemplate}" Foreground="Black" Duration="0:0:0.4"> 
                <telerik:RadTransitionControl.Transition> 
                    <telerik:FadeTransition /> 
                </telerik:RadTransitionControl.Transition>  
            </telerik:RadTransitionControl> 
        </telerik:RadNavigationView.Content> 
    </telerik:RadNavigationView> 
</Grid> 

Figure 1: Result from Example 2 in the Office2016 theme

For another, more complicated, databinding example, check out the First Look RadNavigationView example from the WPF Controls Samples application.