Updated background and border of the popup to match Fluent Design gui…

…delines. (microsoft/microsoft-ui-xaml#3130)
Kinnara · Aug 20, 2020 · 467e8de · 467e8de
1 parent f74c8c7
commit 467e8de
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/ModernWpf.Controls/NumberBox/NumberBox.xaml b/ModernWpf.Controls/NumberBox/NumberBox.xaml
@@ -39,7 +39,7 @@
             <Setter Property="Focusable" Value="False" />
             <Setter Property="Width" Value="40" />
             <Setter Property="Height" Value="32" />
-            <Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
+            <Setter Property="Background" Value="{DynamicResource NumberBoxPopupSpinButtonBackground}" />
             <Setter Property="BorderThickness" Value="{DynamicResource NumberBoxPopupSpinButtonBorderThickness}" />
             <Setter Property="FontFamily" Value="{DynamicResource SymbolThemeFontFamily}" />
             <Setter Property="ContentTemplate">
@@ -384,9 +384,9 @@
                                 IsShadowEnabled="{DynamicResource {x:Static SystemParameters.DropShadowKey}}">
                                 <Border
                                     x:Name="PopupContentRoot"
-                                    Background="{DynamicResource SystemControlBackgroundAltHighBrush}"
-                                    BorderBrush="{DynamicResource ToolTipBorderBrush}"
-                                    BorderThickness="{DynamicResource ToolTipBorderThemeThickness}"
+                                Background="{DynamicResource NumberBoxPopupBackground}"
+                                BorderBrush="{DynamicResource NumberBoxPopupBorderBrush}"
+                                BorderThickness="{DynamicResource NumberBoxPopupBorderThickness}"
                                     CornerRadius="{DynamicResource OverlayCornerRadius}">
                                     <Grid>
 

diff --git a/ModernWpf/ThemeResources/Dark.xaml b/ModernWpf/ThemeResources/Dark.xaml
@@ -896,6 +896,13 @@
 
     <!-- Resources for NumberBox -->
     <m:StaticResource x:Key="NumberBoxPopupIndicatorForeground" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+
+    <!-- The following NumberBoxPopup* theme resources resource must be defined at the app level in order to take effect. -->
+    <m:StaticResource x:Key="NumberBoxPopupBackground" ResourceKey="SystemControlTransientBackgroundBrush" />
+    <m:StaticResource x:Key="NumberBoxPopupBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
+    <Thickness x:Key="NumberBoxPopupBorderThickness">1</Thickness>
+
+    <m:StaticResource x:Key="NumberBoxPopupSpinButtonBackground" ResourceKey="SystemControlTransparentBrush" />
     <Thickness x:Key="NumberBoxPopupSpinButtonBorderThickness">0</Thickness>
 
     <!-- Resources for PersonPicture -->

diff --git a/ModernWpf/ThemeResources/HighContrast.xaml b/ModernWpf/ThemeResources/HighContrast.xaml
@@ -896,6 +896,13 @@
 
     <!-- Resources for NumberBox -->
     <m:StaticResource x:Key="NumberBoxPopupIndicatorForeground" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+
+    <!-- The following NumberBoxPopup* theme resources resource must be defined at the app level in order to take effect. -->
+    <m:StaticResource x:Key="NumberBoxPopupBackground" ResourceKey="SystemControlBackgroundBaseHighBrush" />
+    <m:StaticResource x:Key="NumberBoxPopupBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
+    <Thickness x:Key="NumberBoxPopupBorderThickness">1</Thickness>
+
+    <m:StaticResource x:Key="NumberBoxPopupSpinButtonBackground" ResourceKey="SystemControlTransparentBrush" />
     <Thickness x:Key="NumberBoxPopupSpinButtonBorderThickness">2</Thickness>
 
     <!-- Resources for PersonPicture -->

diff --git a/ModernWpf/ThemeResources/Light.xaml b/ModernWpf/ThemeResources/Light.xaml
@@ -896,6 +896,13 @@
 
     <!-- Resources for NumberBox -->
     <m:StaticResource x:Key="NumberBoxPopupIndicatorForeground" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+
+    <!-- The following NumberBoxPopup* theme resources resource must be defined at the app level in order to take effect. -->
+    <m:StaticResource x:Key="NumberBoxPopupBackground" ResourceKey="SystemControlTransientBackgroundBrush" />
+    <m:StaticResource x:Key="NumberBoxPopupBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
+    <Thickness x:Key="NumberBoxPopupBorderThickness">1</Thickness>
+
+    <m:StaticResource x:Key="NumberBoxPopupSpinButtonBackground" ResourceKey="SystemControlTransparentBrush" />
     <Thickness x:Key="NumberBoxPopupSpinButtonBorderThickness">0</Thickness>
 
     <!-- Resources for PersonPicture -->