telerik:RadTabView - change the background of the selected TabViewItem

[Daniel]

Hi,

How to change he background of the selected TabViewItem?

Thanks,

[Daniel]

In that way

<telerik:RadTabView x:Name="tabView"  >
                <telerik:RadTabView.HeaderStyle>
                    <Style TargetType="telerik:TabViewHeader">
                        <Setter Property="BackgroundColor" Value="#3399FF" />
                        <Setter Property="BorderColor" Value="{DynamicResource SecondaryColor}" />
                    </Style>

[Yana]

Hello Daniel,

As you would like to change the background of the TabViewItem, you would need to set HeaderItemStyle property, HeaderStyle applies styling to the whole header. You can take a look at the Visual Structure topic for more details on the TabView visual elements.

As to the HeaderItemStyle - you can find an example on how you can apply styling to the selected tab in our documentation topic here: HeaderItem Styling - in short through VisualStateManager different textcolor is set to the Selected tab, the same approach can be used for BackgroundColor:

<telerik:RadTabView x:Name="tabView">
    <telerik:RadTabView.HeaderItemStyle>
        <Style TargetType="telerik:TabViewHeaderItem">
            <Setter Property="FontAttributes" Value="Italic"/>
            <Setter Property="TextColor" Value="#99000000" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup Name="CommonStates">
                        <VisualState Name="Normal" />
                        <VisualState Name="Disabled">
                            <VisualState.Setters>
                                <Setter Property="TextColor" Value="#61000000" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="TextColor" Value="#e05194" />
                                <Setter Property="BorderColor" Value="#e05194" />
                                <Setter Property="BackgroundColor" Value="Yellow" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
 </telerik:RadTabView.HeaderItemStyle>
.....
</telerik:RadTabView>

Let me know if you have any further questions or concerns on this.

Regards,
Yana
Progress Telerik

[Daniel]

Hi,

How I move this style to app.xaml

<telerik:RadTabView x:Name="tabView"  >
                <telerik:RadTabView.HeaderItemStyle>
                    <Style TargetType="telerik:TabViewHeaderItem">
                        <Setter Property="FontAttributes" Value="Italic"/>
                        <Setter Property="TextColor" Value="{DynamicResource PrimaryColor}" />
                        <Setter Property="BorderThickness" Value="2" />
                        <Setter Property="VisualStateManager.VisualStateGroups">
                            <VisualStateGroupList>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="Disabled">
                                        <VisualState.Setters>
                                            <Setter Property="TextColor" Value="#61000000" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Property="TextColor" Value="{DynamicResource SecondaryColor}" />
                                            <Setter Property="BorderColor" Value="#e05194" />
                                            <Setter Property="BackgroundColor" Value="#3399FF" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateGroupList>
                        </Setter>
                    </Style>

[Yana]

You just need to copy the Style to the App.Resources with a x:Key applied:

<Style TargetType="telerik:TabViewHeaderItem" x:Key="TabViewHeaderItemStyle">
....
</Style>

And then use the set x:Key to assign that Style to the HeaderItemStyle property of the TabView:

 <telerik:RadTabView x:Name="tabView" HeaderItemStyle="{StaticResource TabViewHeaderItemStyle}">

I hope I was of help.

 

[Daniel]

I meant implicit style not explicit.

[Lance | Manager Technical Support]

An implicit style is just a style without an x:Key. Therefore, if you want that style to be applied to every instance of that component within the scope of those resources, then make sure you have a style with the correct TargetType.

Put this in your App.xaml resources if you want the style to be applied to everything in the application

 <Style TargetType="telerik:TabViewHeaderItem">
...
</style>

However, in XAML there are rules about when a style is applied. If there is already an explicit style (one with a Key), it will always take precedence over the implicit style.  The only way to override that is to use another explicit style, closer to the instance of the component, or directly set.

Therefore, if your implicit style in App.xaml doesn't provide the end result you want, then you must follow Yana's guidance and explicitly override the internally set HeaderItemStyle.