Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NumberBox: Updated the border and background of the spin button popup to match Fluent Design guidelines. #3130

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions dev/NumberBox/NumberBox.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -137,9 +137,9 @@
HorizontalAlignment="Left">

<Grid x:Name="PopupContentRoot"
Background="{ThemeResource SystemControlBackgroundAltHighBrush}"
BorderBrush="{ThemeResource ToolTipBorderBrush}"
BorderThickness="{ThemeResource ToolTipBorderThemeThickness}"
Background="{ThemeResource NumberBoxPopupBackground}"
BorderBrush="{ThemeResource NumberBoxPopupBorderBrush}"
BorderThickness="{ThemeResource NumberBoxPopupBorderThickness}"
CornerRadius="{ThemeResource OverlayCornerRadius}">

<Grid.RowDefinitions>
Expand Down Expand Up @@ -206,7 +206,7 @@
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="40"/>
<Setter Property="Height" Value="32"/>
<Setter Property="Background" Value="{ThemeResource TextControlBackground}"/>
<Setter Property="Background" Value="{ThemeResource NumberBoxPopupSpinButtonBackground}"/>
<Setter Property="BorderThickness" Value="{ThemeResource NumberBoxPopupSpinButtonBorderThickness}"/>
<Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}"/>
</Style.Setters>
Expand Down
28 changes: 28 additions & 0 deletions dev/NumberBox/NumberBox_themeresources.xaml
Original file line number Diff line number Diff line change
@@ -1,25 +1,53 @@
<!-- 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)"
xmlns:contract7NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,7)"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<StaticResource x:Key="NumberBoxPopupIndicatorForeground" ResourceKey="SystemControlForegroundBaseMediumBrush" />
<contract7NotPresent:StaticResource x:Key="SystemControlDescriptionTextForegroundBrush" ResourceKey="SystemControlPageTextBaseMediumBrush" />

<!-- The following NumberBoxPopup* theme resources resource must be defined at the app level in order to take effect. -->
<contract7Present:StaticResource x:Key="NumberBoxPopupBackground" ResourceKey="SystemControlTransientBackgroundBrush" />
<contract7NotPresent:StaticResource x:Key="NumberBoxPopupBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
<contract7Present:StaticResource x:Key="NumberBoxPopupBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
<contract7NotPresent:StaticResource x:Key="NumberBoxPopupBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
<Thickness x:Key="NumberBoxPopupBorderThickness">1</Thickness>

<StaticResource x:Key="NumberBoxPopupSpinButtonBackground" ResourceKey="SystemControlTransparentBrush" />
<Thickness x:Key="NumberBoxPopupSpinButtonBorderThickness">0</Thickness>
</ResourceDictionary>

<ResourceDictionary x:Key="Dark">
<StaticResource x:Key="NumberBoxPopupIndicatorForeground" ResourceKey="SystemControlForegroundBaseMediumBrush" />
<contract7NotPresent:StaticResource x:Key="SystemControlDescriptionTextForegroundBrush" ResourceKey="SystemControlPageTextBaseMediumBrush" />

<!-- The following NumberBoxPopup* theme resources resource must be defined at the app level in order to take effect. -->
<contract7Present:StaticResource x:Key="NumberBoxPopupBackground" ResourceKey="SystemControlTransientBackgroundBrush" />
<contract7NotPresent:StaticResource x:Key="NumberBoxPopupBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
<contract7Present:StaticResource x:Key="NumberBoxPopupBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
<contract7NotPresent:StaticResource x:Key="NumberBoxPopupBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
<Thickness x:Key="NumberBoxPopupBorderThickness">1</Thickness>

<StaticResource x:Key="NumberBoxPopupSpinButtonBackground" ResourceKey="SystemControlTransparentBrush" />
<Thickness x:Key="NumberBoxPopupSpinButtonBorderThickness">0</Thickness>
</ResourceDictionary>

<ResourceDictionary x:Key="HighContrast">
<StaticResource x:Key="NumberBoxPopupIndicatorForeground" ResourceKey="SystemControlForegroundBaseMediumBrush" />
<contract7NotPresent:StaticResource x:Key="SystemControlDescriptionTextForegroundBrush" ResourceKey="SystemControlPageTextBaseMediumBrush" />

<!-- The following NumberBoxPopup* theme resources resource must be defined at the app level in order to take effect. -->
<contract7Present:StaticResource x:Key="NumberBoxPopupBackground" ResourceKey="SystemControlBackgroundBaseHighBrush" />
<contract7NotPresent:StaticResource x:Key="NumberBoxPopupBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
<contract7Present:StaticResource x:Key="NumberBoxPopupBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
<contract7NotPresent:StaticResource x:Key="NumberBoxPopupBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
<Thickness x:Key="NumberBoxPopupBorderThickness">1</Thickness>

<StaticResource x:Key="NumberBoxPopupSpinButtonBackground" ResourceKey="SystemControlTransparentBrush" />
<Thickness x:Key="NumberBoxPopupSpinButtonBorderThickness">2</Thickness>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
Expand Down