SfTabView tab header hover color in UWP

[Mike Goatly]

Hi,

I was wondering if it's possible to change the hover color for tabs? When using SfTabView in a dark color scheme in a UWP app, the highlight is too light and doesn't allow for controlling the contrast of the text against the background:

I can't spot a color that would allow me to do it - would it be possible to deal with this using a custom renderer?

Sample code for the above:

<?xml version="1.0" encoding="UTF-8" ?>

<ContentView

    x:Class="MyControl"

    xmlns="http://xamarin.com/schemas/2014/forms"

    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

    xmlns:tabView="clr-namespace:Syncfusion.XForms.TabView;assembly=Syncfusion.SfTabView.XForms">

    <ContentView.Resources>

        <Style

            TargetType="tabView:SfTabItem">

            <Setter

                Property="TitleFontSize"

                Value="18" />

            <Setter

                Property="SelectionColor"

                Value="White" />

            <Setter

                Property="TitleFontColor"

                Value="White" />

        </Style>

    </ContentView.Resources>

    <ContentView.Content>

        <Grid>

            <tabView:SfTabView

                BackgroundColor="Black"

                DisplayMode="Text"

                EnableSwiping="False"

                IsScrollButtonEnabled="False"

                TabHeaderBackgroundColor="Black"

                TabHeight="50"

                VisibleHeaderCount="2">

                <tabView:SfTabItem

                    Title="Tab 1">

                    <tabView:SfTabItem.Content>

                        <Grid />

                    </tabView:SfTabItem.Content>

                </tabView:SfTabItem>

                <tabView:SfTabItem

                    Title="Tab 2">

                    <tabView:SfTabItem.Content>

                        <Grid />

                    </tabView:SfTabItem.Content>

                </tabView:SfTabItem>

            </tabView:SfTabView>

        </Grid>

    </ContentView.Content>

</ContentView>

Thanks,

Mike

[Suganya Sethuraman]

Hi Mike,

Greetings from Syncfusion.

We have analyzed your requirement. We have achieved your requirement by setting MouseHoverBackground color in custom renderer as below code snippet.

Code Snippet:  

        protected override void OnElementChanged(ElementChangedEventArgs<Syncfusion.XForms.TabView.SfTabView> e)  

        {  

            base.OnElementChanged(e);  

  

            if (Control != null)  

            {  

                Control.MouseHoverBackground = new Windows.UI.Xaml.Media.SolidColorBrush(Colors.LightBlue);  

            }  

        }  

 

Please have the sample for your reference,
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewSample-949803196

Please let us know if you have any concerns.

Regards,
Suganya Sethuraman.  

 

[Mike Goatly]

That's perfect, thanks so much for the speedy response Suganya!

[Suganya Sethuraman]

Hi Mike,

Thanks for the update.

We are glad to know that the given solution works. Please let us know if you need any further assistance.

Regards,
Suganya Sethuraman.