From c7b6e51eba610aade3046f5c0c851bd3b77ac69d Mon Sep 17 00:00:00 2001
From: Seraphima Zykova <zykovas91@gmail.com>
Date: Wed, 3 Feb 2021 20:15:16 +0300
Subject: [PATCH] [FZ Editor] Show zone size below the zone index (#9449)

---
 .../editor/FancyZonesEditor/CanvasZone.xaml   | 35 ++++++++++++-------
 .../FancyZonesEditor/CanvasZone.xaml.cs       |  6 ++++
 .../editor/FancyZonesEditor/GridZone.xaml     | 33 ++++++++++-------
 .../editor/FancyZonesEditor/GridZone.xaml.cs  |  6 ++++
 4 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml
index 58082fab50..1dda680e79 100644
--- a/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml
@@ -99,18 +99,29 @@
                 <ColumnDefinition Width="8"/>
             </Grid.ColumnDefinitions>
 
-            <Label Name="LabelID"
-               Content="ID"
-               Canvas.Left="10"
-               Canvas.Bottom="10"
-               FontSize="64"
-               FontWeight="SemiBold"
-               Foreground="{DynamicResource PrimaryForegroundBrush}"
-               Grid.Column="2"
-               Grid.Row="2"
-               VerticalContentAlignment="Center"
-               HorizontalContentAlignment="Center" />
-            
+            <DockPanel HorizontalAlignment="Center"
+                       VerticalAlignment="Center"
+                       Grid.Column="2"
+                       Grid.Row="2">
+                <Label
+                    Name="LabelID"
+                    DockPanel.Dock="Top"
+                    HorizontalContentAlignment="Center"
+                    VerticalContentAlignment="Center"
+                    Content="ID"
+                    FontWeight="SemiBold"
+                    FontSize="64"
+                    Foreground="{DynamicResource PrimaryForegroundBrush}" />
+                <Label
+                    Name="LabelSize"
+                    DockPanel.Dock="Bottom"
+                    HorizontalContentAlignment="Center"
+                    VerticalContentAlignment="Center"
+                    FontWeight="Thin"
+                    FontSize="32"
+                    Foreground="{DynamicResource PrimaryForegroundBrush}" />
+            </DockPanel>
+
             <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}"/>
diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml.cs b/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml.cs
index a3e0ade075..65eac6d345 100644
--- a/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml.cs
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml.cs
@@ -22,6 +22,12 @@ namespace FancyZonesEditor
         {
             InitializeComponent();
             Canvas.SetZIndex(this, zIndex++);
+            SizeChanged += CanvasZone_SizeChanged;
+        }
+
+        private void CanvasZone_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            LabelSize.Content = "(" + Width.ToString() + "x" + Height.ToString() + ")";
         }
 
         private CanvasLayoutModel model;
diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml
index 491c8e0caf..6ea6124e07 100644
--- a/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml
@@ -15,18 +15,27 @@
     mc:Ignorable="d">
     <Grid x:Name="Frame">
         <Canvas x:Name="Body" />
-        <Label
-            Name="LabelID"
-            Grid.Row="3"
-            Grid.Column="2"
-            Canvas.Left="10"
-            Canvas.Bottom="10"
-            HorizontalContentAlignment="Center"
-            VerticalContentAlignment="Center"
-            Content="ID"
-            FontWeight="SemiBold"
-            FontSize="64"
-            Foreground="{DynamicResource PrimaryForegroundBrush}" />
+        <DockPanel HorizontalAlignment="Center"
+                   VerticalAlignment="Center">
+            <Label
+                Name="LabelID"
+                DockPanel.Dock="Top"
+                HorizontalContentAlignment="Center"
+                VerticalContentAlignment="Center"
+                Content="ID"
+                FontWeight="SemiBold"
+                FontSize="64"
+                Foreground="{DynamicResource PrimaryForegroundBrush}" />
+            <Label
+                Name="LabelSize"
+                DockPanel.Dock="Bottom"
+                HorizontalContentAlignment="Center"
+                VerticalContentAlignment="Center"
+                FontWeight="Thin"
+                FontSize="32"
+                Foreground="{DynamicResource PrimaryForegroundBrush}" />
+
+        </DockPanel>
         <!--<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 24765f987c..2db4783b4c 100644
--- a/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml.cs
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml.cs
@@ -73,6 +73,12 @@ namespace FancyZonesEditor
             SplitterThickness = Math.Max(spacing, 1);
 
             ((App)Application.Current).MainWindowSettings.PropertyChanged += ZoneSettings_PropertyChanged;
+            SizeChanged += GridZone_SizeChanged;
+        }
+
+        private void GridZone_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            LabelSize.Content = "(" + Math.Round(ActualWidth).ToString() + "x" + Math.Round(ActualHeight).ToString() + ")";
         }
 
         private void ZoneSettings_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)