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

<Window x:Class="FancyZonesEditor.MainWindow"
        x:Name="MainWindow1"
        AutomationProperties.Name="{x:Static props:Resources.Fancy_Zones_Main_Editor}"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ui="http://schemas.modernwpf.com/2019"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:FancyZonesEditor"
        xmlns:Converters="clr-namespace:FancyZonesEditor.Converters"
        xmlns:props="clr-namespace:FancyZonesEditor.Properties"
        xmlns:local1="clr-namespace:FancyZonesEditor.ViewModels"
        xmlns:controls="clr-namespace:ModernWpf.Controls;assembly=ModernWpf"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d"
        Title="{x:Static props:Resources.Fancy_Zones_Editor_App_Title}"
        ui:WindowHelper.UseModernWindowStyle="True"
        ui:TitleBar.IsIconVisible="True"
        ui:TitleBar.Background="{DynamicResource TertiaryBackgroundBrush}"
        ui:TitleBar.InactiveBackground="{DynamicResource TertiaryBackgroundBrush}"
        MinWidth="360"
        WindowStartupLocation="CenterOwner"
        ContentRendered="OnContentRendered"
        Background="{DynamicResource PrimaryBackgroundBrush}"
        Closing="OnClosing"
        ResizeMode="CanResize">
    <Window.Resources>
        <Thickness x:Key="ContentDialogPadding">24,18,0,24</Thickness>
        <Thickness x:Key="ContentDialogCommandSpaceMargin">0,24,24,0</Thickness>
        <Converters:LayoutModelTypeToVisibilityConverter x:Key="LayoutModelTypeToVisibilityConverter" />
        <Converters:LayoutTypeCustomToVisibilityConverter x:Key="LayoutTypeCustomToVisibilityConverter" />
        <Converters:LayoutTypeTemplateToVisibilityConverter x:Key="LayoutTypeTemplateToVisibilityConverter" />
        <Converters:LayoutModelTypeBlankToVisibilityConverter x:Key="LayoutModelTypeBlankToVisibilityConverter" />
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />

        <ContextMenu x:Key="LayoutContextMenu" Visibility="{Binding Path=Type, Converter={StaticResource LayoutModelTypeBlankToVisibilityConverter}}">
            <MenuItem Header="{x:Static props:Resources.Edit}"
                      Click="EditLayout_Click">
                <MenuItem.Icon>
                    <ui:FontIcon Glyph="&#xE70F;" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Header="{x:Static props:Resources.Edit_zones}"
                      Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}"
                      Click="EditZones_Click">
                <MenuItem.Icon>
                    <ui:FontIcon Glyph="&#xED35;" />
                </MenuItem.Icon>
            </MenuItem>


            <MenuItem Header="{x:Static props:Resources.Duplicate}"
                      Click="DuplicateLayout_Click"
                      Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}">
                <MenuItem.Icon>
                    <ui:FontIcon Glyph="&#xE8C8;" />
                </MenuItem.Icon>
            </MenuItem>

            <MenuItem Header="{x:Static props:Resources.Create_Custom_From_Template}"
                      Click="DuplicateLayout_Click"
                      Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}">
                <MenuItem.Icon>
                    <ui:FontIcon Glyph="&#xE8C8;" />
                </MenuItem.Icon>
            </MenuItem>
            <Separator Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}" />
            <MenuItem Header="{x:Static props:Resources.Delete}"
                      Click="DeleteLayout_Click"
                      Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}">
                <MenuItem.Icon>
                    <ui:FontIcon Glyph="&#xE74D;" />
                </MenuItem.Icon>
            </MenuItem>
        </ContextMenu>
        
        <DataTemplate x:Key="MonitorItemTemplate">
            <Border x:Name="MonitorItem"
                    Width="{Binding DisplayWidth}"
                    Height="{Binding DisplayHeight}"
                    AutomationProperties.Name="{x:Static props:Resources.Monitor}"
                    AutomationProperties.HelpText="{Binding Index}">
                <Border.ToolTip>
                    <ToolTip>
                        <StackPanel>
                            <TextBlock FontWeight="SemiBold">
                                <Run Text="{x:Static props:Resources.Monitor}" />
                                <Run Text="{Binding Index}" />
                            </TextBlock>
                            <TextBlock Text="{Binding Dimensions}" />
                        </StackPanel>
                    </ToolTip>
                </Border.ToolTip>
                <StackPanel Orientation="Vertical"
                            VerticalAlignment="Center">
                    <TextBlock Name="IndexText"
                               TextTrimming="CharacterEllipsis"
                               Text="{Binding Index}"
                               FontSize="26"
                               Grid.Row="0"
                               FontWeight="SemiBold"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               Foreground="{Binding (TextElement.Foreground), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}}" />
                    <TextBlock Name="ResolutionText"
                               TextTrimming="CharacterEllipsis"
                               Text="{Binding Dimensions}"
                               Grid.Row="0"
                               Margin="0,0,0,0"
                               FontSize="11"
                               FontWeight="SemiBold"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               Foreground="{Binding (TextElement.Foreground), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}}" />
                    <TextBlock Name="ScalingText"
                               TextTrimming="CharacterEllipsis"
                               Text="{Binding Scaling}"
                               Margin="0,0,0,0"
                               FontSize="8"
                               HorizontalAlignment="Center"
                               Foreground="{Binding (TextElement.Foreground), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}}" />
                </StackPanel>
            </Border>

        </DataTemplate>

        <DataTemplate x:Key="LayoutItemTemplate">
            <Grid Background="Transparent">
                <Grid Width="180"
                      Height="140"
                      Margin="16,12,16,16">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="24" />
                        <RowDefinition Height="124" />
                        <RowDefinition Height="0" />
                    </Grid.RowDefinitions>
                    <TextBlock Name="layoutName"
                               TextTrimming="CharacterEllipsis"
                               Text="{Binding Name}"
                               FontSize="15"
                               FontWeight="SemiBold"
                               Margin="0,0,24,0"
                               ToolTip="{Binding Name}"
                               Foreground="{Binding (TextElement.Foreground), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}}" />
                    <local:LayoutPreview Grid.Row="1"
                                         Margin="0,8,0,8"
                                         VerticalAlignment="Stretch"
                                         HorizontalAlignment="Stretch" />
                </Grid>
                <Button x:Name="EditLayoutButton"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Top"
                        Margin="4"
                        Height="36"
                        Width="36"
                        Padding="0"
                        Grid.RowSpan="4"
                        BorderBrush="Transparent"
                        Click="EditLayout_Click"
                        Background="Transparent"
                        Visibility="{Binding Path=Type, Converter={StaticResource LayoutModelTypeBlankToVisibilityConverter}}"
                        Foreground="{Binding (TextElement.Foreground), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}}"
                        ToolTip="{x:Static props:Resources.Edit}"
                        AutomationProperties.HelpText="{x:Static props:Resources.Edit}"
                        AutomationProperties.Name="{Binding Name}"
                        Style="{StaticResource AccentButtonStyle}"
                        ui:ControlHelper.CornerRadius="36">
                    <Button.Content>
                        <TextBlock Text="&#xE70F;" 
                                       FontFamily="Segoe MDL2 Assets"
                                        FontSize="14"
                                       AutomationProperties.Name="{x:Static props:Resources.Edit}" />
                    </Button.Content>
                </Button>
            </Grid>
        </DataTemplate>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid Grid.Row="1"
              Background="{DynamicResource PrimaryBackgroundBrush}">
            <ScrollViewer>
                <Grid Margin="16,16,16,32">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    
                    <TextBlock Text="{x:Static props:Resources.Templates}"
                               x:Name="TemplatesHeaderBlock"
                               FontWeight="SemiBold"
                               FontSize="24" />

                    <ui:GridView ItemsSource="{Binding DefaultModels}"
                                 Grid.Row="1"
                                 ItemTemplate="{StaticResource LayoutItemTemplate}"
                                 AutomationProperties.LabeledBy="{Binding ElementName=TemplatesHeaderBlock}"
                                 TabIndex="1"
                                 IsItemClickEnabled="True"
                                 SelectionMode="Single"
                                 IsSelectionEnabled="True"
                                 ItemClick="Layout_ItemClick"
                                 MouseDoubleClick="LayoutItem_MouseDoubleClick"
                                 Margin="-8,8,-8,0">
                        <ui:GridView.ItemContainerStyle>
                            <Style BasedOn="{StaticResource LayoutItemContainerStyle}"
                                   TargetType="ui:GridViewItem">
                                <Setter Property="ContextMenu"
                                        Value="{StaticResource LayoutContextMenu}">
                                </Setter>
                            </Style>
                        </ui:GridView.ItemContainerStyle>
                    </ui:GridView>

                    <TextBlock Text="{x:Static props:Resources.Custom}"
                               x:Name="CustomHeaderBlock"
                               FontWeight="SemiBold"
                               Grid.Row="2"
                               Margin="0,16,0,0"
                               FontSize="24" />

                   
                    <StackPanel Height="240"
                                Grid.Row="4"
                                Orientation="Vertical"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Opacity="0.6"
                                Margin="16,48,16,16">
                        <StackPanel.Style>
                            <Style TargetType="StackPanel">
                                <Setter Property="Visibility" Value="Collapsed" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding CustomModelsCount}" Value="0">
                                        <Setter Property="Visibility" Value="Visible" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </StackPanel.Style>
                        <controls:PathIcon
                            Foreground="{DynamicResource SecondaryForegroundBrush}"
                            Height="38"
                            Data="M45,48H25.5V45H45V25.5H25.5v-3H45V3H25.5V0H48V48ZM22.5,48H3V45H22.5V3H3V0H25.5V48ZM0,48V0H3V48Z" />
                        <TextBlock Text="{x:Static props:Resources.No_Custom_Layouts_Message}" Margin="0,16,0,0" Foreground="{DynamicResource SecondaryForegroundBrush}" />
                    </StackPanel>
                    <ui:GridView ItemsSource="{Binding CustomModels}"
                                 TabIndex="2"
                                 ItemTemplate="{StaticResource LayoutItemTemplate}"
                                 IsSelectionEnabled="True"
                                 SelectionMode="Single"
                                 IsItemClickEnabled="True"
                                 ItemClick="Layout_ItemClick"
                                 MouseDoubleClick="LayoutItem_MouseDoubleClick"
                                 AutomationProperties.LabeledBy="{Binding ElementName=CustomHeaderBlock}"
                                 Margin="-8,8,-8,0"
                                 Grid.Row="4">
                        <ui:GridView.ItemContainerStyle>
                            <Style BasedOn="{StaticResource LayoutItemContainerStyle}"
                                   TargetType="ui:GridViewItem">
                                <Setter Property="ContextMenu"
                                        Value="{StaticResource LayoutContextMenu}">
                                </Setter>
                            </Style>
                        </ui:GridView.ItemContainerStyle>
                    </ui:GridView>


                </Grid>
            </ScrollViewer>

            <Button x:Name="NewLayoutButton"
                    Click="NewLayoutButton_Click"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Bottom"
                    AutomationProperties.Name="{x:Static props:Resources.Create_new_layout}"
                    TabIndex="3"
                    Padding="0"
                    Height="36"
                    Margin="16"
                    Style="{StaticResource AccentButtonStyle}"
                    Grid.Row="3">
                <StackPanel Orientation="Horizontal"
                            Margin="8">
                    <TextBlock Text="&#xE710;"
                               AutomationProperties.Name="{x:Static props:Resources.Create_new_layout}"
                               FontFamily="Segoe MDL2 Assets"
                               Foreground="{DynamicResource AccentButtonForeground}" />
                    <TextBlock Text="{x:Static props:Resources.Create_new_layout}"
                               Margin="12,-3,0,0"
                               Foreground="{DynamicResource AccentButtonForeground}" />
                </StackPanel>
                <Button.Effect>
                    <DropShadowEffect BlurRadius="6"
                                      Opacity="0.32"
                                      ShadowDepth="1" />
                </Button.Effect>
            </Button>
        </Grid>

        <Grid Background="{DynamicResource TertiaryBackgroundBrush}">
            <Grid.Effect>
                <DropShadowEffect BlurRadius="6"
                                  Opacity="0.32"
                                  ShadowDepth="1" />
            </Grid.Effect>
            <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Disabled"
                          ScrollViewer.HorizontalScrollBarVisibility="Auto"
                          ScrollViewer.CanContentScroll="True"
                          ScrollViewer.PanningMode="HorizontalOnly"
                          Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UIElement}}"
                          PreviewMouseWheel="ScrollViewer_PreviewMouseWheel">
                <ScrollViewer.DataContext>
                    <local1:MonitorViewModel x:Name="monitorViewModel" />
                </ScrollViewer.DataContext>
                <Grid>
                    <ui:GridView TabIndex="0"
                                 HorizontalAlignment="Center"
                                 IsSelectionEnabled="True"
                                 SelectionMode="Single"
                                 IsItemClickEnabled="True"
                                 ItemClick="Monitor_ItemClick"
                                 ItemContainerStyle="{StaticResource MonitorItemContainerStyle}"
                                 ItemTemplate="{StaticResource MonitorItemTemplate}"
                                 ItemsSource="{Binding MonitorInfoForViewModel}" />
                </Grid>
            </ScrollViewer>
            <Button Click="SettingsBtn_Click"
                    x:Name="settingsBtn"
                    Margin="8"
                    Foreground="{DynamicResource SystemControlBackgroundAccentBrush}"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Bottom"
                    AutomationProperties.Name="{x:Static props:Resources.OpenSettings}"
                    ToolTip="{x:Static props:Resources.OpenSettings}"
                    Style="{StaticResource IconOnlyButtonStyle}">
                <Button.Content>
                    <TextBlock Text="&#xe713;"
                               FontFamily="Segoe MDL2 Assets"
                               AutomationProperties.Name="{x:Static props:Resources.OpenSettings}" />
                </Button.Content>
            </Button>
        </Grid>

        <ui:ContentDialog x:Name="EditLayoutDialog"
                          Background="{DynamicResource PrimaryBackgroundBrush}"
                          PrimaryButtonStyle="{StaticResource AccentButtonStyle}"
                          SecondaryButtonText="{x:Static props:Resources.Cancel}"
                          PrimaryButtonText="{x:Static props:Resources.Save}"
                          PrimaryButtonClick="EditLayoutDialog_PrimaryButtonClick"
                          SecondaryButtonClick="EditLayoutDialog_SecondaryButtonClick"
                          ScrollViewer.VerticalScrollBarVisibility="Auto"
                          MaxWidth="320"
                          Opened="Dialog_Opened"
                          Closed="Dialog_Closed">
            <ui:ContentDialog.Title>
                <TextBlock x:Name="EditLayoutDialogTitle" MaxWidth="320" Margin="0,0,96,0" Loaded="EditLayoutDialogTitle_Loaded"/>
            </ui:ContentDialog.Title>
            <Grid DataContext="{Binding SelectedModel}"
                 Margin="4,4,24,32">

                <StackPanel Margin="0,-37,0,0"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Top"
                            Orientation="Horizontal">
                    <Button Click="DuplicateLayout_Click"
                            x:Name="duplicateLayoutButton"
                            AutomationProperties.Name="{x:Static props:Resources.Duplicate}"
                            ToolTip="{x:Static props:Resources.Duplicate}"
                            Style="{StaticResource IconOnlyButtonStyle}"

                            Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}">
                        <Button.Content>
                            <TextBlock Text="&#xE8C8;" 
                                       FontFamily="Segoe MDL2 Assets"
                                       AutomationProperties.Name="{x:Static props:Resources.Duplicate}" />
                        </Button.Content>
                    </Button>
                    <!--Used by narrator for announcements-->
                    <TextBlock x:Name="LayoutCreationAnnounce" />
                    <Button Click="DuplicateLayout_Click"
                            x:Name="createFromTemplateLayoutButton"
                            AutomationProperties.Name="{x:Static props:Resources.Create_Custom_From_Template}"
                            ToolTip="{x:Static props:Resources.Create_Custom_From_Template}"
                            Style="{StaticResource IconOnlyButtonStyle}"
                            Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}">
                        <Button.Content>
                            <TextBlock Text="&#xE8C8;" 
                                       FontFamily="Segoe MDL2 Assets"
                                       AutomationProperties.Name="{x:Static props:Resources.Create_Custom_From_Template}" />
                        </Button.Content>
                    </Button>

                        <Button Click="DeleteLayout_Click"
                            x:Name="deleteLayoutButton"
                            AutomationProperties.Name="{x:Static props:Resources.Delete}"
                            ToolTip="{x:Static props:Resources.Delete}"   
                            Style="{StaticResource IconOnlyButtonStyle}"
                            Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}">
                        <Button.Content>
                            <TextBlock Text="&#xE74D;" 
                                       FontFamily="Segoe MDL2 Assets"
                                       Foreground="#c50500"
                                       AutomationProperties.Name="{x:Static props:Resources.Delete}" />
                        </Button.Content>
                    </Button>
                </StackPanel>

                <StackPanel>
                    <StackPanel Orientation="Horizontal"
                                Margin="0,24,0,0"
                                HorizontalAlignment="Stretch"
                                Visibility="{Binding IsCustom, Converter={StaticResource BooleanToVisibilityConverter}}">

                        <TextBlock FontFamily="Segoe MDL2 Assets"
                                   ToolTip="{x:Static props:Resources.Name}"
                                   FontSize="16"
                                   VerticalAlignment="Bottom" Margin="0,0,0,8"
                                   AutomationProperties.Name="{x:Static props:Resources.Name}"
                                   Text="&#xE932;" />
                        <TextBox Text="{Binding Name}"
                                 ui:ControlHelper.PlaceholderText="{x:Static props:Resources.Name}"
                                 AutomationProperties.Name="{x:Static props:Resources.Name}"
                                 Margin="12,0,0,0"
                                 ui:ControlHelper.Header="{x:Static props:Resources.Name}"
                                 MinWidth="286"
                                 MaxWidth="286"
                                 HorizontalAlignment="Stretch"
                                 GotKeyboardFocus="TextBox_GotKeyboardFocus" />

              
                    </StackPanel>

                    <!-- Shortcut panel -->
                    <StackPanel Orientation="Vertical"
                                Visibility="{Binding IsCustom, Converter={StaticResource BooleanToVisibilityConverter}}"
                                Margin="0,12,0,36">

                        <StackPanel Margin="28,0,0,4"
                                    Orientation="Horizontal">
                            <TextBlock x:Name="QuickKeyTitle"
                                       Text="{x:Static props:Resources.QuickKey_Title}" />
                            <TextBlock FontFamily="Segoe MDL2 Assets"
                                       Margin="8,4,0,0"
                                       Foreground="{DynamicResource SystemControlBackgroundAccentBrush}"
                                       Text="&#xE946;"
                                       AutomationProperties.Name="{x:Static props:Resources.QuickKey_Description}"
                                       ToolTip="{x:Static props:Resources.QuickKey_Description}" />
                        </StackPanel>


                        <StackPanel Orientation="Horizontal">

                            <TextBlock FontFamily="Segoe MDL2 Assets"
                                       VerticalAlignment="Center"
                                       FontSize="16"
                                       ToolTip="{x:Static props:Resources.QuickKey_Title}"
                                       AutomationProperties.Name="{x:Static props:Resources.QuickKey_Title}"
                                       Text="&#xEDA7;" />

                            <ComboBox x:Name="quickKeySelectionComboBox"
                                      Margin="12,0,0,0"
                                      Width="286"
                                      AutomationProperties.LabeledBy="{Binding ElementName=QuickKeyTitle}"
                                      AutomationProperties.HelpText="{x:Static props:Resources.QuickKey_Description}"
                                      AutomationProperties.Name="{x:Static props:Resources.QuickKey_Title}"
                                      ItemsSource="{Binding QuickKeysAvailable}"
                                      KeyDown="ComboBox_KeyDown"
                                      SelectedItem="{Binding QuickKey}" />
                        </StackPanel>

                    </StackPanel>

                    <Grid  Width="218"
                           Height="124"
                           HorizontalAlignment="Left"
                           Margin="24,12,0,24">
                        <local:LayoutPreview />

                        <Button Content="&#xE70F;"
                                x:Name="editZoneLayoutButton"
                                FontFamily="Segoe MDL2 Assets"
                                FontSize="14"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Height="36"
                                Width="36"
                                Padding="0"
                                BorderBrush="Transparent"
                                Click="EditZones_Click"
                                Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}"
                                ToolTip="{x:Static props:Resources.Edit_zones}"
                                AutomationProperties.Name="{x:Static props:Resources.Edit_zones}"
                                Style="{StaticResource AccentButtonStyle}"
                                ui:ControlHelper.CornerRadius="36">
                        </Button>

                    </Grid>


                    <StackPanel Orientation="Horizontal"
                                HorizontalAlignment="Left"
                                Margin="0,16,0,0"
                                Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}">

                        <TextBlock FontFamily="Segoe MDL2 Assets"
                                   VerticalAlignment="Center"
                                   FontSize="16"
                                   Margin="0,16,0,0"
                                   AutomationProperties.Name="{x:Static props:Resources.Number_of_zones}"
                                   ToolTip="{x:Static props:Resources.Number_of_zones}"
                                   Text="&#xECA5;" />

                        <ui:NumberBox Minimum="1"
                                      Maximum="128"
                                      Width="216"
                                      KeyDown="EditDialogNumberBox_KeyDown"
                                      Margin="12,0,0,0"
                                      Header="{x:Static props:Resources.Number_of_zones}"
                                      Loaded="NumberBox_Loaded"
                                      AutomationProperties.Name="{x:Static props:Resources.Number_of_zones}"
                                      SpinButtonPlacementMode="Compact"
                                      Text="{Binding TemplateZoneCount}" />
                    </StackPanel>

                    <StackPanel Margin="0, 12, 0, 0"
                                Visibility="{Binding Converter={StaticResource LayoutModelTypeToVisibilityConverter}}">
                        <TextBlock Text="{x:Static props:Resources.Space_Around_Zones}"
                                   x:Name="spacingTitle"
                                   Margin="28,0,0,4"
                                   TextWrapping="Wrap" />
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets"
                                       VerticalAlignment="Center"
                                       FontSize="16"
                                       AutomationProperties.Name="{x:Static props:Resources.Space_Around_Zones}"
                                       ToolTip="{x:Static props:Resources.Space_Around_Zones}"
                                       Text="&#xE91B;" />

                            <ui:NumberBox Margin="12,0,0,0"
                                          IsEnabled="{Binding ShowSpacing}"
                                          Text="{Binding Spacing}"
                                          Width="216"
                                          Minimum="-20"
                                          Maximum="1000"
                                          KeyDown="EditDialogNumberBox_KeyDown"
                                          SpinButtonPlacementMode="Compact"
                                          HorizontalAlignment="Left"
                                          VerticalAlignment="Center"
                                          Loaded="NumberBox_Loaded"
                                          AutomationProperties.Name="{x:Static props:Resources.Space_Around_Zones}"
                                          AutomationProperties.LabeledBy="{Binding ElementName=spacingTitle}" />
                            <TextBlock Text="{x:Static props:Resources.Pixels}"
                                       Margin="6,-4,0,0"
                                       FontSize="12"
                                       Foreground="{DynamicResource SecondaryForegroundBrush}"
                                       TextWrapping="Wrap"
                                       VerticalAlignment="Center" />

                            <ui:ToggleSwitch x:Name="spaceAroundSetting"
                                             IsOn="{Binding ShowSpacing}"
                                             Margin="12,0,0,0"
                                             OffContent=""
                                             OnContent=""
                                             ui:FocusVisualHelper.FocusVisualMargin="-3,-3,8,-3"
                                             VerticalAlignment="Center"
                                             AutomationProperties.Name="{x:Static props:Resources.Show_Space_Zones}">
                                <ui:ToggleSwitch.Resources>
                                    <sys:Double x:Key="ToggleSwitchThemeMinWidth">0</sys:Double>
                                </ui:ToggleSwitch.Resources>
                            </ui:ToggleSwitch>
                               
                        </StackPanel>
                    </StackPanel>




                    <StackPanel Margin="0, 12, 0, 0">
                        <TextBlock Text="{x:Static props:Resources.Distance_adjacent_zones}"
                                   x:Name="distanceTitle"
                                   Margin="28,0,0,4"
                                   TextWrapping="Wrap" />
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets"
                                       VerticalAlignment="Center"
                                       FontSize="16"
                                       ToolTip="{x:Static props:Resources.Distance_adjacent_zones}"
                                        AutomationProperties.Name="{x:Static props:Resources.Distance_adjacent_zones}"
                                       Text="&#xE78A;" />

                            <ui:NumberBox Text="{Binding SensitivityRadius}"
                                          Width="216"
                                          Minimum="0"
                                          Maximum="1000"
                                          KeyDown="EditDialogNumberBox_KeyDown"
                                          Margin="12,0,0,0"
                                          Loaded="NumberBox_Loaded"
                                          AutomationProperties.Name="{x:Static props:Resources.Distance_adjacent_zones}"
                                          AutomationProperties.LabeledBy="{Binding ElementName=distanceTitle}"
                                          SpinButtonPlacementMode="Compact"
                                          HorizontalAlignment="Left" />
                            <TextBlock Text="{x:Static props:Resources.Pixels}"
                                       Margin="6,-4,0,0"
                                       FontSize="12"
                                       Foreground="{DynamicResource SecondaryForegroundBrush}"
                                       TextWrapping="Wrap"
                                       VerticalAlignment="Center" />
                        </StackPanel>
                    </StackPanel>
                </StackPanel>
            </Grid>
        </ui:ContentDialog>
        
        <ui:ContentDialog x:Name="NewLayoutDialog"
                          Background="{DynamicResource PrimaryBackgroundBrush}"
                          PrimaryButtonStyle="{StaticResource AccentButtonStyle}"
                          SecondaryButtonText="{x:Static props:Resources.Cancel}"
                          PrimaryButtonText="{x:Static props:Resources.Create}"
                          PrimaryButtonClick="NewLayoutDialog_PrimaryButtonClick"
                          IsPrimaryButtonEnabled="{Binding ElementName=LayoutNameText, Path=Text.Length}"
                          Title="{x:Static props:Resources.Choose_layout_type}"
                          Opened="Dialog_Opened"
                          Closed="Dialog_Closed">
            <StackPanel Margin="0,16,0,0">
                <TextBlock x:Name="NameHeaderText"
                           Text="{x:Static props:Resources.Name}" />
                <TextBox Margin="3,6,3,0"
                         x:Name="LayoutNameText"
                         AutomationProperties.LabeledBy="{Binding ElementName=NameHeaderText}" />
                <RadioButton x:Name="GridLayoutRadioButton"
                             GroupName="LayoutTypeGroup"
                             AutomationProperties.Name="{x:Static props:Resources.Layout_Grid_Title}"
                             AutomationProperties.HelpText="{x:Static props:Resources.Layout_Grid_Description}"
                             IsChecked="True"
                             Margin="0,24,0,0"
                             Style="{StaticResource LayoutTypeRadioButtonStyle}">
                    <RadioButton.Content>
                        <Grid Width="420"
                              Margin="4">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="32" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="&#xF0E2;"
                                       FontSize="16"
                                       Foreground="{DynamicResource SystemControlBackgroundAccentBrush}"
                                       Margin="0,4,0,0"
                                       AutomationProperties.Name="{x:Static props:Resources.Layout_Grid_Title}"
                                       HorizontalAlignment="Left"
                                       FontFamily="Segoe MDL2 Assets" />
                            <StackPanel Grid.Column="1"
                                        Orientation="Vertical">
                                <TextBlock TextWrapping="Wrap"
                                           FontWeight="Bold"
                                           Margin="0,3,0,0"
                                           Text="{x:Static props:Resources.Layout_Grid_Title}" />
                                <TextBlock TextWrapping="Wrap"
                                           Margin="0,4,0,0"
                                           Text="{x:Static props:Resources.Layout_Grid_Description}"
                                           Foreground="{DynamicResource SecondaryForegroundBrush}" />
                            </StackPanel>
                        </Grid>
                    </RadioButton.Content>
                </RadioButton>

                <RadioButton x:Name="CanvasLayoutRadioButton"
                             GroupName="LayoutTypeGroup"
                             IsChecked="True"
                             AutomationProperties.Name="{x:Static props:Resources.Layout_Canvas_Title}"
                             AutomationProperties.HelpText="{x:Static props:Resources.Layout_Canvas_Description}"
                             Style="{StaticResource LayoutTypeRadioButtonStyle}"
                             Margin="0,0,0,64">
                    <RadioButton.Content>
                        <Grid Width="420"
                              Margin="4">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="32" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="&#xF5ED;"
                                       FontSize="16"
                                       Foreground="{DynamicResource SystemControlBackgroundAccentBrush}"
                                       AutomationProperties.Name="{x:Static props:Resources.Layout_Canvas_Title}"
                                       Margin="0,4,0,0"
                                       HorizontalAlignment="Left"
                                       FontFamily="Segoe MDL2 Assets" />
                            <StackPanel Grid.Column="1"
                                        Orientation="Vertical">
                                <TextBlock TextWrapping="Wrap"
                                           FontWeight="Bold"
                                           Margin="0,3,0,0"
                                           Text="{x:Static props:Resources.Layout_Canvas_Title}" />
                                <TextBlock TextWrapping="Wrap"
                                           Margin="0,4,0,0"
                                           Text="{x:Static props:Resources.Layout_Canvas_Description}"
                                           Foreground="{DynamicResource SecondaryForegroundBrush}" />
                            </StackPanel>
                        </Grid>
                    </RadioButton.Content>
                </RadioButton>
            </StackPanel>
        </ui:ContentDialog>
    </Grid>
</Window>