Microsoft-ui-xaml: Proposal: TreeView's chevron should come with foreground color lightweight styling resources

[Felix-Dev]

Proposal: TreeView's chevron should come with foreground color lightweight styling resources

Summary

This proposal is intended to be a fleshed out version of proposal https://github.com/microsoft/microsoft-ui-xaml/issues/983. It aims to provide developers/designers with theme resources they can use to freely set the color of the TreeViewItem's expand/collapse chevron.

Rationale

Currently, a TreeViewItem's chevron foreground color cannot be set independently of the item's content foreground color and only respects the TreeViewItemForeground theme resource anyway as can be seen here and here.

• Issue https://github.com/microsoft/microsoft-ui-xaml/issues/983 shows there is some demand to set the chevron color.
• Win32 treeviews come with chevrons which change their color depending on whether the mouse is hovering over them or not.

I have already experimented some in the past days and thought about what specific chevron foreground color theme resources to add. I settled on two "classes" of theme resources to provide a satisfying chevron foreground color styling experience:
1) One set of theme resources which set the chevron color based on the UI state of its TreeViewItem:

TreeViewItemPressedExpandCollapseChevronForeground
TreeViewItemDisabledExpandCollapseChevronForeground

TreeViewItemSelectedPointerOverExpandCollapseChevronForeground
TreeViewItemSelectedPressedExpandCollapseChevronForeground
TreeViewItemSelectedDisabledExpandCollapseChevronForeground

2) One set of theme resources which set the chevron color based on the pointer state in regards to the chevron UI element itself:

TreeViewItemExpandCollapseChevronForegroundPointerOver

TreeViewItemSelectedExpandCollapseChevronForeground
TreeViewItemSelectedExpandCollapseChevronForegroundPointerOver

