Skip to content

Commit

Permalink
Rework dark theme TextBox and RichEditBox (#2046)
Browse files Browse the repository at this point in the history 
* Update dark mode focused state of TextBox,REB and ASB

* Update test UI
  • Loading branch information
@marcelwgn
marcelwgn authored Mar 23, 2020
1 parent 5d444b6 commit c0fb694
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 12 deletions.
5 changes: 1 addition & 4 deletions dev/AutoSuggestBox/AutoSuggestBox_themeresources.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
Expand Down Expand Up @@ -247,9 +247,6 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="RequestedTheme">
<DiscreteObjectKeyFrame KeyTime="0" Value="Light" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="QueryButton" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForeground}" />
</ObjectAnimationUsingKeyFrames>
Expand Down
3 changes: 0 additions & 3 deletions dev/CommonStyles/RichEditBox_themeresources.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,9 +95,6 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="RequestedTheme">
<DiscreteObjectKeyFrame KeyTime="0" Value="Light" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

Expand Down
6 changes: 5 additions & 1 deletion dev/CommonStyles/TestUI/CommonStylesPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
VerticalScrollMode="Disabled" HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock Text="Control samples" Style="{ThemeResource StandardGroupHeader}" HorizontalAlignment="Center"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" BorderBrush="Transparent">
<StackPanel x:Name="RootSampleControlsPanel" Orientation="Horizontal" HorizontalAlignment="Center" BorderBrush="Transparent">
<StackPanel.Resources>
<x:Double x:Key="CompareGridHeight">600</x:Double>
<Style TargetType="StackPanel" x:Key="CompactPanelStyle">
Expand Down Expand Up @@ -259,6 +259,10 @@
<Button x:Name="AppBarToggleButtonDensityTest" AutomationProperties.Name="AppBarToggleButtonDensityTest" Content="AppBarToggleButtonDensity" Click="AppBarToggleButtonDensityTest_Click" />
<Button x:Name="RichEditBoxDensityTest" AutomationProperties.Name="RichEditBoxDensityTest" Content="RichEditBoxDensity" Click="RichEditBoxDensityTest_Click" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Button Content="Set blue background" Click="BlueBackground_Click"/>
<Button Content="Set standard background" Click="StandardBackground_Click" Margin="8,0,0,0"/>
</StackPanel>
</StackPanel>
</StackPanel>
</ScrollViewer>
Expand Down
12 changes: 12 additions & 0 deletions dev/CommonStyles/TestUI/CommonStylesPage.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
using System.Linq;
using Common;
using MUXControlsTestApp.Utilities;
using Windows.UI;

