tabView:SfTabItem.HeaderContent selected and unselected colors

[Stephanus Junaedy]

Hi

i am using SFTabView and want customized Headers.  Want to have Selected and Unselected Colors for Font and Image. How can i acheive this?

   <tabView:SfTabItem SelectionColor="Aqua" >

                    <tabView:SfTabItem.HeaderContent>

                        <Grid>

                            <Grid.RowDefinitions>

                                <RowDefinition Height="Auto">

                                </RowDefinition>

                                <RowDefinition Height="Auto">

                                </RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="Auto"></ColumnDefinition>

                                <ColumnDefinition Width="Auto"></ColumnDefinition>

                            </Grid.ColumnDefinitions>

                            <Label Text="Activity"

                                   Grid.Row="1"

                                   HorizontalOptions="Start"

                                   FontFamily="OpenSansRegular"

                                   Grid.Column="0"

                                   FontSize="16"></Label>

                            <Image  Grid.Row="0"

                                    Grid.Column="0"

                                    HorizontalOptions="Center">

                                <Image.Source>

                                    <FontImageSource FontFamily="MaterialIcons"

                                                     

                                                     Size="30"

                                                     Glyph="&#x000f0007;"></FontImageSource>

                                </Image.Source>

                            </Image>

                        </Grid>

                    </tabView:SfTabItem.HeaderContent>

                </tabView:SfTabItem>

[Stephanus Junaedy]

Also tried, with provided sample in Documentation. But no luck.

     <syncfusion:SfTabView x:Name="tabView"

                              TabHeight="80"

                              BackgroundColor="#BEBEBE"

                              EnableSwiping="False"

                              VisibleHeaderCount="3"

                              Margin="0,40,0,0">

            <syncfusion:SfTabView.SelectionIndicatorSettings>

                <syncfusion:SelectionIndicatorSettings Color="Red"

                                                       Position="Fill"

                                                       StrokeThickness="4" />

            </syncfusion:SfTabView.SelectionIndicatorSettings>

            <syncfusion:SfTabItem>

                <syncfusion:SfTabItem.HeaderContent>

                    <Grid VerticalOptions="Center"

                          BackgroundColor="#eea782"

                          HeightRequest="400"

                          WidthRequest="500"

                          x:Name="ChatsHeader"

                          StyleId="ChatsHeader"

                          HorizontalOptions="Center">

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                        </Grid.RowDefinitions>

                        <Label Text="James"

                               TextColor="Black"

                               FontSize="23"

                               Grid.Row="0"

                               WidthRequest="80"

                               HeightRequest="50"

                               VerticalOptions="Center"

                               HorizontalOptions="Center" />

                        <Grid Grid.Row="1">

                            <Image HeightRequest="100"

                                   WidthRequest="70"

                                   Source="a0.png" />

                        </Grid>

                    </Grid>

                </syncfusion:SfTabItem.HeaderContent>

                <syncfusion:SfTabItem.Content>

                    <Grid BackgroundColor="Yellow"

                          x:Name="FavoritesGrid" />

                </syncfusion:SfTabItem.Content>

            </syncfusion:SfTabItem>

            <syncfusion:SfTabItem>

                <syncfusion:SfTabItem.HeaderContent>

                    <Grid VerticalOptions="Center"

                          BackgroundColor="#C9EE82"

                          HeightRequest="400"

                          WidthRequest="500"

                          x:Name="ChatsHeader2"

                          StyleId="ChatsHeader"

                          HorizontalOptions="Center">

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                        </Grid.RowDefinitions>

                        <Label Text="Jacob"

                               TextColor="Black"

                               FontSize="23"

                               Grid.Row="0"

                               WidthRequest="80"

                               HeightRequest="50"

                               VerticalOptions="Center"

                               HorizontalOptions="Center" />

                        <Grid Grid.Row="1">

                            <Image HeightRequest="100"

                                   WidthRequest="70"

                                   Source="a2.png" />

                        </Grid>

                    </Grid>

                </syncfusion:SfTabItem.HeaderContent>

                <syncfusion:SfTabItem.Content>

                    <Grid BackgroundColor="Blue"

                          x:Name="ContactsGrid" />

                </syncfusion:SfTabItem.Content>

            </syncfusion:SfTabItem>

            <syncfusion:SfTabItem>

                <syncfusion:SfTabItem.HeaderContent>

                    <Grid VerticalOptions="Center"

                          BackgroundColor="#eedd82"

                          HeightRequest="400"

                          WidthRequest="500"

                          x:Name="ChatsHeader3"

                          StyleId="ChatsHeader"

                          HorizontalOptions="Center">

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                        </Grid.RowDefinitions>

                        <Label Text="John"

                               TextColor="Black"

                               FontSize="23"

                               Grid.Row="0"

                               WidthRequest="80"

                               HeightRequest="50"

                               VerticalOptions="Center"

                               HorizontalOptions="Center" />

                        <Grid Grid.Row="1">

                            <Image HeightRequest="100"

                                   WidthRequest="70"

                                   Source="a1.png" />

                        </Grid>

                    </Grid>

                </syncfusion:SfTabItem.HeaderContent>

                <syncfusion:SfTabItem.Content>

                    <ListView x:Name="ContactListView"

                              ItemsSource="{Binding ContactList}"

                              BackgroundColor="#cfead9"

                              RowHeight="100">

               

                        <ListView.ItemTemplate>

                            <DataTemplate>

                                <ViewCell>

                                    <StackLayout Orientation="Vertical">

                                        <Label Text="{Binding Name}"

                                               FontSize="24"

                                               TextColor="Blue" />

                                        <Label Text="{Binding Number}"

                                               FontSize="20"

                                               TextColor="LightSlateGray" />

                                    </StackLayout>

                                </ViewCell>

                            </DataTemplate>

                        </ListView.ItemTemplate>

                    </ListView>

                </syncfusion:SfTabItem.Content>

            </syncfusion:SfTabItem>

        </syncfusion:SfTabView>

[Sakthivel Palaniyappan]

Hi Stephanus,

Greetings from Syncfusion.

Query 1: Using HeaderContent. Cannot able to change colors when selecting Tab

We have analyzed your query and we would like to inform that SelectionIndicator  does not work when using custom header. Please refer the below link for this
https://help.syncfusion.com/xamarin/tabbed-view/custom-header

You can customize custom header content ( label or image) when selecting the tab as like below code snippet.

XAML: 

  

    <syncfusion:SfTabView x:Name="tabView" SelectedIndex="{Binding SelectedIndex}" SelectionChanged="TabView_SelectionChanged" 

                              TabHeight="80" 

                              BackgroundColor="#BEBEBE" 

                              EnableSwiping="False" 

                              VisibleHeaderCount="3"> 

C#: 

private void TabView_SelectionChanged(object sender, Syncfusion.XForms.TabView.SelectionChangedEventArgs e) 

        { 

            foreach (var item in tabView.Items) 

            { 

                if (e.Index == tabView.Items.IndexOf(item)) 

                    ((item.HeaderContent as Grid).Children[0] as Label).TextColor = Color.DarkOrange; 

                else 

                    ((item.HeaderContent as Grid).Children[0] as Label).TextColor = Color.Black; ; 

            } 

        } 

We have created sample based on this and please find the sample from below

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewSample-472274296.zip

Query 2: How can i have a different Content pages inside SFTabView

Please refer the below KB link for loading different content page in SfTabView.

https://www.syncfusion.com/kb/11041/how-to-load-different-content-page-as-tab-items-content

Please let us know if you have any other queries.

Regards,
Sakthivel P.