How to customize TabView in WinUI3

Question

How to customize TabView in WinUI3

C CB 175

How to customize TabView in WinUI3 as follows:

Set the header of the selected tab to bold font and red background, and the header of the unselected tab to yellow background.
Leave some space between each tab header.
Add a red dividing line between the head of the tab and the content area below, with the width of the line equal to the width of the entire TabView.
Add a red rectangular box to the outermost layer of each tab's content area, so that the content is displayed within the rectangular box.

To my knowledge, implementing these may require modifying the control template, but I am not familiar with it. I hope those who know can provide a complete XAML example.

Furthermore, how to achieve the following functions:

How to make the display text of the tab header editable after clicking, and cannot input or paste certain special characters such as slashes during editing, losing focus or completing editing after entering, just like changing the name of a Windows file/folder.

Jeanine Zhang-MSFT 11,356 Reputation points Microsoft External Staff

2024-06-28T03:59:49.8766667+00:00

I suggest you could refer to the Doc:TabView Class

You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a control's style and template, see XAML styles. The default style, template, and resources that define the look of the control are included in the generic.xaml file. For design purposes, generic.xaml is installed with the WinUI (Microsoft.UI.Xaml) NuGet package. By default, this location is \Users<username>.nuget\packages\microsoft.ui.xaml<version>\lib\uap10.0\Microsoft.UI.Xaml\Themes\generic.xaml. Styles and resources from different versions of WinUI might have different values.

I suggest you could try it by yourself first. If you have any further question please let us know.

Your answer

Jeanine Zhang-MSFT 11,356 Reputation points Microsoft External Staff

2024-06-28T03:59:49.8766667+00:00

I suggest you could refer to the Doc:TabView Class

You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a control's style and template, see XAML styles. The default style, template, and resources that define the look of the control are included in the generic.xaml file. For design purposes, generic.xaml is installed with the WinUI (Microsoft.UI.Xaml) NuGet package. By default, this location is \Users<username>.nuget\packages\microsoft.ui.xaml<version>\lib\uap10.0\Microsoft.UI.Xaml\Themes\generic.xaml. Styles and resources from different versions of WinUI might have different values.

I suggest you could try it by yourself first. If you have any further question please let us know.

Share via

How to customize TabView in WinUI3

Your answer