SfTabItem seletected text color

[Luca]

Hi,

how i can set selected text color for SfTabItem?

I can find just IndicatorBackground.

thanks a lot

[Brundha Velusamy]

Hi Luca,

 

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. We have also drafted a sample based on this method and attached it for your reference. Please review it and let us know if you have any concerns.

 

Here's the code snippet for your reference:

<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="Selected">

                    <VisualState.Setters>

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

                    </VisualState.Setters>

                </VisualState>

            </VisualStateGroup>

        </VisualStateGroupList>

    </Setter>

</Style>

 

For more details, please refer to the following help documentation:

Visual state manager in .NET MAUI Tab View (SfTabView) | Syncfusion

 

Regards,

Brundha V

Attachment: TabView_2fc72be9.zip

[Luca]

Hi,

it's not working.

The Normal state override also Selected state (all the labels are black, even the selected one).

Or maybe selected is not working.

Update: I found the issue, if you set IndicatorPlacement="Fill" the selected state doesn't work, but if you use 

IndicatorPlacement="Bottom" it works.

can you check?

thanks

[Arunachalam Kandasamy Raja]

Hi Luca,

 

We suggest changing the selected text color in the Fill type of Indicator placement using the Visual State Manager. Below is a code snippet demonstrating this approach. We have also drafted a sample based on this method and attached it for your reference. Please review it and let us know if you have any concerns.

 

Here's the code snippet for your reference:

<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="Selected">

                    <VisualState.Setters>

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

                    </VisualState.Setters>

               </VisualState>

               <VisualState x:Name="SelectedFilled">

                    <VisualState.Setters>

                       <Setter Property="TextColor" Value="#FFFFFF" />

                    </VisualState.Setters>

                </VisualState>

                <VisualState x:Name="NormalFilled">

                    <VisualState.Setters>

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

                    </VisualState.Setters>

                </VisualState>

           </VisualStateGroup>

       </VisualStateGroupList>

   </Setter>

</Style>

 

Regards,

Arunachalam K

Attachment: F188807SfTabView_83e7cf58.zip

[Luca]

Hi,

thanks it works!

[Preethi Rajakandham]

Hi Luca,

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