Category / Section
TabGesture for SfTabView custom Header
2 mins read
How to navigate between the tab items using tap gesture:
You can navigate between the tab items by adding a custom view to the Tab Item header content and applying the tap gesture to the custom view.
Step 1: Add the SfTabView control in Xaml file.
Step 1: Add a custom view to the Tab Item header content.
Step 2: Add the tap gesture to the custom view.
Step 3: In the tap gesture event, set the selected index of the current tab item to the Selected index property.
The following code demonstrates how to navigate between the tab items using tap gesture.
XAML code:
<tabView:SfTabView x:Name="tabMainContainer" VisibleHeaderCount="3" EnableSwiping="false"> <tabView:SfTabView.SelectionIndicatorSettings> <tabView:SelectionIndicatorSettings Color="#57585A" Position="Fill" StrokeThickness="4"/> </tabView:SfTabView.SelectionIndicatorSettings> <tabView:SfTabItem Title="LOCATION"> <tabView:SfTabItem.HeaderContent> <Grid Padding="10"> <Grid.GestureRecognizers> <TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped" /> </Grid.GestureRecognizers> <Grid.RowDefinitions> <RowDefinition Height="2*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Image x:Name="imgLocationTab" Source="location_hover.png" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Scale="0.8"/> <Label x:Name="lblLocationTab" Text="Location" FontSize="Micro" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Start"></Label> </Grid> </tabView:SfTabItem.HeaderContent> <tabView:SfTabItem.Content> <Grid Padding="0,10,0,0" VerticalOptions="Center" HorizontalOptions="Center" BackgroundColor="Red"> <Label Text=" First TabItem Content" VerticalOptions="Center" HorizontalOptions="Center" /> </Grid> </tabView:SfTabItem.Content> </tabView:SfTabItem> <tabView:SfTabItem Title="NOTIFICATIONS"> <tabView:SfTabItem.HeaderContent> <Grid Padding="10"> <Grid.GestureRecognizers> <TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped1" /> </Grid.GestureRecognizers> <Grid.RowDefinitions> <RowDefinition Height="2*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Image x:Name="imgNotificationTab" Source="notifications.png" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Scale="0.8" /> <Label x:Name="lblNotificationTab" Text="Notify" FontSize="Micro" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Start"></Label> </Grid> </tabView:SfTabItem.HeaderContent> <tabView:SfTabItem.Content> <Grid x:Name="stackImages" Padding="0,10,0,0" VerticalOptions="Center" HorizontalOptions="Center" BackgroundColor="Blue"> <Label Text=" Second TabItem Content" VerticalOptions="Center" HorizontalOptions="Center" /> </Grid> </tabView:SfTabItem.Content> </tabView:SfTabItem> <tabView:SfTabItem Title="WHAT HAPPENED"> <tabView:SfTabItem.HeaderContent> <Grid Padding="10"> <Grid.GestureRecognizers> <TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped2" /> </Grid.GestureRecognizers> <Grid.RowDefinitions> <RowDefinition Height="2*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Image x:Name="imgWhatHappenedTab" Source="whathappened.png" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Scale="0.8"/> <Label x:Name="lblWhatHappenedTab" Text="Infos" FontSize="Micro" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Start"></Label> </Grid> </tabView:SfTabItem.HeaderContent> <tabView:SfTabItem.Content> <Grid VerticalOptions="Center" Padding="0,10,0,0" HorizontalOptions="Center" BackgroundColor="Yellow"> <Label Text=" Third TabItem Content" VerticalOptions="Center" HorizontalOptions="Center" /> </Grid> </tabView:SfTabItem.Content> </tabView:SfTabItem> </tabView:SfTabView>
Code behind code:
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
void OnTapGestureRecognizerTapped(object sender, EventArgs args)
{
tabMainContainer.SelectedIndex = 0;
}
void OnTapGestureRecognizerTapped1(object sender, EventArgs args)
{
tabMainContainer.SelectedIndex = 1;
}
void OnTapGestureRecognizerTapped2(object sender, EventArgs args)
{
tabMainContainer.SelectedIndex = 2;
}
}
Please download the sample from the following link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionSample-1708149615
