Microsoft-ui-xaml: Proposal: Provide an additional TabView "skin" that is based on the WCT TabView

[chingucoding]

Proposal: Provide an additional TabView "skin" that is based on the WCT look

Summary

A lot of people coming from the Windows Community Toolkit TabView prefer the look of the WCT TabView compared to the WinUI TabView. To make the switch to the WinUI TabView easier, we should have a WinUI TabView style which is based on the look of the WCT TabView.

Rationale

Since the WCT TabView is deprecated now, and will be removed at some point, people would either need to move the WinUI TabView despite prefering the WCT look or fork the WCT TabView and maintain it themselves. By providing a style that uses the WinUI TabView and looks like the WCT TabView, we would allow people to use the style they prefer.

This is also something some people already asked about (to some degree):
Request to have the WinUI TabView styled the same as the WCT
Wish to have Acrylic and Reveal in WinUI TabView

Important Notes

Possible API:

<!-- WinUI Fluent TabView -->
<muxc:TabView />

<!-- WinUI TabView with look based on WCT-->
<muxc:TabView Style="{StaticResource BoxTabViewStyle}" />

Comparison

WinUI TabView

WCT TabView

Open Questions

Where should this new style be hosted? Inside WinUI since it is a WinUI control or maybe somewhere else?

What should the new "skin" be called?

[StephenLPeters]

@chingucoding could you provide pictures as well?

[chingucoding]

@chingucoding could you provide pictures as well?

Sure thing @StephenLPeters, I've updated the issue to include gifs and pictures showing both versions.

[mdtauk]

You say Skin, do you mean bundling a Style for the control in the WinUI toolkit that, when applied, will give it the WCT/Legacy Edge look?

Or do you see it as being a more fundamental property like TabVisual.WCT | TabVisual.Edge?

[ranjeshj]

I would expect this be a named style as opposed to an API on TabView. @chigy Is there a precedent/pattern for providing multiple styles for the same control ?

[mdtauk]

I would expect this be a named style as opposed to an API on TabView. @chigy Is there a precedent/pattern for providing multiple styles for the same control ?

There is the AccentButton Style, as well as an Icon Button and Text Button

[chingucoding]

Yes the idea is to provide a separate style for the WinUI TabView (as shown in the small example API snippet).

[mdtauk]

Yes the idea is to provide a separate style for the WinUI TabView (as shown in the small example API snippet).

Ok so ResourceDictionary then.

[stmoy]

Ok so ResourceDictionary then.

I think it'd literally be a Style, similar to AccentButtonStyle.

[mdtauk]

Posting this comment here as it may be related or relevant...

So as Edge allows for Tabs with PWA windows, we see a new style for the Tab bar, using a chosen colour.

Does TabView need to offer a style option to allow for an Accent colour to be used.

Terminal may benefit from any steps in this direction, as it hopes to add XAML themeing options for the user - or to allow for the user's choice of a coloured TitleBar to work with TabViews extending into the title bar area.

[stmoy]

@mdtauk - thanks for the input on accent color, but I'm going to mark this particular thread as "off topic" since it isn't relevant to the proposal here about supporting a Windows Community Toolkit-style skin.

Note also that the TabView already does support accent color background as an app-provided choice, such as found in the Xaml Controls Gallery:

[chingucoding]

While investigating this, I noticed an issue for this that is a complete show stopper: there is no way to override the default TabViewItem style. Unlike some other controls, the TabViewItem does not follow the pattern of:

<Style TargetType="ControlName" BasedOn="DefaultControlNameStyle"/>

<Style x:Key="DefaultControlNameStyle" TargetType="ControlName">
...
</Style>

but rather just exposes the complete template as the default style leaving users with no choice of easily overriding the default style. However that is something that we would need for this feature to be easily usable. @ranjeshj @stmoy @StephenLPeters Is that something we can change to make that customization easier?

@michael-hawker FYI

[huoyaoyuan]

How about a tab like skin for Pivot? Behavior of Pivot is closer to TabControl in WPF.

[chingucoding]

The main point of this proposal is to make the migration from the WCT TabView to the WinUI easier for people who preferred the WCT look of TabView.

[huoyaoyuan]

make the migration from the WCT TabView to the WinUI

I did migration from WCT TabView to WinUI Pivot - I do need the pivot-like behavior instead of TabView. I remember that TabView didn't satisfy me.

[mdtauk]

make the migration from the WCT TabView to the WinUI

I did migration from WCT TabView to WinUI Pivot - I do need the pivot-like behavior instead of TabView. I remember that TabView didn't satisfy me.

No reason to not keep using the Pivot then

[chingucoding]

If you need Pivot behavior, neither WCT TabView nor the WinUI TabView would be a good choice. WinUI TabView has replaced the WCT TabView and with feature parity of WinUI and WCT TabView, WCT TabView was deprecated. That's why I was proposing making that upgrade path easier.

[michael-hawker]

While investigating this, I noticed an issue for this that is a complete show stopper: there is no way to override the default TabViewItem style. Unlike some other controls, the TabViewItem does not follow the pattern...

Yeah, I've noticed this in a few places, I just called it out on the new Expander PR. There's a lot of general improvements to the templates that should be done for this across multiple controls in WinUI. Probably deserves its own general issue.

Edit: Filed https://github.com/microsoft/microsoft-ui-xaml/issues/3735

[michael-hawker]

How about a tab like skin for Pivot? Behavior of Pivot is closer to TabControl in WPF.

Pivot was very much meant for touch-first experiences, it behaves oddly if you have scrolling content within it. It's not really like the TabControl in WPF at all. We had gone down the path at first of customizing Pivot to implement TabView in the Toolkit before we realized it should be its own control.

The new SwitchPresenter we're adding in the Toolkit should make basic scenarios work well (as we did for the new ColorPicker) if you don't need the swipe behavior and need heavy customization of a few static items.