<Window
    x:Class="FancyZonesEditor.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Converters="clr-namespace:FancyZonesEditor.Converters"
    xmlns:controls="clr-namespace:ModernWpf.Controls;assembly=ModernWpf"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:fancyZonesControls="clr-namespace:FancyZonesEditor.Controls"
    xmlns:local="clr-namespace:FancyZonesEditor"
    xmlns:local1="clr-namespace:FancyZonesEditor.ViewModels"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:props="clr-namespace:FancyZonesEditor.Properties"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:ui="http://schemas.modernwpf.com/2019"
    x:Name="MainWindow1"
    Title="{x:Static props:Resources.Fancy_Zones_Editor_App_Title}"
    MinWidth="360"
    ui:TitleBar.Background="{DynamicResource TertiaryBackgroundBrush}"
    ui:TitleBar.InactiveBackground="{DynamicResource TertiaryBackgroundBrush}"
    ui:TitleBar.IsIconVisible="True"
    ui:WindowHelper.UseModernWindowStyle="True"
    AutomationProperties.Name="{x:Static props:Resources.Fancy_Zones_Main_Editor}"
    Background="{DynamicResource PrimaryBackgroundBrush}"
    Closing="OnClosing"
    ContentRendered="OnContentRendered"
    ResizeMode="CanResize"
    WindowStartupLocation="CenterOwner"
    mc:Ignorable="d">
    <Window.Resources>
        <Thickness x:Key="ContentDialogPadding">24,16,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 Click="EditLayout_Click" Header="{x:Static props:Resources.Edit}">
                <MenuItem.Icon>
                    <ui:FontIcon Glyph="&#xE70F;" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem
                Click="EditZones_Click"
                Header="{x:Static props:Resources.Edit_zones}"
                Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}">
                <MenuItem.Icon>
                    <ui:FontIcon Glyph="&#xED35;" />
                </MenuItem.Icon>
            </MenuItem>


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

            <MenuItem
                Click="DuplicateLayout_Click"
                Header="{x:Static props:Resources.Create_Custom_From_Template}"
                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
                Click="DeleteLayout_Click"
                Header="{x:Static props:Resources.Delete}"
                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.HelpText="{Binding Index}"
                AutomationProperties.Name="{x:Static props:Resources.Monitor}">
                <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 VerticalAlignment="Center" Orientation="Vertical">
                    <TextBlock
                        Name="IndexText"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        FontSize="28"
                        FontWeight="SemiBold"
                        Foreground="{Binding (TextElement.Foreground), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}}"
                        Text="{Binding Index}" />
                    <TextBlock
                        Name="ResolutionText"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        FontSize="12"
                        Foreground="{Binding (TextElement.Foreground), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}}"
                        Text="{Binding Dimensions}"
                        TextTrimming="CharacterEllipsis" />
                    <TextBlock
                        Name="ScalingText"
                        HorizontalAlignment="Center"
                        FontSize="12"
                        Foreground="{Binding (TextElement.Foreground), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}}"
                        Text="{Binding Scaling}"
                        TextTrimming="CharacterEllipsis" />
                </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"
                        Margin="0,0,24,0"
                        FontSize="16"
                        FontWeight="SemiBold"
                        Foreground="{Binding (TextElement.Foreground), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}}"
                        Text="{Binding Name}"
                        TextTrimming="CharacterEllipsis"
                        ToolTip="{Binding Name}" />
                    <local:LayoutPreview
                        Grid.Row="1"
                        Margin="0,8,0,8"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch" />
                </Grid>
                <Button
                    x:Name="EditLayoutButton"
                    Grid.RowSpan="4"
                    Width="36"
                    Height="36"
                    Margin="4"
                    Padding="0"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    ui:ControlHelper.CornerRadius="36"
                    AutomationProperties.HelpText="{x:Static props:Resources.Edit}"
                    AutomationProperties.Name="{Binding Name}"
                    Background="Transparent"
                    BorderBrush="Transparent"
                    Click="EditLayout_Click"
                    Foreground="{Binding (TextElement.Foreground), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}}"
                    Style="{StaticResource AccentButtonStyle}"
                    ToolTip="{x:Static props:Resources.Edit}"
                    Visibility="{Binding Path=Type, Converter={StaticResource LayoutModelTypeBlankToVisibilityConverter}}">
                    <Button.Content>
                        <TextBlock
                            AutomationProperties.Name="{x:Static props:Resources.Edit}"
                            FontFamily="{DynamicResource SymbolThemeFontFamily}"
                            FontSize="16"
                            Text="&#xE70F;" />
                    </Button.Content>
                </Button>
            </Grid>
        </DataTemplate>

        <Style BasedOn="{StaticResource {x:Type Slider}}" TargetType="{x:Type fancyZonesControls:CustomSlider}" />
    </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>

                    <local:HeadingTextBlock
                        x:Name="TemplatesHeaderBlock"
                        AutomationProperties.HeadingLevel="Level1"
                        FontSize="24"
                        FontWeight="SemiBold"
                        Text="{x:Static props:Resources.Templates}" />

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

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


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


                </Grid>
            </ScrollViewer>

            <Button
                x:Name="NewLayoutButton"
                Grid.Row="3"
                Height="36"
                Margin="16"
                Padding="0"
                HorizontalAlignment="Right"
                VerticalAlignment="Bottom"
                AutomationProperties.Name="{x:Static props:Resources.Create_new_layout}"
                Click="NewLayoutButton_Click"
                Style="{StaticResource AccentButtonStyle}"
                TabIndex="3">
                <StackPanel Margin="8" Orientation="Horizontal">
                    <TextBlock
                        AutomationProperties.Name="{x:Static props:Resources.Create_new_layout}"
                        FontFamily="{DynamicResource SymbolThemeFontFamily}"
                        Foreground="{DynamicResource AccentButtonForeground}"
                        Text="&#xE710;" />
                    <TextBlock
                        Margin="12,-3,0,0"
                        Foreground="{DynamicResource AccentButtonForeground}"
                        Text="{x:Static props:Resources.Create_new_layout}" />
                </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
                Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UIElement}}"
                PreviewMouseWheel="ScrollViewer_PreviewMouseWheel"
                ScrollViewer.CanContentScroll="True"
                ScrollViewer.HorizontalScrollBarVisibility="Auto"
                ScrollViewer.PanningMode="HorizontalOnly"
                ScrollViewer.VerticalScrollBarVisibility="Disabled">
                <ScrollViewer.DataContext>
                    <local1:MonitorViewModel x:Name="monitorViewModel" />
                </ScrollViewer.DataContext>
                <Grid>
                    <ui:GridView
                        HorizontalAlignment="Center"
                        IsItemClickEnabled="True"
                        IsSelectionEnabled="True"
                        ItemClick="Monitor_ItemClick"
                        ItemContainerStyle="{StaticResource MonitorItemContainerStyle}"
                        ItemTemplate="{StaticResource MonitorItemTemplate}"
                        ItemsSource="{Binding MonitorInfoForViewModel}"
                        SelectionMode="Single"
                        TabIndex="0" />
                </Grid>
            </ScrollViewer>
            <!--
                // Commented because of issue https://github.com/microsoft/PowerToys/issues/19828
                // Settings would launch under the overlay for FZ Editor
                //Lots of permutations to validate, Win10/11. Settings not launched, already launched, ...

            <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="{DynamicResource SymbolThemeFontFamily}"
                               AutomationProperties.Name="{x:Static props:Resources.OpenSettings}" />
                </Button.Content>
            </Button>
            -->
        </Grid>

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

                <StackPanel
                    Margin="0,-37,0,0"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Orientation="Horizontal">
                    <Button
                        x:Name="duplicateLayoutButton"
                        AutomationProperties.Name="{x:Static props:Resources.Duplicate}"
                        Click="DuplicateLayout_Click"
                        Style="{StaticResource IconOnlyButtonStyle}"
                        ToolTip="{x:Static props:Resources.Duplicate}"
                        Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}">
                        <Button.Content>
                            <TextBlock
                                AutomationProperties.Name="{x:Static props:Resources.Duplicate}"
                                FontFamily="{DynamicResource SymbolThemeFontFamily}"
                                FontSize="16"
                                Text="&#xE8C8;" />
                        </Button.Content>
                    </Button>
                    <!--  Used by narrator for announcements  -->
                    <TextBlock x:Name="LayoutCreationAnnounce" />
                    <Button
                        x:Name="createFromTemplateLayoutButton"
                        AutomationProperties.Name="{x:Static props:Resources.Create_Custom_From_Template}"
                        Click="DuplicateLayout_Click"
                        Style="{StaticResource IconOnlyButtonStyle}"
                        ToolTip="{x:Static props:Resources.Create_Custom_From_Template}"
                        Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}">
                        <Button.Content>
                            <TextBlock
                                AutomationProperties.Name="{x:Static props:Resources.Create_Custom_From_Template}"
                                FontFamily="{DynamicResource SymbolThemeFontFamily}"
                                FontSize="16"
                                Text="&#xE8C8;" />
                        </Button.Content>
                    </Button>

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

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

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


                    </StackPanel>

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

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


                        <StackPanel Orientation="Horizontal">

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

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

                    </StackPanel>

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

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

                    </Grid>


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

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

                        <StackPanel Orientation="Vertical">
                            <TextBlock
                                x:Name="templateZoneCountTitle"
                                Margin="12,0,0,4"
                                Text="{x:Static props:Resources.Number_of_zones}"
                                TextWrapping="Wrap" />

                            <StackPanel Orientation="Horizontal">
                                <fancyZonesControls:CustomSlider
                                    x:Name="TemplateZoneCount"
                                    MinWidth="216"
                                    Margin="12,0,0,0"
                                    HorizontalAlignment="Left"
                                    AutomationProperties.HelpText="{x:Static props:Resources.Number_of_zones}"
                                    IsMoveToPointEnabled="True"
                                    LargeChange="10"
                                    Maximum="{Binding TemplateZoneCountMaximum}"
                                    Minimum="{Binding TemplateZoneCountMinimum}"
                                    SmallChange="1"
                                    ToolTip="{Binding TemplateZoneCount}"
                                    ValueChanged="TemplateZoneCount_ValueChanged"
                                    Value="{Binding TemplateZoneCount}" />

                                <TextBlock
                                    Margin="6,0,0,0"
                                    VerticalAlignment="Center"
                                    FontSize="12"
                                    Foreground="{DynamicResource SecondaryForegroundBrush}"
                                    Text="{Binding TemplateZoneCount}"
                                    TextWrapping="Wrap" />

                                <TextBlock
                                    Margin="6,0,0,0"
                                    VerticalAlignment="Center"
                                    FontSize="12"
                                    Foreground="{DynamicResource SecondaryForegroundBrush}"
                                    Text="{x:Static props:Resources.Zones}"
                                    TextWrapping="Wrap" />
                            </StackPanel>
                        </StackPanel>
                    </StackPanel>

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

                            <StackPanel Orientation="Horizontal">
                                <fancyZonesControls:CustomSlider
                                    x:Name="Spacing"
                                    MinWidth="216"
                                    Margin="12,0,0,0"
                                    HorizontalAlignment="Left"
                                    AutomationProperties.HelpText="{x:Static props:Resources.Space_Around_Zones}"
                                    IsEnabled="{Binding ShowSpacing}"
                                    IsMoveToPointEnabled="True"
                                    LargeChange="10"
                                    Maximum="{Binding SpacingMaximum}"
                                    Minimum="{Binding SpacingMinimum}"
                                    SmallChange="1"
                                    ToolTip="{Binding Spacing}"
                                    ValueChanged="Spacing_ValueChanged"
                                    Value="{Binding Spacing}" />

                                <TextBlock
                                    Margin="6,0,0,0"
                                    VerticalAlignment="Center"
                                    FontSize="12"
                                    Foreground="{DynamicResource SecondaryForegroundBrush}"
                                    Text="{Binding Spacing}"
                                    TextWrapping="Wrap" />

                                <TextBlock
                                    Margin="6,0,0,0"
                                    VerticalAlignment="Center"
                                    FontSize="12"
                                    Foreground="{DynamicResource SecondaryForegroundBrush}"
                                    Text="{x:Static props:Resources.Pixels}"
                                    TextWrapping="Wrap" />
                            </StackPanel>

                            <ui:ToggleSwitch
                                x:Name="spaceAroundSetting"
                                Margin="12,0,0,0"
                                VerticalAlignment="Center"
                                ui:FocusVisualHelper.FocusVisualMargin="-3,-3,8,-3"
                                AutomationProperties.Name="{x:Static props:Resources.Show_Space_Zones}"
                                IsOn="{Binding ShowSpacing}"
                                OffContent=""
                                OnContent="">
                                <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
                            x:Name="distanceTitle"
                            Margin="28,0,0,4"
                            Text="{x:Static props:Resources.Distance_adjacent_zones}"
                            TextWrapping="Wrap" />
                        <StackPanel Orientation="Horizontal">
                            <TextBlock
                                VerticalAlignment="Center"
                                FontFamily="{DynamicResource SymbolThemeFontFamily}"
                                FontSize="16"
                                Text="&#xE78A;"
                                ToolTip="{x:Static props:Resources.Distance_adjacent_zones}" />

                            <fancyZonesControls:CustomSlider
                                x:Name="SensitivityInput"
                                MinWidth="216"
                                Margin="12,0,0,0"
                                HorizontalAlignment="Left"
                                AutomationProperties.HelpText="{x:Static props:Resources.Distance_adjacent_zones}"
                                DockPanel.Dock="Top"
                                IsMoveToPointEnabled="True"
                                LargeChange="10"
                                Maximum="{Binding SensitivityRadiusMaximum}"
                                Minimum="{Binding SensitivityRadiusMinimum}"
                                SmallChange="1"
                                ToolTip="{Binding SensitivityRadius}"
                                ValueChanged="SensitivityInput_ValueChanged"
                                Value="{Binding SensitivityRadius}" />

                            <TextBlock
                                Margin="6,0,0,0"
                                VerticalAlignment="Center"
                                FontSize="12"
                                Foreground="{DynamicResource SecondaryForegroundBrush}"
                                Text="{Binding SensitivityRadius}"
                                TextWrapping="Wrap" />

                            <TextBlock
                                Margin="6,0,0,0"
                                VerticalAlignment="Center"
                                FontSize="12"
                                Foreground="{DynamicResource SecondaryForegroundBrush}"
                                Text="{x:Static props:Resources.Pixels}"
                                TextWrapping="Wrap" />
                        </StackPanel>
                    </StackPanel>

                    <StackPanel
                        Margin="0,16,0,0"
                        HorizontalAlignment="Left"
                        Orientation="Vertical">

                        <Button
                            x:Name="SetLayoutAsHorizontalDefaultButton"
                            AutomationProperties.Name="{x:Static props:Resources.Set_Layout_As_Horizontal_Default}"
                            Click="SetLayoutAsHorizontalDefaultButton_Click"
                            Style="{StaticResource IconOnlyButtonStyle}"
                            ToolTip="{x:Static props:Resources.Set_Layout_As_Horizontal_Default}"
                            Visibility="{Binding CanBeSetAsHorizontalDefault, Converter={StaticResource BooleanToVisibilityConverter}}">
                            <Button.Content>
                                <TextBlock AutomationProperties.Name="{x:Static props:Resources.Set_Layout_As_Horizontal_Default}" FontSize="16">
                                    <Run FontFamily="{DynamicResource SymbolThemeFontFamily}" Text="&#xE734;" />
                                    <Run Text="{x:Static props:Resources.Default_Layout_Horizontal}" />
                                </TextBlock>
                            </Button.Content>
                        </Button>
                        <Button
                            x:Name="HorizontalDefaultLayoutButton"
                            AutomationProperties.Name="{x:Static props:Resources.Default_Layout_Horizontal}"
                            Click="HorizontalDefaultLayoutButton_Click"
                            Style="{StaticResource IconOnlyButtonStyle}"
                            ToolTip="{x:Static props:Resources.Default_Layout_Horizontal}"
                            Visibility="{Binding IsHorizontalDefault, Converter={StaticResource BooleanToVisibilityConverter}}">
                            <Button.Content>
                                <TextBlock AutomationProperties.Name="{x:Static props:Resources.Default_Layout_Horizontal}" FontSize="16">
                                    <Run FontFamily="{DynamicResource SymbolThemeFontFamily}" Text="&#xE735;" />
                                    <Run Text="{x:Static props:Resources.Default_Layout_Horizontal}" />
                                </TextBlock>
                            </Button.Content>
                        </Button>

                        <Button
                            x:Name="SetLayoutAsVerticalDefaultButton"
                            AutomationProperties.Name="{x:Static props:Resources.Set_Layout_As_Vertical_Default}"
                            Click="SetLayoutAsVerticalDefaultButton_Click"
                            Style="{StaticResource IconOnlyButtonStyle}"
                            ToolTip="{x:Static props:Resources.Set_Layout_As_Vertical_Default}"
                            Visibility="{Binding CanBeSetAsVerticalDefault, Converter={StaticResource BooleanToVisibilityConverter}}">
                            <Button.Content>
                                <TextBlock AutomationProperties.Name="{x:Static props:Resources.Set_Layout_As_Vertical_Default}" FontSize="16">
                                    <Run FontFamily="{DynamicResource SymbolThemeFontFamily}" Text="&#xE734;" />
                                    <Run Text="{x:Static props:Resources.Default_Layout_Vertical}" />
                                </TextBlock>
                            </Button.Content>
                        </Button>
                        <Button
                            x:Name="VerticalDefaultLayoutButton"
                            AutomationProperties.Name="{x:Static props:Resources.Default_Layout_Vertical}"
                            Click="VerticalDefaultLayoutButton_Click"
                            Style="{StaticResource IconOnlyButtonStyle}"
                            ToolTip="{x:Static props:Resources.Default_Layout_Vertical}"
                            Visibility="{Binding IsVerticalDefault, Converter={StaticResource BooleanToVisibilityConverter}}">
                            <Button.Content>
                                <TextBlock AutomationProperties.Name="{x:Static props:Resources.Default_Layout_Vertical}" FontSize="16">
                                    <Run FontFamily="{DynamicResource SymbolThemeFontFamily}" Text="&#xE735;" />
                                    <Run Text="{x:Static props:Resources.Default_Layout_Vertical}" />
                                </TextBlock>
                            </Button.Content>
                        </Button>

                    </StackPanel>
                </StackPanel>
            </Grid>
        </ui:ContentDialog>

        <ui:ContentDialog
            x:Name="NewLayoutDialog"
            Background="{DynamicResource PrimaryBackgroundBrush}"
            Closed="Dialog_Closed"
            IsPrimaryButtonEnabled="{Binding ElementName=LayoutNameText, Path=Text.Length}"
            Opened="Dialog_Opened"
            PrimaryButtonClick="NewLayoutDialog_PrimaryButtonClick"
            PrimaryButtonStyle="{StaticResource AccentButtonStyle}"
            PrimaryButtonText="{x:Static props:Resources.Create}"
            SecondaryButtonText="{x:Static props:Resources.Cancel}">
            <ui:ContentDialog.TitleTemplate>
                <DataTemplate>
                    <local:HeadingTextBlock
                        AutomationProperties.HeadingLevel="Level1"
                        Style="{StaticResource HeadingTextBlock}"
                        Text="{x:Static props:Resources.Choose_layout_type}" />
                </DataTemplate>
            </ui:ContentDialog.TitleTemplate>
            <StackPanel Margin="0,16,24,0">
                <TextBlock x:Name="NameHeaderText" Text="{x:Static props:Resources.Name}" />
                <TextBox
                    x:Name="LayoutNameText"
                    Margin="3,6,3,0"
                    AutomationProperties.LabeledBy="{Binding ElementName=NameHeaderText}" />
                <RadioButton
                    x:Name="GridLayoutRadioButton"
                    Margin="0,24,0,0"
                    AutomationProperties.HelpText="{x:Static props:Resources.Layout_Grid_Description}"
                    AutomationProperties.Name="{x:Static props:Resources.Layout_Grid_Title}"
                    GroupName="LayoutTypeGroup"
                    IsChecked="True"
                    Style="{StaticResource LayoutTypeRadioButtonStyle}">
                    <RadioButton.Content>
                        <Grid Width="420" Margin="4">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="32" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <TextBlock
                                Margin="0,4,0,0"
                                HorizontalAlignment="Left"
                                AutomationProperties.Name="{x:Static props:Resources.Layout_Grid_Title}"
                                FontFamily="{DynamicResource SymbolThemeFontFamily}"
                                FontSize="16"
                                Foreground="{DynamicResource SystemControlBackgroundAccentBrush}"
                                Text="&#xF0E2;" />
                            <StackPanel Grid.Column="1" Orientation="Vertical">
                                <TextBlock
                                    Margin="0,3,0,0"
                                    FontWeight="Bold"
                                    Text="{x:Static props:Resources.Layout_Grid_Title}"
                                    TextWrapping="Wrap" />
                                <TextBlock
                                    Margin="0,4,0,0"
                                    Foreground="{DynamicResource SecondaryForegroundBrush}"
                                    Text="{x:Static props:Resources.Layout_Grid_Description}"
                                    TextWrapping="Wrap" />
                            </StackPanel>
                        </Grid>
                    </RadioButton.Content>
                </RadioButton>

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