Is there a way to change the background of the Image inside the TabView?

[xDaijobu]

Hi, is it possible to change the background of the Image inside the TabView? For example, using selectedImageColor or unselectedImageColor.

One of the approaches I’ve tried is creating an ImageSource property for each tab and changing its value (along with the color) when the tab selection changes.

However, that solution didn't work.

[naveenkumar-sanjeevirayan]

Hi @xDaijobu

Thank you for reaching out.

Currently, the SfTabView does not have built-in support for changing the image background color using properties like SelectedImageColor or UnselectedImageColor. However, this behavior can be achieved through a workaround using VisualStateManager and FontImageSource.

Below is a sample implementation to help you dynamically change the image color based on tab selection:

<Style TargetType="tabView:SfTabItem">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="#000000" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="#6750A4" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

<tabView:SfTabView>
    <tabView:SfTabItem Header="Photos" x:Name="photosTab" ImageTextSpacing="5">
        <tabView:SfTabItem.ImageSource>
            <FontImageSource Glyph="&#xE703;"
                             Color="{Binding Source={x:Reference photosTab}, Path=TextColor}"
                             FontFamily="PhotoGallery"/>
        </tabView:SfTabItem.ImageSource>
        <!-- Tab content goes here -->
    </tabView:SfTabItem>
</tabView:SfTabView>

Let us know if you need assistance adapting this approach to your scenario.

Regards,
Naveenkumar S