Proposal: Add lightweight styling resource(s) for TabView's Separator

Proposal: Add lightweight styling resource(s) for TabView’s Separator

Summary

Currently, the margin of the TabView’s Separator cannot be easily modified:

<Border x:Name="TabSeparator"
      HorizontalAlignment="Right"
      Width="1"
      BorderBrush="{ThemeResource TabViewItemSeparator}"
      BorderThickness="1"
      Margin="0,6,0,6"/>

This proposal would expose this value via a resource to enable easy styling. Proposed resources:

• TabViewItemSeparatorMargin

This will enable TabView’s item separator to be styled like Edge UWP’s TabView separator, for example:

Edge UWP:

Open Questions

Should we also expose the width of the separator as a resource? On first glance, this could create issues with the shadow casting and tab item layout in general (i.e. overlaying the casted shadow on the left & shrinking the space between the close button of the previous tab and the beginning of the next tab).

Additional Context

If approved, I would look like to work on this.

[Felix-Dev]

@stmoy The motivation for this proposal is to make styling the TabView (here: the TabViewItemSeparator) as easy as possible for developers without having to retemplate the control. This light-weight styling resource could be used to create a TabView UI matching the Community Toolkit’s TabView look but it doesn’t have to. Developers/Designers can just pick any margin for the TabViewItemSeparator they favor.

In terms of names, I’m conflicted about TabViewSeparatorMargin, as it really describes the height of the line, right? But I guess the height is determined by a Margin so, maybe the name is appropriate.

The proposed theme resource works on the Margin property of the TabViewItemSeparator. It can be used to control the height of the separator but since it sets a margin, on paper not only the height can bet set but also the position of the separator in relation to the surrounding TabViewItems. As such, I find it proper to make this relationship clear in the naming of the theme resource - you can modify the separator’s margin and not just strictly its height.

[mdtauk]

This should be worked into this proposal I think. #2587

Depends. @Felix-Dev, is the motivation for this work to make the TabView look more like the one from Windows Community Toolkit? If so, agree that this should probably be bundled alongside #2587.

However, I think having more customizable light-weight styling keys seems like a righteous thing in general.

In terms of names, I’m conflicted about TabViewSeparatorMargin, as it really describes the height of the line, right? But I guess the height is determined by a Margin so, maybe the name is appropriate.

I was thinking more about how @chingucoding would be able to apply a style to the TabView control, which would allow him to change the separator style between both Edge and Legacy Edge styles.