Observe that I have not added a TreeViewItemExpandCollapseChevronForegroundPressed resource. I don't think we need such a resource for this chevron as the click action cannot be "hold" like with buttons, for example. You click the chevron and the TreeViewItem will immediately expand/collapse.
Another reason is based on two observations: 1) I have not seen Win32 treeviews (FileExplorer, Visual Studio Solution Explorer's treeview, WPF standard TreeView control) having a separate color for the pressed chevron state and 2) it would likely add some (non-trivial) challenges to the implementation based on my testing experience. As such, I'm not sure a TreeViewItemExpandCollapseChevronForegroundPressed theme resource is worth having right now.

Below are images of the proposed theme resources in action:

<TreeView>
     <TreeView.Resources>
        <SolidColorBrush x:Key="TreeViewItemExpandCollapseChevronForeground" Color="{ThemeResource SystemAccentColor}" />
    </TreeView.Resources>
</TreeView>

<TreeView>
     <TreeView.Resources>
        <SolidColorBrush x:Key="TreeViewItemPointerOverExpandCollapseChevronForeground" Color="{ThemeResource SystemAccentColor}" />
    </TreeView.Resources>
</TreeView>

<TreeView>
     <TreeView.Resources>
        <SolidColorBrush x:Key="TreeViewItemPressedExpandCollapseChevronForeground" Color="{ThemeResource SystemAccentColorLight1}" />
    </TreeView.Resources>
</TreeView>

<TreeView>
     <TreeView.Resources>
        <SolidColorBrush x:Key="TreeViewItemSelectedExpandCollapseChevronForeground" Color="Yellow" />
    </TreeView.Resources>
</TreeView>

<TreeView>
     <TreeView.Resources>
        <SolidColorBrush x:Key="TreeViewItemSelectedPointerOverExpandCollapseChevronForeground" Color="Orange" />
    </TreeView.Resources>
</TreeView>

And below are two gifs showcasing the specific ExpandCollapseChevronForegroundPointerOver* theme resources:

<TreeView>
     <TreeView.Resources>
        <SolidColorBrush x:Key="TreeViewItemPointerOverExpandCollapseChevronForeground" Color="{ThemeResource SystemAccentColor}" />
        <SolidColorBrush x:Key="TreeViewItemExpandCollapseChevronForegroundPointerOver" Color="{ThemeResource SystemAccentColorLight2}" />
    </TreeView.Resources>
</TreeView>

<TreeView>
     <TreeView.Resources>
        <SolidColorBrush x:Key="TreeViewItemSelectedPointerOverExpandCollapseChevronForeground" Color="Orange" />
        <SolidColorBrush x:Key="TreeViewItemSelectedExpandCollapseChevronForegroundPointerOver" Color="Red" />
    </TreeView.Resources>
</TreeView>

Important Note

I could not yet test the two TreeViewItemDisabledExpandCollapseChevronForeground theme resources as there is currently an issue in the TreeView styling code which prevents *any of the disabled theme resources to apply when the TreeViewItem.IsEnabled property is set to false. This should be looked into in a separate issue.

Scope

| Capability | Priority |
| :---------- | :------- |
| Enable rich lightweight styling for TreeView's chevron foreground color | Must |

Additional Notes

If this will get the greenlight, I would like to create a PR. I already did some work to explore how these theme resources could be added to WinUI (i.e. all the images/gifs above are captured from the MUXControlsTestApp running my added code).

This PR would use the current default brushes for TreeViewItem content so that the visual behavior will remain unchanged from the current look. Any change like using AccentColor for the chevron would require the developer to override one/several of the theme resources to be introduced with the PR.

Open Questions

Is there demand/a compelling case for a TreeViewItemExpandCollapseChevronForegroundPressed resource?

[mdtauk]

The Glyphs themselves should be changeable also. Some may want to use Plus and Minus glyphs.

[Felix-Dev]

@mdtauk TreeViewItem's two different glyphs are currently shown in TextBlock controls and provide the following styling options (in addition to GlyphSize, GlyphBrush and GlyphOpacity):

TreeViewItem.CollapsedGlyph
TreeViewItem.ExpandedGlyph

The used FontFamily (which is not exposed) is Segoe MDL2 Assets, which seems to have plus and minus like symbols. That said, you don't have complete styling freedom currently without creating a hard-copy of the entire TreeViewItem style.

[mdtauk]

@mdtauk TreeViewItem's two different glyphs are currently shown in TextBlock controls and provide the following styling options:

TreeViewItem.CollapsedGlyph
TreeViewItem.ExpandedGlyph

The used FontFamily (which is not exposed) is Segoe MDL2 Assets, which seems to have _plus_ and _minus_ like symbols. That said, you don't have complete styling freedom currently without creating a hard-copy of the entire TreeViewItem style.

Seems like a good candidate for light-weight styling to me. FontFamily, Font Size

[Felix-Dev]

I would like to discuss that in a separate issue if that's possible for you so we can best cover additional thoughts. I.e. instead of exposing the FontFamily and other related properties (do we expect the developer/designer to change the FontFamily to get a different set of presumably icons to pick from), why not provide a Collapse/ExpandGlyphTemplate property for the TreeViewItem (which would also allow using a TextBlock with a specific FontFamily but also so much more)?

@mdtauk Edit: I just noticed I named this issue too broadly, my bad. In my thinking (since I have a potential PR lined up) this proposal should only deal with lightweight styling the foreground color of a TreeViewItem's chevron. Will rename the title. Sorry again.

[stevenbrix]

I could not yet test the two TreeViewItem*DisabledExpandCollapseChevronForeground theme resources as there is currently an issue in the TreeView styling code which prevents any of the disabled theme resources to apply when the TreeViewItem.IsEnabled property is set to false. This should be looked into in a separate issue.

Is there an issue filed for this?

[Felix-Dev]

@stevenbrix I haven't created one yet (currently still trying to figure out how to deal with some implementation issues in my potential PR for this issue). I will gladly file one though in the upcoming days if it won't be created by someone else until then.

[Felix-Dev]

@ranjeshj As seen in the recent July WinUI Community Call, @predavid-zz appears focused on WPF. What does that mean for progress on this issue she has been assigned to?

[ranjeshj]

Adding @YuliKl @chigy and @StephenLPeters since this is somewhat similar to the light weight styling we are doing for NavigationView.

[StephenLPeters]

Is there demand/a compelling case for a TreeViewItemExpandCollapseChevronForegroundPressed resource?

I think it is possible that you would want to change the shade of the color that you picked for the chevron. When the back plate changes color you might need to to meet contrast requirements... same with hover state.

[StephenLPeters]

I would like to discuss that in a separate issue if that's possible for you so we can best cover additional thoughts. I.e. instead of exposing the FontFamily and other related properties (do we expect the developer/designer to change the FontFamily to get a different set of presumably icons to pick from), why not provide a Collapse/ExpandGlyphTemplate property for the TreeViewItem (which would also allow using a TextBlock with a specific FontFamily but also so much more)?

Interesting proposal.

[mdtauk]

Segue MDL2, and the various other subsets of the Full MDL2 icon font, are the current default.

But Fluent Icons are out there, and there is a view that they could replace them.

If in the app,Xaml you could change the font family, it could make it easier to move over, when the Fluent Icons team figure out if and how, they bring support for the new iconography to Windows