namespace MUXControlsTestApp
{
Expand Down Expand Up @@ -300,5 +301,16 @@ private void AppBarToggleButtonDensityTest_Click(object sender, RoutedEventArgs

DensityTestResult.Text = simpleVerify.ToString();
}

private void BlueBackground_Click(object sender, RoutedEventArgs e)
{
RootSampleControlsPanel.Background = new SolidColorBrush(Color.FromArgb(255,0, 173, 239));
}

private void StandardBackground_Click(object sender, RoutedEventArgs e)
{
RootSampleControlsPanel.Background = new SolidColorBrush(Colors.Transparent);
}

}
}
14 changes: 10 additions & 4 deletions dev/CommonStyles/TextBox_themeresources.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<SolidColorBrush x:Key="TextBoxBorderThemeBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="TextBoxButtonBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="TextBoxButtonBorderThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="TextBoxButtonForegroundThemeBrush" Color="#99000000" />
<SolidColorBrush x:Key="TextBoxButtonForegroundThemeBrush" Color="#99FFFFFF" />
<SolidColorBrush x:Key="TextBoxButtonPointerOverBackgroundThemeBrush" Color="#FFDEDEDE" />
<SolidColorBrush x:Key="TextBoxButtonPointerOverBorderThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="TextBoxButtonPointerOverForegroundThemeBrush" Color="#FF000000" />
Expand All @@ -25,8 +25,11 @@
<SolidColorBrush x:Key="TextBoxDisabledBorderThemeBrush" Color="#66FFFFFF" />
<SolidColorBrush x:Key="TextBoxDisabledForegroundThemeBrush" Color="#FF666666" />
<SolidColorBrush x:Key="TextBoxForegroundThemeBrush" Color="#FF000000" />
<StaticResource x:Key="TextControlBackgroundFocused" ResourceKey="SystemAltHighColor" />
<StaticResource x:Key="TextControlBorderBrush" ResourceKey="SystemControlForegroundBaseMediumBrush" />
<StaticResource x:Key="TextControlBorderBrushPointerOver" ResourceKey="SystemControlHighlightBaseMediumHighBrush" />
<StaticResource x:Key="TextControlButtonForeground" ResourceKey="SystemBaseHighColor" />
<StaticResource x:Key="TextControlForegroundFocused" ResourceKey="SystemBaseHighColor" />
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="TextBoxForegroundHeaderThemeBrush" Color="{ThemeResource SystemColorButtonFaceColor}" />
Expand All @@ -46,8 +49,11 @@
<SolidColorBrush x:Key="TextBoxDisabledBorderThemeBrush" Color="{ThemeResource SystemColorGrayTextColor}" />
<SolidColorBrush x:Key="TextBoxDisabledForegroundThemeBrush" Color="{ThemeResource SystemColorButtonTextColor}" />
<SolidColorBrush x:Key="TextBoxForegroundThemeBrush" Color="{ThemeResource SystemColorButtonTextColor}" />
<StaticResource x:Key="TextControlBackgroundFocused" ResourceKey="SystemAltHighColor" />
<StaticResource x:Key="TextControlBorderBrush" ResourceKey="SystemControlForegroundBaseMediumBrush" />
<StaticResource x:Key="TextControlBorderBrushPointerOver" ResourceKey="SystemControlHighlightBaseMediumHighBrush" />
<StaticResource x:Key="TextControlButtonForeground" ResourceKey="SystemBaseHighColor" />
<StaticResource x:Key="TextControlForegroundFocused" ResourceKey="SystemBaseHighColor" />
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="TextBoxForegroundHeaderThemeBrush" Color="#FF000000" />
Expand All @@ -67,8 +73,11 @@
<SolidColorBrush x:Key="TextBoxDisabledBorderThemeBrush" Color="#26000000" />
<SolidColorBrush x:Key="TextBoxDisabledForegroundThemeBrush" Color="#FF666666" />
<SolidColorBrush x:Key="TextBoxForegroundThemeBrush" Color="#FF000000" />
<StaticResource x:Key="TextControlBackgroundFocused" ResourceKey="SystemAltHighColor" />
<StaticResource x:Key="TextControlBorderBrush" ResourceKey="SystemControlForegroundBaseMediumBrush" />
<StaticResource x:Key="TextControlBorderBrushPointerOver" ResourceKey="SystemControlHighlightBaseMediumHighBrush" />
<StaticResource x:Key="TextControlButtonForeground" ResourceKey="SystemBaseHighColor" />
<StaticResource x:Key="TextControlForegroundFocused" ResourceKey="SystemBaseHighColor" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

Expand Down Expand Up @@ -232,9 +241,6 @@
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="RequestedTheme">
<DiscreteObjectKeyFrame KeyTime="0" Value="Light" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

Expand Down

1 comment on commit c0fb694

@Kinnara
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are a few other brushes that need to be updated, otherwise the corresponding elements (placeholder text, drop down glyph) won't be visible when the control is focused in dark theme. Here's a non-exhaustive list:

  • TextControlPlaceholderForegroundFocused
  • ComboBoxFocusedDropDownBackgroundPointerOver
  • ComboBoxFocusedDropDownBackgroundPointerPressed
  • ComboBoxEditableDropDownGlyphForeground

Also I believe it's better to have:

<StaticResource x:Key="TextControlButtonForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />

instead of

<StaticResource x:Key="TextControlButtonForeground" ResourceKey="SystemBaseHighColor" />

There are several benefits. For example, if we reference a color instead of a brush, a new brush will be created every time the resource is used.

Please sign in to comment.