Correct Default Application Selector styles for high contrast and to change with OS theme dark/light toggle (#10185)

Correct Default Application Selector styles for high contrast and to change with OS theme dark/light toggle

## References
- https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/xaml-theme-resources

## PR Checklist
* [x] Closes #10181
* [x] I work here
* [x] Manual tests passed

## Detailed Description of the Pull Request / Additional comments
1. If I'm going to override colors, I need to define styles in a resource dictionary with Light, Dark, and HighContrast variants so it can be appropriate for each of those.
2. For HighContrast, I need to not mess with text colors and let them follow the default settings.
3. For using System Brushes, I need to use a `ThemeResource` binding not a `StaticResource` binding. The former lets it change when you flip the OS toggle Light/Dark. The latter is stuck to whatever it was when the page loaded.

## Validation Steps Performed
- Loaded in light mode. Flipped to dark. Watched it change live. Checked both unselected and rollover/selected to ensure it was fine.
- Loaded in dark mode. Flipped to light. Watched it change live. Checked both unselected and rollover/selected to ensure it was fine.
- Flipped to HC. Watched it change live. Confirmed that unselected is black/white contrast and the roll over has the cyan/black. (No longer uses special second-line brush for HC, matches the controls I modeled this one on from OS Settings).

(cherry picked from commit 43d5713a02)
This commit is contained in:
Michael Niksa 2021-05-25 22:39:26 -07:00 committed by Dustin Howett
parent 227ec3777a
commit d9c93430a0
No known key found for this signature in database
GPG key ID: 0719BB71B334EE77
2 changed files with 22 additions and 2 deletions

View file

@ -11,6 +11,26 @@
<ResourceDictionary Source="SettingContainerStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<Style x:Key="SecondaryTextBlockStyle"
TargetType="TextBlock">
<Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
</Style>
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<Style x:Key="SecondaryTextBlockStyle"
TargetType="TextBlock">
<Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
</Style>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<Style x:Key="SecondaryTextBlockStyle"
TargetType="TextBlock" />
<!-- Do not mess with the foreground color for High Contrast. Let it ride as is. -->
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<x:Double x:Key="StandardIconSize">14.0</x:Double>
<Thickness x:Key="StandardIndentMargin">13,0,0,0</Thickness>
<Thickness x:Key="StandardControlMargin">0,24,0,0</Thickness>

View file

@ -114,12 +114,12 @@
<TextBlock Grid.Row="1"
Grid.Column="1"
Foreground="{StaticResource SystemBaseMediumColor}"
Style="{ThemeResource SecondaryTextBlockStyle}"
Text="{x:Bind Author}" />
<TextBlock Grid.Row="1"
Grid.Column="2"
Foreground="{StaticResource SystemBaseMediumColor}"
Style="{ThemeResource SecondaryTextBlockStyle}"
Text="{x:Bind Version}" />
</Grid>