Category / Section
How to navigate between the items in TabNavigationControl programatically?
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
