How to update TextColor for selected tab when state is Pressed?

[Maksym Shustov]

How to update TextColor for selected tab when state is Pressed? I was not able to find the key in Theme dictionary for this state. Could you please help me with it?

[Brundha Velusamy]

Hi Maksym Shustov,

Greetings from Syncfusion support!

In response to your query, we suggest using the VisualStateManager for the TabItem to set the text color for the header text in the selected state. Below is a code snippet demonstrating this approach.

Additionally, we recommend utilizing the NormalFilled and SelectedFilled visual states in the VisualStateManager to customize the header when the IndicatorPlacement is set to Fill in the TabView, based on your requirements.

Here's an example code snippet:

<Style TargetType="tabView:SfTabItem">

    <Setter Property="VisualStateManager.VisualStateGroups">

        <VisualStateGroupList>

            <VisualStateGroup>

                <VisualState x:Name="Normal" >

                    <VisualState.Setters>

                        <Setter Property="TextColor" Value="Black" />

                    </VisualState.Setters>

                </VisualState>

                <VisualState x:Name="NormalFilled">

                    <VisualState.Setters>

                        <Setter Property="TextColor" Value="Black" />

                    </VisualState.Setters>

                </VisualState>

                <VisualState x:Name="Selected">

                    <VisualState.Setters>

                        <Setter Property="TextColor" Value="#6200EE" />

                    </VisualState.Setters>

                </VisualState>

                <VisualState x:Name="SelectedFilled">

                    <VisualState.Setters>

                        <Setter Property="TextColor" Value="White" />

                    </VisualState.Setters>

                </VisualState>

                <VisualState x:Name="Pressed">

                    <VisualState.Setters>

                        <Setter Property="TextColor" Value="Red" />

                    </VisualState.Setters>

                </VisualState>

                <VisualState x:Name="PressedFilled">

                    <VisualState.Setters>

                        <Setter Property="TextColor" Value="Red" />

                    </VisualState.Setters>

                </VisualState>

                <VisualState x:Name="InActivePressed">

                    <VisualState.Setters>

                        <Setter Property="TextColor" Value="Yellow" />

                    </VisualState.Setters>

                </VisualState>

                <VisualState x:Name="InActivePressedFilled">

                    <VisualState.Setters>

                        <Setter Property="TextColor" Value="Yellow" />

                    </VisualState.Setters>

                </VisualState>

            </VisualStateGroup>

        </VisualStateGroupList>

    </Setter>

</Style>

We have drafted a simple sample based on this approach and attached the sample and its demonstration video for your reference. Please review it and let us know if you have any concerns.

For more details, please refer to the following knowledge base article and utilize the GitHub sample provided for further clarification: How to customize the text color of the Header in .NET MAUI TabView (SfTabView)? (syncfusion.com)

We hope this helps! If you have any further questions or need additional assistance, please feel free to reach out.

Regards,

Brundha V

Attachment: SelectedHeaderColorCustomization_9dae0a04.zip

[Maksym Shustov]

Thanks! It's working!

[Preethi Rajakandham]

Hi Maksym Shustov,

You're welcome. 

We are glad that the provided response meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out. 

Regards,

Preethi R

[Brian Senecal]

I tried this, but it did not work. I am using a viewmodel to fill the tabs. I use a datatemplate.

   <Grid Grid.Row="2">

                        <tab:SfTabView x:Name="tabView" TabBarHeight="80" TabBarPlacement="Bottom"

                                       TabItemTapped="tabView_TabItemTapped" TabWidthMode="SizeToContent"

                                       TabBarBackground="#FFA64D" Padding="0" IndicatorPlacement="Fill"

                                       BindingContext="{Binding Source = {vm:TabsViewModel}}"

                                       ItemsSource="{Binding TabModels}">

                            <tab:SfTabView.HeaderItemTemplate>

                                <DataTemplate>

                                    <StackLayout>

                                        <Image Margin="15,0,15,0" Source="{Binding Image}" WidthRequest="50" HeightRequest="50" VerticalOptions="Center"/>

                                        <Label Padding="15,0,15,0" Text="{Binding Title}" />

                                    </StackLayout>

                                </DataTemplate>

                            </tab:SfTabView.HeaderItemTemplate>

                        </tab:SfTabView>

                    </Grid>

                 

[Brundha Velusamy]

Hi Brian Senecal,

Thank you for reaching out to Syncfusion support!

