Category / Section
How to navigate between the items in TabNavigationControl programatically?
2 mins read
User can navigate between the TabNavigationItems programmatically. It can be achieved by changing the SelectedIndex of the 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
