[ TreeView ] Multi Select state doesn't meet high contrast requiremen…

…ts (#6729) * date pickers * adding time picker and flyout theming * update background smoke for hc * fix multi select in hc * updating focus visuals * rename * update verification files Co-authored-by: Karen Lai <[email protected]>
microsoft · Feb 24, 2022 · 6966e16 · 6966e16
1 parent 327128b
commit 6966e16
Show file tree

Hide file tree

Showing 4 changed files with 460 additions and 24 deletions.
diff --git a/dev/TreeView/TreeViewItem.xaml b/dev/TreeView/TreeViewItem.xaml
@@ -17,6 +17,7 @@
         <Setter Property="GlyphBrush" Value="{ThemeResource TreeViewItemForeground}"/>
         <Setter Property="MinHeight" Value="{ThemeResource TreeViewItemMinHeight}"/>
         <contract7Present:Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
+        <Setter Property="FocusVisualMargin" Value="0,-1,0,-1"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="local:TreeViewItem">
@@ -126,6 +127,7 @@
                                     <VisualState.Setters>
                                         <Setter Target="MultiSelectCheckBox.Visibility" Value="Visible" />
                                         <Setter Target="MultiSelectGrid.Background" Value="{ThemeResource TreeViewItemBackgroundSelected}" />
+                                        <Setter Target="MultiSelectGrid.BorderBrush" Value="{ThemeResource TreeViewItemMultiSelectBorderBrushSelected}" />
                                         <Setter Target="ExpandCollapseChevron.Padding" Value="0,0,14,0" />
                                         <Setter Target="ContentPresenterGrid.Padding" Value="0" />
                                     </VisualState.Setters>
@@ -154,24 +156,32 @@
                             contract7Present:RadiusY="2"/>
 
 
-                        <Grid x:Name="MultiSelectGrid" Padding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TreeViewItemTemplateSettings.Indentation}">
+                        <Grid
+                            x:Name="MultiSelectGrid"
+                            Margin="{ThemeResource TreeViewItemMultiSelectSelectedItemBorderMargin}"
+                            Padding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TreeViewItemTemplateSettings.Indentation}"
+                            BorderBrush="Transparent"
+                            BorderThickness="{ThemeResource TreeViewItemBorderThemeThickness}"
+                            contract7Present:CornerRadius="{ThemeResource ControlCornerRadius}">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="Auto" />
                                 <ColumnDefinition Width="Auto" />
                                 <ColumnDefinition />
                             </Grid.ColumnDefinitions>
 
                             <Grid Grid.Column="0">
-                                <CheckBox x:Name="MultiSelectCheckBox"
-                                            Width="32"
-                                            MinWidth="32"
-                                            MinHeight="{ThemeResource TreeViewItemMultiSelectCheckBoxMinHeight}"
-                                            Margin="10,0,0,0"
-                                            VerticalAlignment="Center"
-                                            Visibility="Collapsed"
-                                            IsTabStop="False"
-                                            AutomationProperties.AccessibilityView="Raw" />
-                                <Border x:Name="MultiArrangeOverlayTextBorder"
+                                <CheckBox
+                                    x:Name="MultiSelectCheckBox"
+                                    Width="32"
+                                    MinWidth="32"
+                                    MinHeight="{ThemeResource TreeViewItemMultiSelectCheckBoxMinHeight}"
+                                    Margin="10,0,0,0"
+                                    VerticalAlignment="Center"
+                                    Visibility="Collapsed"
+                                    IsTabStop="False"
+                                    AutomationProperties.AccessibilityView="Raw" />
+                                <Border
+                                    x:Name="MultiArrangeOverlayTextBorder"
                                     Visibility="Collapsed"
                                     IsHitTestVisible="False"
                                     MinWidth="20"
@@ -182,7 +192,8 @@
                                     BorderThickness="1"
                                     BorderBrush="{ThemeResource SystemControlBackgroundChromeWhiteBrush}"
                                     CornerRadius="{ThemeResource ControlCornerRadius}">
-                                    <TextBlock x:Name="MultiArrangeOverlayText"
+                                    <TextBlock
+                                        x:Name="MultiArrangeOverlayText"
                                         Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TreeViewItemTemplateSettings.DragItemsCount}"
                                         Style="{ThemeResource CaptionTextBlockStyle}"
                                         Foreground="{ThemeResource SystemControlForegroundChromeWhiteBrush}"
@@ -193,13 +204,15 @@
                                 </Border>
                             </Grid>
 
-                            <Grid x:Name="ExpandCollapseChevron"
+                            <Grid
+                                x:Name="ExpandCollapseChevron"
                                 Grid.Column="1"
                                 Padding="14,0"
                                 Width="Auto"
                                 Opacity="{TemplateBinding GlyphOpacity}"
                                 Background="Transparent">
