🎨 Add drop shadow to the custom menu editor.

hexawyz · Apr 5, 2024 · d030aa1 · d030aa1
1 parent d3bdfbe
commit d030aa1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/Exo.Settings.Ui/CustomMenuPage.xaml b/Exo.Settings.Ui/CustomMenuPage.xaml
@@ -71,7 +71,7 @@
             CanReorderItems="True" />
         <TextBox
             Grid.Row="3"
-            Margin="0,6,0,6"
+            Margin="0,18,0,6"
             Visibility="{Binding SelectedMenuItemHasText, Converter={StaticResource BooleanToVisibilityConverter}}"
             Text="{Binding SelectedMenuItem.Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
             MaxWidth="{ThemeResource FlyoutThemeMaxWidth}" />

diff --git a/Exo.Settings.Ui/DataTemplates.xaml b/Exo.Settings.Ui/DataTemplates.xaml
@@ -4,7 +4,8 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:Exo.Settings.Ui"
-    xmlns:vm="using:Exo.Settings.Ui.ViewModels">
+    xmlns:vm="using:Exo.Settings.Ui.ViewModels"
+    xmlns:numerics="using:System.Numerics">
 
     <!-- Monitor setting UI templates -->
     <DataTemplate x:Key="MonitorBrightnessSettingTemplate" x:DataType="vm:MonitorDeviceSettingViewModel">
@@ -197,6 +198,11 @@
 
     <!-- Derived from DefaultMenuFlyoutPresenterStyle -->
     <Style x:Key="MenuPreviewStyle" TargetType="ListView">
+        <Setter Property="Shadow">
+            <Setter.Value>
+                <ThemeShadow />
+            </Setter.Value>
+        </Setter>
         <Setter Property="Background" Value="{ThemeResource MenuFlyoutPresenterBackground}" />
         <Setter Property="BorderBrush" Value="{ThemeResource MenuFlyoutPresenterBorderBrush}" />
         <Setter Property="BorderThickness" Value="{ThemeResource MenuFlyoutPresenterBorderThemeThickness}" />
@@ -222,7 +228,14 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="ListView">
-                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" BackgroundSizing="InnerBorderEdge">
+                    <Border
+                        Shadow="{TemplateBinding Shadow}"
+                        Translation="0,0,32"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        BackgroundSizing="InnerBorderEdge">
                         <ScrollViewer x:Name="MenuFlyoutPresenterScrollViewer" Margin="{TemplateBinding Padding}" MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.FlyoutContentMinWidth}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}" AutomationProperties.AccessibilityView="Raw">
                             <ItemsPresenter />
                         </ScrollViewer>