Skip to content

Commit 33f8dda

Browse files
[release/9.0-rc2] Fixing Fluent style for CheckBox, Calendar and text input controls (#9831)
* Fixed ListViewItem* duplication * Fixing Width and Height not being respected when *Alignment are set for some controls * Fixing Height and Width ignoring in Calendar * Fixed text box border inconsistency issue * Fixing template bindings in CheckBox and making it similar to WinUI * Fixing checkbox padding --------- Co-authored-by: Dipesh Kumar <[email protected]>
1 parent dd2f8c1 commit 33f8dda

File tree

14 files changed

+559
-293
lines changed

14 files changed

+559
-293
lines changed

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

Lines changed: 46 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@
269269
<GradientStop Offset="0.33" Color="{StaticResource ControlStrokeColorSecondary}" />
270270
<GradientStop Offset="1.0" Color="{StaticResource ControlStrokeColorDefault}" />
271271
</LinearGradientBrush.GradientStops>
272-
</LinearGradientBrush>
272+
</LinearGradientBrush>
273273

274274
<LinearGradientBrush x:Key="CircleElevationBorderBrush" MappingMode="RelativeToBoundingBox" StartPoint="0,0" EndPoint="0,1">
275275
<LinearGradientBrush.GradientStops>
@@ -278,23 +278,17 @@
278278
</LinearGradientBrush.GradientStops>
279279
</LinearGradientBrush>
280280

281-
<LinearGradientBrush x:Key="AccentControlElevationBorderBrush" MappingMode="Absolute" StartPoint="0,0" EndPoint="0,3">
282-
<LinearGradientBrush.RelativeTransform>
283-
<ScaleTransform CenterY="0.5" ScaleY="-1" />
284-
</LinearGradientBrush.RelativeTransform>
281+
<LinearGradientBrush x:Key="AccentControlElevationBorderBrush" MappingMode="RelativeToBoundingBox" StartPoint="0,1" EndPoint="0,0">
285282
<LinearGradientBrush.GradientStops>
286-
<GradientStop Offset="0.33" Color="{StaticResource ControlStrokeColorOnAccentSecondary}" />
287-
<GradientStop Offset="1.0" Color="{StaticResource ControlStrokeColorOnAccentDefault}" />
283+
<GradientStop Offset="0.025" Color="{StaticResource ControlStrokeColorOnAccentSecondary}" />
284+
<GradientStop Offset="0.075" Color="{StaticResource ControlStrokeColorOnAccentDefault}" />
288285
</LinearGradientBrush.GradientStops>
289286
</LinearGradientBrush>
290287

291-
<LinearGradientBrush x:Key="TextControlElevationBorderBrush" MappingMode="Absolute" StartPoint="0,0" EndPoint="0,2">
292-
<LinearGradientBrush.RelativeTransform>
293-
<ScaleTransform CenterY="0.5" ScaleY="-1" />
294-
</LinearGradientBrush.RelativeTransform>
288+
<LinearGradientBrush x:Key="TextControlElevationBorderBrush" MappingMode="RelativeToBoundingBox" StartPoint="0,1" EndPoint="0,0">
295289
<LinearGradientBrush.GradientStops>
296-
<GradientStop Offset="0.5" Color="{StaticResource ControlStrongStrokeColorDefault}" />
297-
<GradientStop Offset="1.0" Color="{StaticResource ControlStrokeColorDefault}" />
290+
<GradientStop Offset="0.025" Color="{StaticResource ControlStrongStrokeColorDefault}" />
291+
<GradientStop Offset="0.05" Color="{StaticResource ControlStrokeColorDefault}" />
298292
</LinearGradientBrush.GradientStops>
299293
</LinearGradientBrush>
300294

@@ -367,21 +361,49 @@
367361
<SolidColorBrush x:Key="CardFooterBackground" Color="{StaticResource CardBackgroundFillColorSecondary}" />
368362

369363
<!-- CheckBox -->
370-
<SolidColorBrush x:Key="CheckBoxBackground" Color="{StaticResource ControlAltFillColorSecondary}" />
371-
<SolidColorBrush x:Key="CheckBoxForeground" Color="{StaticResource TextFillColorPrimary}" />
372-
<SolidColorBrush x:Key="CheckBoxBorderBrush" Color="{StaticResource ControlStrongStrokeColorDefault}" />
373-
<SolidColorBrush x:Key="CheckBoxCheckBorderBrush" Color="{StaticResource SubtleFillColorTransparent}" />
374-
<SolidColorBrush x:Key="CheckBoxCheckGlyphForeground" Color="{StaticResource TextOnAccentFillColorPrimary}" />
375-
<SolidColorBrush x:Key="CheckBoxCheckGlyphForegroundPressed" Color="{StaticResource TextOnAccentFillColorSecondary}" />
376-
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillChecked" Color="{StaticResource SystemAccentColorLight2}" />
377-
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillCheckedPointerOver" Color="{StaticResource SystemAccentColorLight2}" Opacity="0.9" />
378-
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillCheckedPressed" Color="{StaticResource SystemAccentColorLight2}" Opacity="0.8" />
364+
<SolidColorBrush x:Key="CheckBoxForegroundUnchecked" Color="{StaticResource TextFillColorPrimary}" />
365+
<SolidColorBrush x:Key="CheckBoxForegroundUncheckedDisabled" Color="{StaticResource TextFillColorDisabled}" />
366+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillUnchecked" Color="{StaticResource ControlAltFillColorSecondary}" />
379367
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillUncheckedPointerOver" Color="{StaticResource ControlAltFillColorTertiary}" />
380368
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillUncheckedPressed" Color="{StaticResource ControlAltFillColorQuarternary}" />
381-
<SolidColorBrush x:Key="CheckBoxCheckBorderBrushUncheckedPressed" Color="{StaticResource SubtleFillColorTransparent}" />
382369
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillUncheckedDisabled" Color="{StaticResource ControlAltFillColorDisabled}" />
370+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillIndeterminate" Color="{StaticResource SystemAccentColorLight2}" />
371+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillIndeterminatePointerOver" Color="{StaticResource SystemAccentColorLight2}" Opacity="0.9" />
372+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillIndeterminatePressed" Color="{StaticResource SystemAccentColorLight2}" Opacity="0.8" />
373+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillChecked" Color="{StaticResource SystemAccentColorLight2}" />
374+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillCheckedPointerOver" Color="{StaticResource SystemAccentColorLight2}" Opacity="0.9" />
375+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillCheckedPressed" Color="{StaticResource SystemAccentColorLight2}" Opacity="0.8" />
376+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeUnchecked" Color="{StaticResource ControlStrongStrokeColorDefault}" />
377+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeUncheckedPointerOver" Color="{StaticResource ControlStrongStrokeColorDefault}" />
378+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeUncheckedPressed" Color="{StaticResource ControlStrongStrokeColorDisabled}" />
383379
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeUncheckedDisabled" Color="{StaticResource ControlStrongStrokeColorDisabled}" />
384-
<SolidColorBrush x:Key="CheckBoxForegroundUncheckedDisabled" Color="{StaticResource TextFillColorDisabled}" />
380+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeIndeterminate" Color="{StaticResource SystemAccentColorLight2}" />
381+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeIndeterminatePointerOver" Color="{StaticResource SystemAccentColorLight2}" Opacity="0.9" />
382+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeIndeterminatePressed" Color="{StaticResource SystemAccentColorLight2}" Opacity="0.8" />
383+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeChecked" Color="{StaticResource SystemAccentColorLight2}" />
384+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeCheckedPointerOver" Color="{StaticResource SystemAccentColorLight2}" Opacity="0.9" />
385+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeCheckedPressed" Color="{StaticResource SystemAccentColorLight2}" Opacity="0.8" />
386+
<SolidColorBrush x:Key="CheckBoxBackgroundUnchecked" Color="{StaticResource SubtleFillColorTransparent}" />
387+
<SolidColorBrush x:Key="CheckBoxBackgroundUncheckedPointerOver" Color="{StaticResource SubtleFillColorTransparent}" />
388+
<SolidColorBrush x:Key="CheckBoxBackgroundUncheckedPressed" Color="{StaticResource SubtleFillColorTransparent}" />
389+
<SolidColorBrush x:Key="CheckBoxBackgroundIndeterminate" Color="{StaticResource SubtleFillColorTransparent}" />
390+
<SolidColorBrush x:Key="CheckBoxBackgroundIndeterminatePointerOver" Color="{StaticResource SubtleFillColorTransparent}" />
391+
<SolidColorBrush x:Key="CheckBoxBackgroundIndeterminatePressed" Color="{StaticResource SubtleFillColorTransparent}" />
392+
<SolidColorBrush x:Key="CheckBoxBackgroundChecked" Color="{StaticResource SubtleFillColorTransparent}" />
393+
<SolidColorBrush x:Key="CheckBoxBackgroundCheckedPointerOver" Color="{StaticResource SubtleFillColorTransparent}" />
394+
<SolidColorBrush x:Key="CheckBoxBackgroundCheckedPressed" Color="{StaticResource SubtleFillColorTransparent}" />
395+
<SolidColorBrush x:Key="CheckBoxBorderBrushUnchecked" Color="{StaticResource SubtleFillColorTransparent}" />
396+
<SolidColorBrush x:Key="CheckBoxBorderBrushUncheckedPointerOver" Color="{StaticResource SubtleFillColorTransparent}" />
397+
<SolidColorBrush x:Key="CheckBoxBorderBrushUncheckedPressed" Color="{StaticResource SubtleFillColorTransparent}" />
398+
<SolidColorBrush x:Key="CheckBoxBorderBrushIndeterminate" Color="{StaticResource SubtleFillColorTransparent}" />
399+
<SolidColorBrush x:Key="CheckBoxBorderBrushIndeterminatePointerOver" Color="{StaticResource SubtleFillColorTransparent}" />
400+
<SolidColorBrush x:Key="CheckBoxBorderBrushIndeterminatePressed" Color="{StaticResource SubtleFillColorTransparent}" />
401+
<SolidColorBrush x:Key="CheckBoxBorderBrushChecked" Color="{StaticResource SubtleFillColorTransparent}" />
402+
<SolidColorBrush x:Key="CheckBoxBorderBrushCheckedPointerOver" Color="{StaticResource SubtleFillColorTransparent}" />
403+
<SolidColorBrush x:Key="CheckBoxBorderBrushCheckedPressed" Color="{StaticResource SubtleFillColorTransparent}" />
404+
<SolidColorBrush x:Key="CheckBoxCheckGlyphForeground" Color="{StaticResource TextOnAccentFillColorPrimary}" />
405+
<SolidColorBrush x:Key="CheckBoxCheckGlyphForegroundPressed" Color="{StaticResource TextOnAccentFillColorSecondary}" />
406+
<SolidColorBrush x:Key="CheckBoxCheckGlyphForegroundDisabled" Color="{StaticResource TextFillColorDisabled}" />
385407

386408
<!-- ColorPicker -->
387409
<!-- TODO -->

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

Lines changed: 42 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383

8484
<SolidColorBrush x:Key="ControlSolidFillColorDefaultBrush" Color="{StaticResource SystemColorButtonFaceColor}" />
8585

86-
<SolidColorBrush x:Key="SubtleFillColorTransparentBrush" Color="Transparent" />
86+
<SolidColorBrush x:Key="SystemColorWindowColorBrush" Color="Transparent" />
8787
<SolidColorBrush x:Key="SubtleFillColorSecondaryBrush" Color="{StaticResource SystemColorButtonFaceColor}" />
8888
<SolidColorBrush x:Key="SubtleFillColorTertiaryBrush" Color="{StaticResource SystemColorButtonFaceColor}" />
8989
<SolidColorBrush x:Key="SubtleFillColorDisabledBrush" Color="{StaticResource SystemColorButtonFaceColor}" />
@@ -233,21 +233,49 @@
233233
<SolidColorBrush x:Key="CardFooterBackground" Color="{StaticResource SystemColorWindowColor}" />
234234

235235
<!-- CheckBox -->
236-
<SolidColorBrush x:Key="CheckBoxBackground" Color="{StaticResource SystemColorButtonFaceColor}" />
237-
<SolidColorBrush x:Key="CheckBoxForeground" Color="{StaticResource SystemColorButtonTextColor}" />
238-
<SolidColorBrush x:Key="CheckBoxBorderBrush" Color="{StaticResource SystemColorButtonTextColor}" />
239-
<SolidColorBrush x:Key="CheckBoxCheckBorderBrush" Color="{StaticResource SystemColorWindowColor}" />
240-
<SolidColorBrush x:Key="CheckBoxCheckGlyphForeground" Color="{StaticResource SystemColorHighlightTextColor}" />
241-
<SolidColorBrush x:Key="CheckBoxCheckGlyphForegroundPressed" Color="{StaticResource SystemColorHighlightTextColor}" />
242-
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillChecked" Color="{StaticResource SystemColorHighlightColor}" />
243-
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillCheckedPointerOver" Color="{StaticResource SystemColorButtonTextColor}" />
244-
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillCheckedPressed" Color="{StaticResource SystemColorButtonTextColor}" />
236+
<SolidColorBrush x:Key="CheckBoxForegroundUnchecked" Color="{StaticResource SystemColorButtonTextColor}" />
237+
<SolidColorBrush x:Key="CheckBoxForegroundUncheckedDisabled" Color="{StaticResource SystemColorGrayTextColor}" />
238+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillUnchecked" Color="{StaticResource SystemColorButtonFaceColor}" />
245239
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillUncheckedPointerOver" Color="{StaticResource SystemColorHighlightTextColor}" />
246-
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillUncheckedPressed" Color="{StaticResource SystemColorHighlightTextColor}" />
247-
<SolidColorBrush x:Key="CheckBoxCheckBorderBrushUncheckedPressed" Color="{StaticResource SystemColorHighlightTextColor}" />
240+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillUncheckedPressed" Color="{StaticResource SystemColorHighlightColor}" />
248241
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillUncheckedDisabled" Color="{StaticResource SystemColorWindowColor}" />
242+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillChecked" Color="{StaticResource SystemColorHighlightColor}" />
243+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillCheckedPointerOver" Color="{StaticResource SystemColorButtonTextColor}" />
244+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillCheckedPressed" Color="{StaticResource SystemColorButtonFaceColor}" />
245+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillIndeterminate" Color="{StaticResource SystemColorHighlightColor}" />
246+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillIndeterminatePointerOver" Color="{StaticResource SystemColorHighlightTextColor}" />
247+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundFillIndeterminatePressed" Color="{StaticResource SystemColorHighlightColor}" />
248+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeUnchecked" Color="{StaticResource SystemColorButtonTextColor}" />
249+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeUncheckedPointerOver" Color="{StaticResource SystemColorHighlightColor}" />
250+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeUncheckedPressed" Color="{StaticResource SystemColorHighlightColor}" />
249251
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeUncheckedDisabled" Color="{StaticResource SystemColorGrayTextColor}" />
250-
<SolidColorBrush x:Key="CheckBoxForegroundUncheckedDisabled" Color="{StaticResource SystemColorGrayTextColor}" />
252+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeChecked" Color="{StaticResource SystemColorHighlightColor}" />
253+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeCheckedPointerOver" Color="{StaticResource SystemColorButtonTextColor}" />
254+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeCheckedPressed" Color="{StaticResource SystemColorButtonFaceColor}" />
255+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeIndeterminate" Color="{StaticResource SystemColorHighlightColor}" />
256+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeIndeterminatePointerOver" Color="{StaticResource SystemColorHighlightColor}" />
257+
<SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeIndeterminatePressed" Color="{StaticResource SystemColorHighlightColor}" />
258+
<SolidColorBrush x:Key="CheckBoxBackgroundUnchecked" Color="{StaticResource SystemColorWindowColor}" />
259+
<SolidColorBrush x:Key="CheckBoxBackgroundUncheckedPointerOver" Color="{StaticResource SystemColorWindowColor}" />
260+
<SolidColorBrush x:Key="CheckBoxBackgroundUncheckedPressed" Color="{StaticResource SystemColorWindowColor}" />
261+
<SolidColorBrush x:Key="CheckBoxBackgroundIndeterminate" Color="{StaticResource SystemColorWindowColor}" />
262+
<SolidColorBrush x:Key="CheckBoxBackgroundIndeterminatePointerOver" Color="{StaticResource SystemColorWindowColor}" />
263+
<SolidColorBrush x:Key="CheckBoxBackgroundIndeterminatePressed" Color="{StaticResource SystemColorWindowColor}" />
264+
<SolidColorBrush x:Key="CheckBoxBackgroundChecked" Color="{StaticResource SystemColorWindowColor}" />
265+
<SolidColorBrush x:Key="CheckBoxBackgroundCheckedPointerOver" Color="{StaticResource SystemColorWindowColor}" />
266+
<SolidColorBrush x:Key="CheckBoxBackgroundCheckedPressed" Color="{StaticResource SystemColorWindowColor}" />
267+
<SolidColorBrush x:Key="CheckBoxBorderBrushUnchecked" Color="{StaticResource SystemColorWindowColor}" />
268+
<SolidColorBrush x:Key="CheckBoxBorderBrushUncheckedPointerOver" Color="{StaticResource SystemColorWindowColor}" />
269+
<SolidColorBrush x:Key="CheckBoxBorderBrushUncheckedPressed" Color="{StaticResource SystemColorWindowColor}" />
270+
<SolidColorBrush x:Key="CheckBoxBorderBrushIndeterminate" Color="{StaticResource SystemColorWindowColor}" />
271+
<SolidColorBrush x:Key="CheckBoxBorderBrushIndeterminatePointerOver" Color="{StaticResource SystemColorWindowColor}" />
272+
<SolidColorBrush x:Key="CheckBoxBorderBrushIndeterminatePressed" Color="{StaticResource SystemColorWindowColor}" />
273+
<SolidColorBrush x:Key="CheckBoxBorderBrushChecked" Color="{StaticResource SystemColorWindowColor}" />
274+
<SolidColorBrush x:Key="CheckBoxBorderBrushCheckedPointerOver" Color="{StaticResource SystemColorWindowColor}" />
275+
<SolidColorBrush x:Key="CheckBoxBorderBrushCheckedPressed" Color="{StaticResource SystemColorWindowColor}" />
276+
<SolidColorBrush x:Key="CheckBoxCheckGlyphForeground" Color="{StaticResource SystemColorButtonFaceColor}" />
277+
<SolidColorBrush x:Key="CheckBoxCheckGlyphForegroundPressed" Color="{StaticResource SystemColorHighlightTextColor}" />
278+
<SolidColorBrush x:Key="CheckBoxCheckGlyphForegroundDisabled" Color="{StaticResource SystemColorWindowColor}" />
251279

252280
<!-- ColorPicker -->
253281
<!-- TODO -->
@@ -608,7 +636,7 @@
608636

609637
<Color x:Key="ControlSolidFillColorDefault">#2D3236</Color>
610638

611-
<Color x:Key="SubtleFillColorTransparent">Transparent</Color>
639+
<Color x:Key="SystemColorWindowColor">Transparent</Color>
612640
<Color x:Key="SubtleFillColorSecondary">#2D3236</Color>
613641
<Color x:Key="SubtleFillColorTertiary">#2D3236</Color>
614642
<Color x:Key="SubtleFillColorDisabled">#2D3236</Color>

0 commit comments

Comments
 (0)