Skip to content

Commit 0ff1f28

Browse files
dipeshmsftpegasus-lynx
dipeshmsft
and
pegasus-lynx
authored
Fixed DatePicker AccentBorder style issue (#9546)
* Fixed DatePicker AccentBorder style issue * Fixed accessibility issue in DatePicker keyboard navigation --------- Co-authored-by: Dipesh Kumar <dipeshkrj14@gmail.com>
1 parent 0e08212 commit 0ff1f28

File tree

7 files changed

+96
-168
lines changed

7 files changed

+96
-168
lines changed

‎src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Resources/Theme/Dark.xaml

+9
Original file line numberDiff line numberDiff line change
@@ -421,6 +421,15 @@
421421
<SolidColorBrush x:Key="DataGridRowSelectedBackgroundThemeBrush" Color="{StaticResource SystemAccentColorLight3}" />
422422
<SolidColorBrush x:Key="DataGridRowSelectedForegroundThemeBrush" Color="{StaticResource TextOnAccentFillColorPrimary}" />
423423

424+
<!-- DatePicker -->
425+
<SolidColorBrush x:Key="DatePickerForeground" Color="{StaticResource TextFillColorPrimary}" />
426+
<SolidColorBrush x:Key="DatePickerBackground" Color="{StaticResource ControlFillColorDefault}" />
427+
<SolidColorBrush x:Key="DatePickerTextBoxForeground" Color="{StaticResource TextFillColorPrimary}" />
428+
<SolidColorBrush x:Key="DatePickerTextBoxCaretBrush" Color="{StaticResource TextFillColorPrimary}" />
429+
<SolidColorBrush x:Key="DatePickerFocusedBorderBrush" Color="{StaticResource SystemAccentColorLight2}" />
430+
<SolidColorBrush x:Key="DatePickerBackgroundFocused" Color="{StaticResource ControlFillColorInputActive}" />
431+
<SolidColorBrush x:Key="DatePickerBackgroundPointerOver" Color="{StaticResource ControlFillColorSecondary}" />
432+
424433
<!-- DynamicScrollBar -->
425434
<SolidColorBrush x:Key="ScrollBarButtonBackground" Color="{StaticResource SubtleFillColorTransparent}" />
426435
<SolidColorBrush x:Key="ScrollBarButtonArrowForeground" Color="{StaticResource ControlStrongFillColorDefault}" />

‎src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Resources/Theme/HC.xaml

+9
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,15 @@
290290
<SolidColorBrush x:Key="DataGridRowSelectedBackgroundThemeBrush" Color="{StaticResource SystemColorButtonTextColor}" />
291291
<SolidColorBrush x:Key="DataGridRowSelectedForegroundThemeBrush" Color="{StaticResource SystemColorButtonFaceColor}" />
292292

293+
<!-- DatePicker -->
294+
<SolidColorBrush x:Key="DatePickerForeground" Color="{StaticResource SystemColorWindowTextColor}" />
295+
<SolidColorBrush x:Key="DatePickerBackground" Color="{StaticResource SystemColorWindowColor}" />
296+
<SolidColorBrush x:Key="DatePickerTextBoxForeground" Color="{StaticResource SystemColorButtonTextColor}" />
297+
<SolidColorBrush x:Key="DatePickerTextBoxCaretBrush" Color="{StaticResource SystemColorButtonTextColor}" />
298+
<SolidColorBrush x:Key="DatePickerFocusedBorderBrush" Color="{StaticResource SystemColorHighlightColor}" />
299+
<SolidColorBrush x:Key="DatePickerBackgroundFocused" Color="{StaticResource SystemColorHighlightTextColor}" />
300+
<SolidColorBrush x:Key="DatePickerBackgroundPointerOver" Color="{StaticResource SystemColorHighlightTextColor}" />
301+
293302
<!-- DynamicScrollBar -->
294303
<SolidColorBrush x:Key="ScrollBarButtonBackground" Color="Transparent" />
295304
<SolidColorBrush x:Key="ScrollBarButtonArrowForeground" Color="{StaticResource SystemColorButtonTextColor}" />

‎src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Resources/Theme/Light.xaml

+9
Original file line numberDiff line numberDiff line change
@@ -415,6 +415,15 @@
415415
<SolidColorBrush x:Key="DataGridRowSelectedBackgroundThemeBrush" Color="{StaticResource SystemAccentColorDark1}" />
416416
<SolidColorBrush x:Key="DataGridRowSelectedForegroundThemeBrush" Color="{StaticResource TextOnAccentFillColorPrimary}" />
417417

418+
<!-- DatePicker -->
419+
<SolidColorBrush x:Key="DatePickerForeground" Color="{StaticResource TextFillColorPrimary}" />
420+
<SolidColorBrush x:Key="DatePickerBackground" Color="{StaticResource ControlFillColorDefault}" />
421+
<SolidColorBrush x:Key="DatePickerTextBoxForeground" Color="{StaticResource TextFillColorPrimary}" />
422+
<SolidColorBrush x:Key="DatePickerTextBoxCaretBrush" Color="{StaticResource TextFillColorPrimary}" />
423+
<SolidColorBrush x:Key="DatePickerFocusedBorderBrush" Color="{StaticResource SystemAccentColorDark1}" />
424+
<SolidColorBrush x:Key="DatePickerBackgroundFocused" Color="{StaticResource ControlFillColorInputActive}" />
425+
<SolidColorBrush x:Key="DatePickerBackgroundPointerOver" Color="{StaticResource ControlFillColorSecondary}" />
426+
418427
<!-- DynamicScrollBar -->
419428
<SolidColorBrush x:Key="ScrollBarButtonBackground" Color="{StaticResource SubtleFillColorTransparent}" />
420429
<SolidColorBrush x:Key="ScrollBarButtonArrowForeground" Color="{StaticResource ControlStrongFillColorDefault}" />

‎src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Styles/DatePicker.xaml

+12-42
Original file line numberDiff line numberDiff line change
@@ -31,16 +31,8 @@
3131
<Setter Property="BorderBrush" Value="Transparent" />
3232
<Setter Property="Background" Value="Transparent" />
3333
<Setter Property="AutomationProperties.Name" Value="{Binding Path=(AutomationProperties.Name), Mode=OneWay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DatePicker}}}" />
34-
<Setter Property="Foreground">
35-
<Setter.Value>
36-
<SolidColorBrush Color="{DynamicResource TextFillColorPrimary}" />
37-
</Setter.Value>
38-
</Setter>
39-
<Setter Property="CaretBrush">
40-
<Setter.Value>
41-
<SolidColorBrush Color="{DynamicResource TextFillColorPrimary}" />
42-
</Setter.Value>
43-
</Setter>
34+
<Setter Property="Foreground" Value="{DynamicResource DatePickerTextBoxForeground}" />
35+
<Setter Property="CaretBrush" Value="{DynamicResource DatePickerTextBoxCaretBrush}" />
4436
<Setter Property="SnapsToDevicePixels" Value="True" />
4537
<Setter Property="OverridesDefaultStyle" Value="True" />
4638
<Setter Property="Template">
@@ -60,7 +52,7 @@
6052
</VisualState>
6153
</VisualStateGroup>
6254
</VisualStateManager.VisualStateGroups>
63-
55+
6456
<Border Margin="{TemplateBinding Margin}">
6557
<Decorator x:Name="PART_ContentHost" Margin="{TemplateBinding Padding}" />
6658
</Border>
@@ -83,16 +75,8 @@
8375
<Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
8476
<Setter Property="ContextMenu" Value="{DynamicResource DefaultControlContextMenu}" />
8577
<Setter Property="CalendarStyle" Value="{DynamicResource DefaultCalendarStyle}" />
86-
<Setter Property="Foreground">
87-
<Setter.Value>
88-
<SolidColorBrush Color="{DynamicResource TextFillColorPrimary}" />
89-
</Setter.Value>
90-
</Setter>
91-
<Setter Property="Background">
92-
<Setter.Value>
93-
<SolidColorBrush Color="{DynamicResource ControlFillColorDefault}" />
94-
</Setter.Value>
95-
</Setter>
78+
<Setter Property="Foreground" Value="{DynamicResource DatePickerForeground}" />
79+
<Setter Property="Background" Value="{DynamicResource DatePickerBackground}" />
9680
<Setter Property="BorderBrush" Value="{DynamicResource ControlElevationBorderBrush}" />
9781
<Setter Property="BorderThickness" Value="{StaticResource DatePickerBorderThemeThickness}" />
9882
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
@@ -106,6 +90,7 @@
10690
<Setter Property="Border.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
10791
<Setter Property="SnapsToDevicePixels" Value="True" />
10892
<Setter Property="OverridesDefaultStyle" Value="True" />
93+
<Setter Property="KeyboardNavigation.TabNavigation" Value="Local" />
10994
<Setter Property="Template">
11095
<Setter.Value>
11196
<ControlTemplate TargetType="{x:Type DatePicker}">
@@ -129,7 +114,7 @@
129114
BorderBrush="{TemplateBinding BorderBrush}"
130115
BorderThickness="{TemplateBinding BorderThickness}"
131116
CornerRadius="{TemplateBinding Border.CornerRadius}">
132-
<Grid x:Name="PART_Root" FocusManager.FocusedElement="{Binding ElementName=PART_Button}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
117+
<Grid x:Name="PART_Root" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
133118
<Grid.ColumnDefinitions>
134119
<ColumnDefinition Width="*" />
135120
<ColumnDefinition Width="Auto" />
@@ -182,11 +167,8 @@
182167
HorizontalAlignment="Stretch"
183168
VerticalAlignment="Stretch"
184169
BorderThickness="{StaticResource DatePickerAccentBorderThemeThickness}"
185-
CornerRadius="{TemplateBinding Border.CornerRadius}">
186-
<Border.BorderBrush>
187-
<SolidColorBrush Color="{DynamicResource ControlStrongStrokeColorDefault}" />
188-
</Border.BorderBrush>
189-
</Border>
170+
CornerRadius="{TemplateBinding Border.CornerRadius}"
171+
BorderBrush="{DynamicResource ControlStrongStrokeColorDefaultBrush}"/>
190172
</Grid>
191173
<Popup
192174
x:Name="PART_Popup"
@@ -201,28 +183,16 @@
201183
<ControlTemplate.Triggers>
202184
<Trigger Property="IsKeyboardFocusWithin" Value="True">
203185
<Setter TargetName="AccentBorder" Property="BorderThickness" Value="0,0,0,2" />
204-
<Setter TargetName="AccentBorder" Property="BorderBrush">
205-
<Setter.Value>
206-
<SolidColorBrush Color="{DynamicResource SystemAccentColorSecondary}" />
207-
</Setter.Value>
208-
</Setter>
209-
<Setter TargetName="ContentBorder" Property="Background">
210-
<Setter.Value>
211-
<SolidColorBrush Color="{DynamicResource ControlFillColorInputActive}" />
212-
</Setter.Value>
213-
</Setter>
186+
<Setter TargetName="AccentBorder" Property="BorderBrush" Value="{DynamicResource DatePickerFocusedBorderBrush}" />
187+
<Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource DatePickerBackgroundFocused}" />
214188
</Trigger>
215189
<MultiTrigger>
216190
<MultiTrigger.Conditions>
217191
<Condition Property="IsEnabled" Value="True" />
218192
<Condition Property="IsMouseOver" Value="True" />
219193
<Condition Property="IsKeyboardFocusWithin" Value="False" />
220194
</MultiTrigger.Conditions>
221-
<Setter TargetName="ContentBorder" Property="Background">
222-
<Setter.Value>
223-
<SolidColorBrush Color="{DynamicResource ControlFillColorSecondary}" />
224-
</Setter.Value>
225-
</Setter>
195+
<Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource DatePickerBackgroundPointerOver}" />
226196
</MultiTrigger>
227197
<Trigger Property="IsEnabled" Value="True">
228198
<Setter Property="Cursor" Value="IBeam" />