-                                <TextBlock x:Name="CollapsedGlyph"
+                                <TextBlock
+                                    x:Name="CollapsedGlyph"
                                     Foreground="{TemplateBinding GlyphBrush}"
                                     Width="12"
                                     Height="12"
@@ -212,7 +225,8 @@
                                     AutomationProperties.AccessibilityView="Raw"
                                     IsTextScaleFactorEnabled="False"
                                     IsHitTestVisible="False"/>
-                                <TextBlock x:Name="ExpandedGlyph"
+                                <TextBlock
+                                    x:Name="ExpandedGlyph"
                                     Foreground="{TemplateBinding GlyphBrush}"
                                     Width="12"
                                     Height="12"
@@ -227,7 +241,8 @@
                                     IsHitTestVisible="False"/>
                             </Grid>
 
-                            <ContentPresenter x:Name="ContentPresenter"
+                            <ContentPresenter
+                                x:Name="ContentPresenter"
                                 Grid.Column="2"
                                 ContentTransitions="{TemplateBinding ContentTransitions}"
                                 ContentTemplate="{TemplateBinding ContentTemplate}"

diff --git a/dev/TreeView/TreeView_themeresources.xaml b/dev/TreeView/TreeView_themeresources.xaml
@@ -33,7 +33,8 @@
             <StaticResource x:Key="TreeViewItemBorderBrushSelectedPointerOver" ResourceKey="SubtleFillColorTransparentBrush" />
             <StaticResource x:Key="TreeViewItemBorderBrushSelectedPressed" ResourceKey="SubtleFillColorTransparentBrush" />
             <StaticResource x:Key="TreeViewItemBorderBrushSelectedDisabled" ResourceKey="SubtleFillColorTransparentBrush" />
-
+
+            <StaticResource x:Key="TreeViewItemMultiSelectBorderBrushSelected" ResourceKey="SubtleFillColorTransparentBrush" />
             <StaticResource x:Key="TreeViewItemCheckBoxBackgroundSelected" ResourceKey="SubtleFillColorTransparentBrush" />
             <StaticResource x:Key="TreeViewItemCheckBoxBorderSelected" ResourceKey="TextFillColorSecondaryBrush" />
             <StaticResource x:Key="TreeViewItemCheckGlyphSelected" ResourceKey="TextFillColorSecondaryBrush" />
@@ -45,6 +46,7 @@
             <Thickness x:Key="TreeViewItemBorderThemeThickness">0</Thickness>
             <Thickness x:Key="TreeViewItemPresenterMargin">4,2</Thickness>
             <Thickness x:Key="TreeViewItemPresenterPadding">0,3,0,5</Thickness>
+            <Thickness x:Key="TreeViewItemMultiSelectSelectedItemBorderMargin">0</Thickness>
             <x:Double x:Key="TreeViewItemMinHeight">28</x:Double>
             <x:Double x:Key="TreeViewItemMultiSelectCheckBoxMinHeight">28</x:Double>
             <x:Double x:Key="TreeViewItemContentHeight">20</x:Double>
@@ -78,6 +80,7 @@
             <StaticResource x:Key="TreeViewItemBorderBrushSelectedPressed" ResourceKey="SubtleFillColorTransparentBrush" />
             <StaticResource x:Key="TreeViewItemBorderBrushSelectedDisabled" ResourceKey="SubtleFillColorTransparentBrush" />
 
+            <StaticResource x:Key="TreeViewItemMultiSelectBorderBrushSelected" ResourceKey="SubtleFillColorTransparentBrush" />
             <StaticResource x:Key="TreeViewItemCheckBoxBackgroundSelected" ResourceKey="SubtleFillColorTransparentBrush" />
             <StaticResource x:Key="TreeViewItemCheckBoxBorderSelected" ResourceKey="TextFillColorSecondaryBrush" />
             <StaticResource x:Key="TreeViewItemCheckGlyphSelected" ResourceKey="TextFillColorSecondaryBrush" />
@@ -89,29 +92,30 @@
             <Thickness x:Key="TreeViewItemBorderThemeThickness">0</Thickness>
             <Thickness x:Key="TreeViewItemPresenterMargin">4,2</Thickness>
             <Thickness x:Key="TreeViewItemPresenterPadding">0,3,0,5</Thickness>
+            <Thickness x:Key="TreeViewItemMultiSelectSelectedItemBorderMargin">0</Thickness>
             <x:Double x:Key="TreeViewItemMinHeight">28</x:Double>
             <x:Double x:Key="TreeViewItemMultiSelectCheckBoxMinHeight">28</x:Double>
             <x:Double x:Key="TreeViewItemContentHeight">20</x:Double>
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="HighContrast">
             <StaticResource x:Key="TreeViewItemBackground" ResourceKey="SystemColorWindowColorBrush" />
