[FZ Editor] Changed edit dialog for template layouts.

src/modules/fancyzones/editor/FancyZonesEditor/Converters/LayoutTypeCustomToVisibilityConverter.cs

@@ -0,0 +1,25 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using System.Globalization;
+using System.Windows;
+using System.Windows.Data;
+using FancyZonesEditor.Models;
+
+namespace FancyZonesEditor.Converters
+{
+    public class LayoutTypeCustomToVisibilityConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return (LayoutType)value == LayoutType.Custom ? Visibility.Visible : Visibility.Collapsed;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return null;
+        }
+    }
+}

src/modules/fancyzones/editor/FancyZonesEditor/Converters/LayoutTypeTemplateToVisibilityConverter.cs

@@ -0,0 +1,25 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using System.Globalization;
+using System.Windows;
+using System.Windows.Data;
+using FancyZonesEditor.Models;
+
+namespace FancyZonesEditor.Converters
+{
+    public class LayoutTypeTemplateToVisibilityConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return (LayoutType)value != LayoutType.Custom ? Visibility.Visible : Visibility.Collapsed;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return null;
+        }
+    }
+}

src/modules/fancyzones/editor/FancyZonesEditor/MainWindow.xaml

@@ -27,6 +27,8 @@
     <Window.Resources>
 
         <Converters:LayoutModelTypeToVisibilityConverter x:Key="LayoutModelTypeToVisibilityConverter" />
+        <Converters:LayoutTypeCustomToVisibilityConverter x:Key="LayoutTypeCustomToVisibilityConverter" />
+        <Converters:LayoutTypeTemplateToVisibilityConverter x:Key="LayoutTypeTemplateToVisibilityConverter" />
 
         <DropShadowEffect x:Key="CardShadow" BlurRadius="6"
                           Opacity="0.24"
@@ -58,6 +60,28 @@
                 </Trigger>
             </Style.Triggers>
         </Style>
+
+        <Style x:Key="SpinnerButton" TargetType="Button">
+            <Setter Property="FontFamily" Value="Segoe UI" />
+            <Setter Property="FontWeight" Value="SemiBold" />
+            <Setter Property="Foreground" Value="Black"/>
+            <Setter Property="FontSize" Value="18"/>
+            <Setter Property="Padding" Value="0,0,0,5"/>
+            <Setter Property="BorderThickness" Value="0"/>
+            <Setter Property="Background" Value="#F2F2F2"/>
+            <Setter Property="Margin" Value="0,0,0,0" />
+        </Style>
+
+        <Style x:Key="ZoneCount" TargetType="TextBlock">
+            <Setter Property="FontFamily" Value="Segoe UI" />
+            <Setter Property="FontWeight" Value="Regular" />
+            <Setter Property="FontSize" Value="18"/>
+            <Setter Property="LineHeight" Value="24" />
+            <Setter Property="Margin" Value="20,0,20,0" />
+            <Setter Property="HorizontalAlignment" Value="Center"/>
+            <Setter Property="VerticalAlignment" Value="Center"/>
+        </Style>
+
         <DataTemplate x:Key="MonitorItemTemplate">
             <Border x:Name="MonitorItem"
                     Width="{Binding DisplayWidth}"
@@ -392,6 +416,8 @@
                         HorizontalAlignment="Stretch"
                         AutomationProperties.Name="{x:Static props:Resources.Edit_zones}"
                         Height="48"
+                        Margin="0,0,0,32"
+                        Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}"
                         Style="{StaticResource AccentButtonStyle}">
                     <Button.Content>
                         <StackPanel Orientation="Horizontal">
@@ -408,15 +434,28 @@
                     </Button.Effect>
                 </Button>
 
-
                 <TextBlock x:Name="nameHeader"
                            Text="{x:Static props:Resources.Name}"
                            IsEnabled="{Binding ShowSpacing}"
-                           Margin="0,32,0,0"
+                           Margin="0,0,0,0"
                            Foreground="{DynamicResource PrimaryForegroundBrush}" />
                 <TextBox Text="{Binding Name}"
                          Margin="0,6,0,0"
+                         IsEnabled="{Binding IsCustom}"
                          AutomationProperties.LabeledBy="{Binding ElementName=nameHeader}" />
+
+                <TextBlock x:Name="numberOfZonesHeader"
+                           Text="{x:Static props:Resources.NumberOfZones}"
+                           Margin="0,16,0,0"
+                           Foreground="{DynamicResource PrimaryForegroundBrush}" />
+                <StackPanel Margin="0,6,0,0" 
+                            Orientation="Horizontal" 
+                            Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}">
+                    <Button x:Name="decrementZones" Width="40" Height="40" AutomationProperties.Name="{x:Static props:Resources.Zone_Count_Decrement}" Content="-" Style="{StaticResource SpinnerButton}" Click="DecrementZones_Click"/>
+                    <TextBlock x:Name="zoneCount" Text="{Binding TemplateZoneCount}" Style="{StaticResource ZoneCount}"/>
+                    <Button x:Name="incrementZones" Width="40" Height="40" AutomationProperties.Name="{x:Static props:Resources.Zone_Count_Increment}" Content="+" Style="{StaticResource SpinnerButton}" Click="IncrementZones_Click"/>
+                </StackPanel>
+
                 <StackPanel Margin="0,16,0,0"
                             Orientation="Vertical">
                     <ui:ToggleSwitch x:Name="spaceAroundSetting"

src/modules/fancyzones/editor/FancyZonesEditor/Models/LayoutModel.cs

@@ -90,6 +90,14 @@ public string Uuid
             }
         }
 
+        public bool IsCustom
+        {
+            get
+            {
+                return Type == LayoutType.Custom;
+            }
+        }
+
         // IsSelected (not-persisted) - tracks whether or not this LayoutModel is selected in the picker
         // TODO: once we switch to a picker per monitor, we need to move this state to the view
         public bool IsSelected

src/modules/fancyzones/editor/FancyZonesEditor/Properties/Resources.resx

@@ -322,4 +322,7 @@ To merge zones, select the zones and click "merge".</value>
   <data name="Save" xml:space="preserve">
     <value>Save</value>
   </data>
+  <data name="NumberOfZones" xml:space="preserve">
+    <value>Number of zones</value>
+  </data>
 </root>