Category / Section
How to navigate between the items in TabNavigationControl programatically?
1 min read
User can navigate between the TabNavigationItems programmatically. It can be achieved by change the SelectedIndex of TabNavigationControl. The following code demonstrates the same.
Code Example: [Xaml]
<!-- For Next Button --> <Button Content="Next" Width="90" Click="Next_Click"></Button> <!-- For Previous Button --> <Button Content="Previous" Width="90" Click="Previous_Click"></Button> <!-- TabNvigation Control --> <syncfusion:TabNavigationControl Grid.Row="1" x:Name="tabNavigation" > <syncfusion:TabNavigationItem Header="1"> <syncfusion:TabNavigationItem.Content> <Grid> <TextBox Text="Item 1"/> </Grid> </syncfusion:TabNavigationItem.Content> </syncfusion:TabNavigationItem> <syncfusion:TabNavigationItem Header="2"> <syncfusion:TabNavigationItem.Content> <Grid> <TextBox Text="Item 2"/> </Grid> </syncfusion:TabNavigationItem.Content> </syncfusion:TabNavigationItem> <syncfusion:TabNavigationItem Header="3"> <syncfusion:TabNavigationItem.Content> <Grid> <TextBox Text="Item 3"/> </Grid> </syncfusion:TabNavigationItem.Content> </syncfusion:TabNavigationItem> <syncfusion:TabNavigationItem Header="4"> <syncfusion:TabNavigationItem.Content> <Grid> <TextBlock Text="Item 4"/> </Grid> </syncfusion:TabNavigationItem.Content> </syncfusion:TabNavigationItem> </syncfusion:TabNavigationControl>
Code Example[C#]
//For navigate next item private void Next_Click(object sender, RoutedEventArgs e) { if (tabNavigation.SelectedIndex + 1 >= tabNavigation.Items.Count) { tabNavigation.SelectedIndex = 0; } else { tabNavigation.SelectedIndex = tabNavigation.SelectedIndex + 1; } } //For navigate previous item private void Previous_Click(object sender, RoutedEventArgs e) { if (tabNavigation.SelectedIndex -1 < 0) { tabNavigation.SelectedIndex = tabNavigation.Items.Count-1; } else { tabNavigation.SelectedIndex = tabNavigation.SelectedIndex - 1; } }
Screenshot:
Figure: Click Next Button to navigate next TabNavigationItem.
Figure: Click Previous Button to navigate previous TabNavigationItem