telerik:RadTabView - change the background of the selected TabViewItem

1 Answer 39 Views
TabView
Daniel
Top achievements
Rank 1
Silver
Bronze
Daniel asked on 10 Mar 2022, 09:04 AM

Hi,

How to change he background of the selected TabViewItem?

Thanks,

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 10 Mar 2022, 09:13 AM

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>

1 Answer, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 10 Mar 2022, 10:59 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 04 Apr 2022, 05:41 AM

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
Telerik team
commented on 04 Apr 2022, 06:45 AM

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
Top achievements
Rank 1
Silver
Bronze
commented on 04 Apr 2022, 08:27 AM

I meant implicit style not explicit.
Lance | Manager Technical Support
Telerik team
commented on 04 Apr 2022, 12:47 PM

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.

Tags
TabView
Asked by
Daniel
Top achievements
Rank 1
Silver
Bronze
Answers by
Yana
Telerik team
Share this question
or