-            <StaticResource x:Key="TreeViewItemBackgroundPointerOver" ResourceKey="SystemColorHighlightColorBrush" />
+            <StaticResource x:Key="TreeViewItemBackgroundPointerOver" ResourceKey="SystemColorWindowColorBrush" />
             <StaticResource x:Key="TreeViewItemBackgroundPressed" ResourceKey="SystemColorWindowColorBrush" />
             <StaticResource x:Key="TreeViewItemBackgroundDisabled" ResourceKey="SystemColorWindowColorBrush" />
             <StaticResource x:Key="TreeViewItemBackgroundSelected" ResourceKey="SystemColorWindowColorBrush" />
             <StaticResource x:Key="TreeViewItemBackgroundSelectedPointerOver" ResourceKey="SystemColorButtonFaceColorBrush" />
             <StaticResource x:Key="TreeViewItemBackgroundSelectedPressed" ResourceKey="SystemColorButtonFaceColorBrush" />
-            <StaticResource x:Key="TreeViewItemBackgroundSelectedDisabled" ResourceKey="SystemColorGrayTextColorBrush" />
+            <StaticResource x:Key="TreeViewItemBackgroundSelectedDisabled" ResourceKey="SystemColorWindowColorBrush" />
 
             <StaticResource x:Key="TreeViewItemForeground" ResourceKey="SystemColorButtonTextColorBrush" />
-            <StaticResource x:Key="TreeViewItemForegroundPointerOver" ResourceKey="SystemColorHighlightTextColorBrush" />
+            <StaticResource x:Key="TreeViewItemForegroundPointerOver" ResourceKey="SystemColorHighlightColorBrush" />
             <StaticResource x:Key="TreeViewItemForegroundPressed" ResourceKey="SystemColorHighlightColorBrush" />
             <StaticResource x:Key="TreeViewItemForegroundDisabled" ResourceKey="SystemColorGrayTextColorBrush" />
             <StaticResource x:Key="TreeViewItemForegroundSelected" ResourceKey="SystemColorHighlightColorBrush" />
             <StaticResource x:Key="TreeViewItemForegroundSelectedPointerOver" ResourceKey="SystemColorButtonTextColorBrush" />
             <StaticResource x:Key="TreeViewItemForegroundSelectedPressed" ResourceKey="SystemColorButtonTextColorBrush" />
-            <StaticResource x:Key="TreeViewItemForegroundSelectedDisabled" ResourceKey="SystemColorWindowColorBrush" />
+            <StaticResource x:Key="TreeViewItemForegroundSelectedDisabled" ResourceKey="SystemColorGrayTextColorBrush" />
 
             <StaticResource x:Key="TreeViewItemBorderBrush" ResourceKey="SystemColorWindowColorBrush" />
             <StaticResource x:Key="TreeViewItemBorderBrushPointerOver" ResourceKey="SystemColorHighlightColorBrush" />
@@ -121,7 +125,8 @@
             <StaticResource x:Key="TreeViewItemBorderBrushSelectedPointerOver" ResourceKey="SystemColorButtonTextColorBrush" />
             <StaticResource x:Key="TreeViewItemBorderBrushSelectedPressed" ResourceKey="SystemColorButtonFaceColorBrush" />
             <StaticResource x:Key="TreeViewItemBorderBrushSelectedDisabled" ResourceKey="SystemColorGrayTextColorBrush" />
-
+
+            <StaticResource x:Key="TreeViewItemMultiSelectBorderBrushSelected" ResourceKey="SystemColorButtonTextColorBrush" />
             <StaticResource x:Key="TreeViewItemCheckBoxBackgroundSelected" ResourceKey="SystemColorWindowColorBrush" />
             <StaticResource x:Key="TreeViewItemCheckBoxBorderSelected" ResourceKey="SystemColorButtonTextColorBrush" />
             <StaticResource x:Key="TreeViewItemCheckGlyphSelected" ResourceKey="SystemColorWindowTextColorBrush" />
@@ -133,6 +138,7 @@
             <Thickness x:Key="TreeViewItemBorderThemeThickness">1</Thickness>
             <Thickness x:Key="TreeViewItemPresenterMargin">4,2</Thickness>
             <Thickness x:Key="TreeViewItemPresenterPadding">0,3,0,5</Thickness>
+            <Thickness x:Key="TreeViewItemMultiSelectSelectedItemBorderMargin">1</Thickness>
             <x:Double x:Key="TreeViewItemMinHeight">28</x:Double>
             <x:Double x:Key="TreeViewItemMultiSelectCheckBoxMinHeight">28</x:Double>
             <x:Double x:Key="TreeViewItemContentHeight">20</x:Double>