How to show Custom View for TabView Header with TapGesture

5 mins read

Steps to show Custom View for TabView Header with TapGesture:

Step 1: Add Tabview in the content page.

Step 2: Using HeaderContent property we can add the custom view to the header.

Step 3: For example, add the grid layout to the header content.

Step 4: Add the tap gesture to the grid layout.

Step 5: Add custom view to each header content with tab gesture.

Step 6: In the tap gesture method set the selected index property to navigate to corresponding tab item.

The following code sample demonstrates how to show Custom View for TabView Header with TapGesture:

Xaml code for defining the SfTabView control:

XAML

<tabview:SfTabView Margin="0,0,0,2"
                               x:Name="simTab" 
                               TabHeight="70"
                               VisibleHeaderCount="4"                            
                               TabHeaderPosition="Top"
                               DisplayMode="Image"
                               EnableSwiping="true">
                <tabview:SfTabView.Items>
                    <tabview:SfTabItem Title="Chat"   x:Name="tab1">
                        <tabview:SfTabItem.HeaderContent>
                            <Grid BackgroundColor="Aqua">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Label Text="Tab1" Grid.Column="1" />
                                <Grid.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                                </Grid.GestureRecognizers>
                            </Grid>
                        </tabview:SfTabItem.HeaderContent>
                        <tabview:SfTabItem.Content>
                            <Grid BackgroundColor="Aqua">
                                <Label Text="Welcome to first tabbed item page"/>
                            </Grid>
                        </tabview:SfTabItem.Content>
                    </tabview:SfTabItem>
                    <tabview:SfTabItem    x:Name="tab2" >
                        <tabview:SfTabItem.HeaderContent>
                            <Grid BackgroundColor="Gray">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Label Grid.Column="0" Text="Tab2" />
                                <Grid.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1">
                                    </TapGestureRecognizer>
                                </Grid.GestureRecognizers>
                            </Grid>
                        </tabview:SfTabItem.HeaderContent>
                        <tabview:SfTabItem.Content>
                            <Grid BackgroundColor="Aqua">
                                <Label Text="Welcome to Tab2 tabbed item page"/>
                            </Grid>
                        </tabview:SfTabItem.Content>
                    </tabview:SfTabItem>
                    <tabview:SfTabItem x:Name="tab3"  >
                        <tabview:SfTabItem.HeaderContent>
                            <Grid BackgroundColor="Teal">
                                <StackLayout Orientation="Vertical">
                                    <Label Text="Tab3" />
                                </StackLayout>
                                <Grid.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_2"/>
                                </Grid.GestureRecognizers>
                            </Grid>
                        </tabview:SfTabItem.HeaderContent>
                        <tabview:SfTabItem.Content>
                            <Grid BackgroundColor="Aqua">
                                <Label Text="Welcome to Tab3 tabbed item page"/>
                            </Grid>
                        </tabview:SfTabItem.Content>
                    </tabview:SfTabItem>
                    <tabview:SfTabItem >
                        <tabview:SfTabItem.HeaderContent>
                            <Grid BackgroundColor="Bisque">
                                <StackLayout Orientation="Vertical">
                                    <Label Text="Tab4"/>
                                </StackLayout>
                                <Grid.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_3"/>
                                </Grid.GestureRecognizers>
                            </Grid>
                        </tabview:SfTabItem.HeaderContent>
                        <tabview:SfTabItem.Content>
                            <Grid BackgroundColor="Aqua">
                                <Label Text="Welcome to Last tabbed item page"/>
                            </Grid>
                        </tabview:SfTabItem.Content>
                    </tabview:SfTabItem>
                </tabview:SfTabView.Items>
            </tabview:SfTabView>

Code to move to the Tab item:

C#

private void TapGestureRecognizer_Tapped(object sender, System.EventArgs e)
        {
            simTab.SelectedIndex = 0;
        }
 
        private void TapGestureRecognizer_Tapped_1(object sender, System.EventArgs e)
        {
            simTab.SelectedIndex = 1;
        }
 
        private void TapGestureRecognizer_Tapped_2(object sender, System.EventArgs e)
        {
            simTab.SelectedIndex = 2;
        }
 
        private void TapGestureRecognizer_Tapped_3(object sender, System.EventArgs e)
        {
            simTab.SelectedIndex = 3;
        }

Please find the sample from the following link: Sample

Did you find this information helpful?

Yes

Comments (0)

How to show Custom View for TabView Header with TapGesture

XAML

C#

Access denied