We would like to inform you about the limitations regarding the use of the VisualStateManager in conjunction with the ItemsSource property of the SfTabView. In our implementation, the VisualStateManager is designed to work with TabItem directly. However, since TabItem and ItemsSource are treated as independent entities in the TabView, the VisualStateManager cannot effectively manage the visual states of the tab headers based on the selection.

To achieve the desired effect of changing the text color for selected tabs, we recommend utilizing the SelectionChanged event. This can be implemented through an EventToCommandBehavior, allowing you to bind the selection change to a command in your ViewModel. Below, we provide a code snippet illustrating how to set this up:

Code snippet:

//XAML
 

<tabView:SfTabView x:Name="tabView" SelectedIndex="0" ItemsSource="{Binding TabItems}"

                   TabBarHeight="80" TabBarPlacement="Bottom" TabItemTapped="tabView_TabItemTapped"

                   TabWidthMode="SizeToContent" TabBarBackground="#FFA64D" Padding="0" IndicatorPlacement="Fill">

    <tabView:SfTabView.Behaviors>

        <toolkit:EventToCommandBehavior Command="{Binding SelectionChangedCommand}" CommandParameter="{x:Reference tabView}" EventName="SelectionChanged"/>

    </tabView:SfTabView.Behaviors>

    <tabView:SfTabView.HeaderItemTemplate>

        <DataTemplate >

            <StackLayout>

                <Label x:Name="headerlabel"  Padding="15,0,15,10"  Text="{Binding Name}" TextColor="{Binding TextColor}"/>

            </StackLayout>

        </DataTemplate>

    </tabView:SfTabView.HeaderItemTemplate>

    …

</tabView:SfTabView>

//ViewModel
 

public class TabItemsSourceViewModel : INotifyPropertyChanged

{

    public event PropertyChangedEventHandler PropertyChanged;

 

    protected void OnPropertyChanged(string propertyName)

    {

        var handler = PropertyChanged;

        if (handler != null)

            handler(this, new PropertyChangedEventArgs(propertyName));

    }

 

    private ObservableCollection<Model> tabItems;

    public ObservableCollection<Model> TabItems

    {

        get { return tabItems; }

        set

        {

            tabItems = value;

            OnPropertyChanged("TabItems");

        }

    }

    private Command<object> selectionChangedCommand;

    public Command<object> SelectionChangedCommand

    {

        get { return selectionChangedCommand; }

        set

        {

            selectionChangedCommand = value;

            OnPropertyChanged("SelectionChangedCommand");

        }

    }

    public TabItemsSourceViewModel()

    {       

       TabItems = new ObservableCollection<Model>();

       TabItems.Add(new Model() { Name = "Alexandar", TextColor = Colors.Red });

       TabItems.Add(new Model() { Name = "Gabriella", TextColor = Colors.Black });

       TabItems.Add(new Model() { Name = "Clara", TextColor = Colors.Black });

       TabItems.Add(new Model() { Name = "Tye", TextColor = Colors.Black });

       TabItems.Add(new Model() { Name = "Nora", TextColor = Colors.Black });

       TabItems.Add(new Model() { Name = "Sebastian", TextColor = Colors.Black });

        SelectionChangedCommand = new Command<object>(ExecuteSelectionChangedCommand);

    }

 

    public void ExecuteSelectionChangedCommand(object obj)

    {

        if (obj is SfTabView tabItem)

        {

            // Reset the text color for all items

            foreach (var item in TabItems)

            {

                item.TextColor = Colors.Black; // Default color for non-selected tabs

            }

 

            // Set the selected tab's text color to red

            if (tabItem.SelectedIndex >= 0 && tabItem.SelectedIndex < TabItems.Count)

            {

                TabItems[(int)tabItem.SelectedIndex].TextColor = Colors.Red; // Color for selected tab

            }

        }

    }

}

In this implementation:

• We define a TextColor property within our Model class to allow dynamic updates to the text color of the tab headers.
• The SelectionChangedCommand is bound to the SelectionChanged event of the SfTabView. When the selection changes, the command is executed with the SfTabView instance as the command parameter.
• The ExecuteSelectionChangedCommand method first resets the text color for all tab items to the default color (black). It then checks which tab is currently selected and updates its text color to red.

For your convenience, we have attached an updated sample project that demonstrates this approach in action. We encourage you to review the sample and integrate this method into your application.

Should you have any further questions, concerns, or need additional assistance, please don’t hesitate to reach out. We’re here to help!

Regards,

Brundha V

Attachment: TabViewItemsSource_e257ed3f.zip