From 4cb89b3fc26211fdf14b9539aa7d17a76ca1ae46 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Wed, 8 Apr 2020 14:46:05 +0200
Subject: [PATCH] FZ - Styling updates to GridZone and CanvasZone controls so
 they look more Fluent (#1778)

* Improved styling so it looks more Fluent and native to W10

* CanvasZone border is now using the active accent color

* Updated GridZone to a similiar Fluent styling as the CanvasZone. Added a mouseover state to the GridResizer.
---
 .../editor/FancyZonesEditor/App.xaml          |   4 +
 .../editor/FancyZonesEditor/CanvasZone.xaml   | 142 +++++++++++++-----
 .../editor/FancyZonesEditor/GridResizer.xaml  |   8 +-
 .../editor/FancyZonesEditor/GridZone.xaml     |  12 +-
 .../editor/FancyZonesEditor/GridZone.xaml.cs  |   6 +-
 5 files changed, 122 insertions(+), 50 deletions(-)

diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/App.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/App.xaml
index 2d445b51fe..8baea2aed9 100644
--- a/src/modules/fancyzones/editor/FancyZonesEditor/App.xaml
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/App.xaml
@@ -12,6 +12,10 @@
                 <!-- Accent and AppTheme setting -->
                 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
             </ResourceDictionary.MergedDictionaries>
+
+            <SolidColorBrush x:Key="CanvasZoneBackgroundBrush" Color="#BF333333"/>
+            <SolidColorBrush x:Key="GridZoneBackgroundBrush" Color="#FF1a1a1a"/>
+            
         </ResourceDictionary>
     </Application.Resources>
 </Application>
diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml
index 7ed22d9d5f..ec036867a0 100644
--- a/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml
@@ -5,51 +5,113 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:local="clr-namespace:FancyZonesEditor"
              mc:Ignorable="d" 
-            Background="LightGray"
-              Opacity="0.75"
+             Background="Transparent"
              d:DesignHeight="450" d:DesignWidth="800">
-    <Grid x:Name="Frame">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="8"/>
-            <RowDefinition Height="16"/>
-            <RowDefinition Height="24"/>
-            <RowDefinition Height="*"/>
-            <RowDefinition Height="16"/>
-            <RowDefinition Height="8"/>
-        </Grid.RowDefinitions>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="8"/>
-            <ColumnDefinition Width="16"/>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="16"/>
-            <ColumnDefinition Width="8"/>
-        </Grid.ColumnDefinitions>
-        <Thumb x:Name="NWResize" Cursor="SizeNWSE" Background="Black" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="NWResize_DragStarted"/>
-        <Thumb x:Name="NEResize" Cursor="SizeNESW" Background="Black" Grid.Row="0" Grid.Column="3" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="NEResize_DragStarted"/>
-        <Thumb x:Name="SWResize" Cursor="SizeNESW" Background="Black" Grid.Row="4" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="SWResize_DragStarted"/>
-        <Thumb x:Name="SEResize" Cursor="SizeNWSE" Background="Black" Grid.Row="4" Grid.Column="3" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="SEResize_DragStarted"/>
-        <Thumb x:Name="NResize" Cursor="SizeNS" Background="Black" Margin="1,0,1,0" Grid.Row="0" Grid.Column="2" DragDelta="UniversalDragDelta" DragStarted="NResize_DragStarted"/>
-        <Thumb x:Name="SResize" Cursor="SizeNS" Background="Black" Margin="1,0,1,0" Grid.Row="5" Grid.Column="2" DragDelta="UniversalDragDelta" DragStarted="SResize_DragStarted"/>
-        <Thumb x:Name="WResize" Cursor="SizeWE" Background="Black" Margin="0,1,0,1" Grid.Row="2" Grid.Column="0" Grid.RowSpan="2" DragDelta="UniversalDragDelta" DragStarted="WResize_DragStarted"/>
-        <Thumb x:Name="EResize" Cursor="SizeWE" Background="Black" Margin="0,1,0,1" Grid.Row="2" Grid.Column="4" Grid.RowSpan="2" DragDelta="UniversalDragDelta" DragStarted="EResize_DragStarted"/>
-        <DockPanel Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="3">
-            <Button DockPanel.Dock="Right" Padding="8,0" Click="OnClose">
-                <Image Source="images/ChromeClose.png" Height="24" Width="24" />
-            </Button>
-            <Thumb x:Name="Caption" Cursor="SizeAll" Background="DarkGray" DragDelta="UniversalDragDelta" DragStarted="Caption_DragStarted"/>
-        </DockPanel>
-        <Rectangle Fill="LightGray" Grid.Row="3" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="3"/>
-        <Canvas x:Name="Body" />
-        <Label Name="LabelID"
+
+    <UserControl.Resources>
+        <Style x:Key="CanvasZoneThumbStyle" TargetType="{x:Type Thumb}">
+            <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
+            <Setter Property="Background" Value="Transparent"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="{x:Type Thumb}">
+                        <Border x:Name="ThumbBorder" Opacity="0" BorderBrush="{Binding Source={x:Static SystemParameters.WindowGlassBrush}}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
+                            <VisualStateManager.VisualStateGroups>
+                                <VisualStateGroup x:Name="CommonStates" >
+                                    <VisualStateGroup.Transitions>
+                                        <VisualTransition GeneratedDuration="0:0:0.15">
+                                            <VisualTransition.GeneratedEasingFunction>
+                                                <ExponentialEase EasingMode="EaseInOut"/>
+                                            </VisualTransition.GeneratedEasingFunction>
+                                        </VisualTransition>
+                                    </VisualStateGroup.Transitions>
+                                    <VisualState x:Name="Normal" />
+                                    <VisualState x:Name="MouseOver">
+                                        <Storyboard>
+                                            <DoubleAnimation Storyboard.TargetName="ThumbBorder" Duration="0:0:0.15" Storyboard.TargetProperty="Opacity" To="1"/>
+                                        </Storyboard>
+                                    </VisualState>
+                                </VisualStateGroup>
+                            </VisualStateManager.VisualStateGroups>
+                        </Border>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <Style x:Key="CloseButtonStyle" TargetType="{x:Type Button}">
+            <Setter Property="BorderThickness" Value="1"/>
+            <Setter Property="HorizontalContentAlignment" Value="Center"/>
+            <Setter Property="VerticalContentAlignment" Value="Center"/>
+            <Setter Property="Padding" Value="1"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="{x:Type Button}">
+                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
+                            <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsDefaulted" Value="true">
+                                <Setter Property="BorderBrush" TargetName="border" Value="{Binding Source={x:Static SystemParameters.WindowGlassBrush}}"/>
+                            </Trigger>
+                            <Trigger Property="IsMouseOver" Value="true">
+                                <Setter Property="Opacity" TargetName="contentPresenter" Value="0.6"/>
+                            </Trigger>
+                            <Trigger Property="IsPressed" Value="true">
+                                <Setter Property="Opacity" TargetName="contentPresenter" Value="0.4"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </UserControl.Resources>
+
+    <Border BorderBrush="{Binding Source={x:Static SystemParameters.WindowGlassBrush}}" Background="{StaticResource CanvasZoneBackgroundBrush}" BorderThickness="1">
+        <Grid x:Name="Frame">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="8"/>
+                <RowDefinition Height="16"/>
+                <RowDefinition Height="*"/>
+                <RowDefinition Height="16"/>
+                <RowDefinition Height="8"/>
+            </Grid.RowDefinitions>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="8"/>
+                <ColumnDefinition Width="16"/>
+                <ColumnDefinition Width="*"/>
+                <ColumnDefinition Width="16"/>
+                <ColumnDefinition Width="8"/>
+            </Grid.ColumnDefinitions>
+
+            <Label Name="LabelID"
                Content="ID"
                Canvas.Left="10"
                Canvas.Bottom="10"
-               FontSize="80"
-               FontFamily="Segoe UI"
-               Foreground="Black"
+               FontSize="64"
+               FontFamily="Segoe UI Light"
+               Foreground="White"
                Grid.Column="2"
-               Grid.Row="3"
+               Grid.Row="2"
                VerticalContentAlignment="Center"
                HorizontalContentAlignment="Center" />
-    </Grid>
+            
+            <Thumb x:Name="Caption" Cursor="SizeAll" Background="Transparent" BorderThickness="3" Padding="4" Grid.Column="0" Grid.ColumnSpan="5" Grid.Row="0" Grid.RowSpan="5" DragDelta="UniversalDragDelta" DragStarted="Caption_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+
+            <Thumb x:Name="NResize" Cursor="SizeNS" BorderThickness="0,3,0,0" Grid.ColumnSpan="5" DragDelta="UniversalDragDelta" DragStarted="NResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="SResize" Cursor="SizeNS" BorderThickness="0,0,0,3" Grid.Row="4" Grid.ColumnSpan="5" DragDelta="UniversalDragDelta" DragStarted="SResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="WResize" Cursor="SizeWE" BorderThickness="3,0,0,0" Grid.RowSpan="5" DragDelta="UniversalDragDelta" DragStarted="WResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="EResize" Cursor="SizeWE" BorderThickness="0,0,3,0" Grid.Column="4" Grid.RowSpan="5" DragDelta="UniversalDragDelta" DragStarted="EResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+
+            <Thumb x:Name="NWResize" Cursor="SizeNWSE" BorderThickness="3,3,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="NWResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="NEResize" Cursor="SizeNESW" BorderThickness="0,3,3,0" Grid.Row="0" Grid.Column="3" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="NEResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="SWResize" Cursor="SizeNESW" BorderThickness="3,0,0,3" Grid.Row="3" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="SWResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="SEResize" Cursor="SizeNWSE" BorderThickness="0,0,3,3" Grid.Row="3" Grid.Column="3" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="SEResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+
+            <Button Content="&#xE894;" BorderThickness="0" ToolTip="Delete zone" Background="Transparent" Foreground="White" FontSize="16" Padding="4" Click="OnClose" Grid.Row="2" Grid.Column="2" FontFamily="Segoe MDL2 Assets" HorizontalAlignment="Right" VerticalAlignment="Top" Style="{DynamicResource CloseButtonStyle}"/>
+
+            <Canvas x:Name="Body" />
+
+        </Grid>
+    </Border>
 </UserControl>
diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/GridResizer.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/GridResizer.xaml
index 1c38050f6f..1ed08b38e8 100644
--- a/src/modules/fancyzones/editor/FancyZonesEditor/GridResizer.xaml
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/GridResizer.xaml
@@ -9,10 +9,16 @@
     <Thumb.Template>
         <ControlTemplate>
             <StackPanel x:Name="Body" Grid.Column="0" Width="48" Height="48">
-                <Ellipse Height="48" Width="48" Fill="#0078D7" />
+              
+                <Ellipse x:Name="BackgroundEllipse" Height="48" Width="48" Fill="{Binding Source={x:Static SystemParameters.WindowGlassBrush}}" />
                 <Rectangle Height="20" Width="2" Fill="White" Margin="5,-48,0,0"/>
                 <Rectangle Height="20" Width="2" Fill="White" Margin="-5,-48,0,0"/>
             </StackPanel>
+            <ControlTemplate.Triggers>
+                <Trigger Property="IsMouseOver" Value="true">
+                    <Setter Property="Opacity" TargetName="BackgroundEllipse" Value="0.6"/>
+                </Trigger>
+            </ControlTemplate.Triggers>
         </ControlTemplate>
     </Thumb.Template>
 </Thumb>
diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml
index 6b673e1930..a8cb63dc12 100644
--- a/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml
@@ -7,10 +7,10 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    Background="LightGray"
-    BorderBrush="DarkGray"
+    Background="{StaticResource GridZoneBackgroundBrush}"
+    BorderBrush="{Binding Source={x:Static SystemParameters.WindowGlassBrush}}"
     BorderThickness="1"
-    Opacity="0.5"
+    Opacity="0.8"
     mc:Ignorable="d">
     <Grid x:Name="Frame">
         <Canvas x:Name="Body" />
@@ -23,9 +23,9 @@
             HorizontalContentAlignment="Center"
             VerticalContentAlignment="Center"
             Content="ID"
-            FontFamily="Segoe UI"
-            FontSize="80"
-            Foreground="Black" />
+            FontFamily="Segoe UI Light"
+            FontSize="64"
+            Foreground="White" />
         <!--<TextBlock Margin="2" Text="Shift Key switches direction&#13;Ctrl  Key repeats"/>-->
     </Grid>
 </UserControl>
diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml.cs b/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml.cs
index e55a6e1129..cb37c20650 100644
--- a/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml.cs
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml.cs
@@ -45,7 +45,7 @@ namespace FancyZonesEditor
 
         private void OnSelectionChanged()
         {
-            Background = IsSelected ? Brushes.SteelBlue : Brushes.LightGray;
+            Background = IsSelected ? SystemParameters.WindowGlassBrush : App.Current.Resources["GridZoneBackgroundBrush"] as SolidColorBrush;
         }
 
         public bool IsSelected
@@ -60,7 +60,7 @@ namespace FancyZonesEditor
             OnSelectionChanged();
             _splitter = new Rectangle
             {
-                Fill = Brushes.DarkGray,
+                Fill = SystemParameters.WindowGlassBrush,
             };
             Body.Children.Add(_splitter);
 
@@ -146,7 +146,7 @@ namespace FancyZonesEditor
 
         protected override void OnMouseEnter(MouseEventArgs e)
         {
-            _splitter.Fill = Brushes.DarkGray;
+            _splitter.Fill = SystemParameters.WindowGlassBrush; // Active Accent color
             base.OnMouseEnter(e);
         }