Scroll Item into View

The RadNavigationView API offers ScrollIntoView support through the following method: ScrollIntoView. This method allows you to programmatically scroll an item into view when there are many RadNavigationViewItems.

ScrollIntoView

The ScrollIntoView method has two overloads. One of them accepts an item and the other one accepts an index. Examples 1, 2 setup a RadNavigationView in a databinding scenario to demonstrate this method.

Example 1: Setting up the model and viewmodel

• C#
• VB.NET

public class NavigationItemModel 
{ 
    public string Title { get; set; } 
} 
 
public class MainViewModel 
{ 
    public ObservableCollection<NavigationItemModel> Items { get; set; } 
 
    public MainViewModel() 
    { 
        this.Items = new ObservableCollection<NavigationItemModel>(); 
 
        for (int i = 1; i <= 50; i++) 
        { 
            this.Items.Add(new NavigationItemModel() { Title = "Item " + i }); 
        } 
    } 
} 

Public Class NavigationItemModel 
    Public Property Title() As String 
End Class 
 
Public Class MainViewModel 
    Public Property Items() As ObservableCollection(Of NavigationItemModel) 
 
    Public Sub New() 
        Me.Items = New ObservableCollection(Of NavigationItemModel)() 
 
        For i As Integer = 1 To 50 
            Me.Items.Add(New NavigationItemModel() With {.Title = "Item " & i}) 
        Next i 
    End Sub 
End Class 

Example 2: Setting up the xaml

• XAML

<Grid> 
    <Grid.Resources> 
        <!-- 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}" /> 
        </Style> 
    </Grid.Resources> 
    <Grid.RowDefinitions> 
        <RowDefinition /> 
        <RowDefinition /> 
    </Grid.RowDefinitions> 
 
    <telerik:RadNavigationView x:Name="navigationView" DataContext="{StaticResource ViewModel}" ItemsSource="{Binding Items}" PaneHeader="Header" /> 
 
    <Button Click="ScrollItemIntoView" Content="Scroll Into View" Grid.Row="1" /> 
</Grid> 

Example 3 demonstrates how the ScrollIntoView method can be used, in the Button's Click event handler, by passing it either an item, or an index.

Example 3: Scrolling an item/index into View

• C#
• VB.NET

private void ScrollItemIntoView(object sender, RoutedEventArgs e) 
{ 
    //this.navigationView.ScrollIntoView(this.navigationView.Items[15]); 
    this.navigationView.ScrollIntoView(15); 
} 

Private Sub ScrollItemIntoView(ByVal sender As Object, ByVal e As RoutedEventArgs) 
    'this.navigationView.ScrollIntoView(this.navigationView.Items[15]); 
    Me.navigationView.ScrollIntoView(15) 
End Sub