‎src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.Dark.xaml

+19-42
Original file line numberDiff line numberDiff line change
@@ -422,6 +422,14 @@
422422
<!-- DataGrid -->
423423
<SolidColorBrush x:Key="DataGridRowSelectedBackgroundThemeBrush" Color="{StaticResource SystemAccentColorLight3}" />
424424
<SolidColorBrush x:Key="DataGridRowSelectedForegroundThemeBrush" Color="{StaticResource TextOnAccentFillColorPrimary}" />
425+
<!-- DatePicker -->
426+
<SolidColorBrush x:Key="DatePickerForeground" Color="{StaticResource TextFillColorPrimary}" />
427+
<SolidColorBrush x:Key="DatePickerBackground" Color="{StaticResource ControlFillColorDefault}" />
428+
<SolidColorBrush x:Key="DatePickerTextBoxForeground" Color="{StaticResource TextFillColorPrimary}" />
429+
<SolidColorBrush x:Key="DatePickerTextBoxCaretBrush" Color="{StaticResource TextFillColorPrimary}" />
430+
<SolidColorBrush x:Key="DatePickerFocusedBorderBrush" Color="{StaticResource SystemAccentColorLight2}" />
431+
<SolidColorBrush x:Key="DatePickerBackgroundFocused" Color="{StaticResource ControlFillColorInputActive}" />
432+
<SolidColorBrush x:Key="DatePickerBackgroundPointerOver" Color="{StaticResource ControlFillColorSecondary}" />
425433
<!-- DynamicScrollBar -->
426434
<SolidColorBrush x:Key="ScrollBarButtonBackground" Color="{StaticResource SubtleFillColorTransparent}" />
427435
<SolidColorBrush x:Key="ScrollBarButtonArrowForeground" Color="{StaticResource ControlStrongFillColorDefault}" />
@@ -2048,16 +2056,8 @@
20482056
<Setter Property="BorderBrush" Value="Transparent" />
20492057
<Setter Property="Background" Value="Transparent" />
20502058
<Setter Property="AutomationProperties.Name" Value="{Binding Path=(AutomationProperties.Name), Mode=OneWay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DatePicker}}}" />
2051-
<Setter Property="Foreground">
2052-
<Setter.Value>
2053-
<SolidColorBrush Color="{DynamicResource TextFillColorPrimary}" />
2054-
</Setter.Value>
2055-
</Setter>
2056-
<Setter Property="CaretBrush">
2057-
<Setter.Value>
2058-
<SolidColorBrush Color="{DynamicResource TextFillColorPrimary}" />
2059-
</Setter.Value>
2060-
</Setter>
2059+
<Setter Property="Foreground" Value="{DynamicResource DatePickerTextBoxForeground}" />
2060+
<Setter Property="CaretBrush" Value="{DynamicResource DatePickerTextBoxCaretBrush}" />
20612061
<Setter Property="SnapsToDevicePixels" Value="True" />
20622062
<Setter Property="OverridesDefaultStyle" Value="True" />
20632063
<Setter Property="Template">
@@ -2093,16 +2093,8 @@
20932093
<Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
20942094
<Setter Property="ContextMenu" Value="{DynamicResource DefaultControlContextMenu}" />
20952095
<Setter Property="CalendarStyle" Value="{DynamicResource DefaultCalendarStyle}" />
2096-
<Setter Property="Foreground">
2097-
<Setter.Value>
2098-
<SolidColorBrush Color="{DynamicResource TextFillColorPrimary}" />
2099-
</Setter.Value>
2100-
</Setter>
2101-
<Setter Property="Background">
2102-
<Setter.Value>
2103-
<SolidColorBrush Color="{DynamicResource ControlFillColorDefault}" />
2104-
</Setter.Value>
2105-
</Setter>
2096+
<Setter Property="Foreground" Value="{DynamicResource DatePickerForeground}" />
2097+
<Setter Property="Background" Value="{DynamicResource DatePickerBackground}" />
21062098
<Setter Property="BorderBrush" Value="{DynamicResource ControlElevationBorderBrush}" />
21072099
<Setter Property="BorderThickness" Value="{StaticResource DatePickerBorderThemeThickness}" />
21082100
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
@@ -2116,6 +2108,7 @@
21162108
<Setter Property="Border.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
21172109
<Setter Property="SnapsToDevicePixels" Value="True" />
21182110
<Setter Property="OverridesDefaultStyle" Value="True" />
2111+
<Setter Property="KeyboardNavigation.TabNavigation" Value="Local" />
21192112
<Setter Property="Template">
21202113
<Setter.Value>
21212114
<ControlTemplate TargetType="{x:Type DatePicker}">
@@ -2126,7 +2119,7 @@
21262119
</Grid.RowDefinitions>
21272120
<Grid Grid.Row="0" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
21282121
<Border x:Name="ContentBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Padding="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding Border.CornerRadius}">
2129-
<Grid x:Name="PART_Root" FocusManager.FocusedElement="{Binding ElementName=PART_Button}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
2122+
<Grid x:Name="PART_Root" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
21302123
<Grid.ColumnDefinitions>
21312124
<ColumnDefinition Width="*" />
21322125
<ColumnDefinition Width="Auto" />
@@ -2142,39 +2135,23 @@
21422135
</Grid>
21432136
</Border>
21442137
<!-- The Accent Border is a separate element so that changes to the border thickness do not affect the position of the element -->
2145-
<Border x:Name="AccentBorder" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderThickness="{StaticResource DatePickerAccentBorderThemeThickness}" CornerRadius="{TemplateBinding Border.CornerRadius}">
2146-
<Border.BorderBrush>
2147-
<SolidColorBrush Color="{DynamicResource ControlStrongStrokeColorDefault}" />
2148-
</Border.BorderBrush>
2149-
</Border>
2138+
<Border x:Name="AccentBorder" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderThickness="{StaticResource DatePickerAccentBorderThemeThickness}" CornerRadius="{TemplateBinding Border.CornerRadius}" BorderBrush="{DynamicResource ControlStrongStrokeColorDefaultBrush}" />
21502139
</Grid>
21512140
<Popup x:Name="PART_Popup" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" AllowsTransparency="True" Placement="Bottom" PlacementTarget="{Binding ElementName=PART_TextBox}" StaysOpen="False" />
21522141
</Grid>
21532142
<ControlTemplate.Triggers>
21542143
<Trigger Property="IsKeyboardFocusWithin" Value="True">
21552144
<Setter TargetName="AccentBorder" Property="BorderThickness" Value="0,0,0,2" />
2156-
<Setter TargetName="AccentBorder" Property="BorderBrush">
2157-
<Setter.Value>
2158-
<SolidColorBrush Color="{DynamicResource SystemAccentColorSecondary}" />
2159-
</Setter.Value>
2160-
</Setter>
2161-
<Setter TargetName="ContentBorder" Property="Background">
2162-
<Setter.Value>
2163-
<SolidColorBrush Color="{DynamicResource ControlFillColorInputActive}" />
2164-
</Setter.Value>
2165-
</Setter>
2145+
<Setter TargetName="AccentBorder" Property="BorderBrush" Value="{DynamicResource DatePickerFocusedBorderBrush}" />
2146+
<Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource DatePickerBackgroundFocused}" />
21662147
</Trigger>
21672148
<MultiTrigger>
21682149
<MultiTrigger.Conditions>
21692150
<Condition Property="IsEnabled" Value="True" />
21702151
<Condition Property="IsMouseOver" Value="True" />
21712152
<Condition Property="IsKeyboardFocusWithin" Value="False" />
21722153
</MultiTrigger.Conditions>
2173-
<Setter TargetName="ContentBorder" Property="Background">
2174-
<Setter.Value>
2175-
<SolidColorBrush Color="{DynamicResource ControlFillColorSecondary}" />
2176-
</Setter.Value>
2177-
</Setter>
2154+
<Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource DatePickerBackgroundPointerOver}" />
21782155
</MultiTrigger>
21792156
<Trigger Property="IsEnabled" Value="True">
21802157
<Setter Property="Cursor" Value="IBeam" />
@@ -3071,7 +3048,7 @@
30713048
<Setter Property="MinHeight" Value="{DynamicResource TextControlThemeMinHeight}" />
30723049
<Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}" />
30733050
<Setter Property="Padding" Value="{DynamicResource TextControlThemePadding}" />
3074-
<Setter Property="PasswordChar" Value="●" />
3051+
<Setter Property="PasswordChar" Value="●" />
30753052
<Setter Property="Border.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
30763053
<Setter Property="SnapsToDevicePixels" Value="True" />
30773054
<Setter Property="OverridesDefaultStyle" Value="True" />

0 commit comments

Comments
 (0)