<UserControl
    x:Class="FancyZonesEditor.CanvasZone"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:FancyZonesEditor"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:props="clr-namespace:FancyZonesEditor.Properties"
    d:DesignHeight="450"
    d:DesignWidth="800"
    Background="Transparent"
    KeyDown="Border_KeyDown"
    mc:Ignorable="d">
    <UserControl.Resources>
        <Style x:Key="CanvasZoneThumbStyle" TargetType="{x:Type Thumb}">
            <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border
                            x:Name="ThumbBorder"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{DynamicResource SystemControlBackgroundAccentBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="0"
                            Opacity="0">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.15">
                                            <VisualTransition.GeneratedEasingFunction>
                                                <ExponentialEase EasingMode="EaseInOut" />
                                            </VisualTransition.GeneratedEasingFunction>
                                        </VisualTransition>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="ThumbBorder"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0:0:0.15" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="CloseButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Foreground" Value="{DynamicResource PrimaryForegroundBrush}" />
            <Setter Property="Padding" Value="1" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border
                            x:Name="border"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="true">
                            <ContentPresenter
                                x:Name="contentPresenter"
                                Margin="{TemplateBinding Padding}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Focusable="False"
                                RecognizesAccessKey="True"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDefaulted" Value="true">
                                <Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="contentPresenter" Property="Opacity" Value="0.6" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter TargetName="contentPresenter" Property="Opacity" Value="0.4" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Border
        x:Name="RootBorder"
        CornerRadius="0"
        Focusable="True"
        PreviewMouseDown="Border_PreviewMouseDown">
        <Border.Style>
            <Style>
                <Setter Property="Border.Background" Value="{DynamicResource CanvasZoneBackgroundBrush}" />
                <Setter Property="Border.BorderBrush" Value="{DynamicResource CanvasZoneBorderBrush}" />
                <Setter Property="Border.BorderThickness" Value="1" />
                <Style.Triggers>
                    <Trigger Property="Border.IsKeyboardFocused" Value="true">
                        <Setter Property="Border.BorderThickness" Value="4" />
                        <Setter Property="Border.BorderBrush" Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
        <Grid x:Name="Frame">
            <Grid.RowDefinitions>
                <RowDefinition Height="8" />
                <RowDefinition Height="16" />
                <RowDefinition Height="*" />
                <RowDefinition Height="16" />
                <RowDefinition Height="8" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="8" />
                <ColumnDefinition Width="16" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="16" />
                <ColumnDefinition Width="8" />
            </Grid.ColumnDefinitions>

            <DockPanel
                Grid.Row="2"
                Grid.Column="2"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
                <Label
                    Name="LabelID"
                    HorizontalContentAlignment="Center"
                    VerticalContentAlignment="Center"
                    Content="ID"
                    DockPanel.Dock="Top"
                    FontSize="64"
                    FontWeight="SemiBold"
                    Foreground="{Binding ElementName=RootBorder, Path=BorderBrush}" />
                <TextBlock
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    DockPanel.Dock="Bottom"
                    FontSize="16"
                    FontWeight="SemiBold"
                    Foreground="{Binding ElementName=RootBorder, Path=BorderBrush}"
                    Opacity="0.6">
                    <Run x:Name="WidthLabel" />
                    <Run
                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                        FontSize="10"
                        Text="&#xE947;" />
                    <Run x:Name="HeightLabel" />
                </TextBlock>
            </DockPanel>

            <Thumb
                x:Name="Caption"
                Grid.Row="0"
                Grid.RowSpan="5"
                Grid.Column="0"
                Grid.ColumnSpan="5"
                Margin="-1"
                Padding="4"
                Background="Transparent"
                BorderThickness="3"
                Cursor="SizeAll"
                DragDelta="UniversalDragDelta"
                DragStarted="Caption_DragStarted"
                Style="{DynamicResource CanvasZoneThumbStyle}" />

            <Thumb
                x:Name="NResize"
                Grid.ColumnSpan="5"
                BorderThickness="0,2,0,0"
                Cursor="SizeNS"
                DragDelta="UniversalDragDelta"
                DragStarted="NResize_DragStarted"
                Style="{DynamicResource CanvasZoneThumbStyle}" />
            <Thumb
                x:Name="SResize"
                Grid.Row="4"
                Grid.ColumnSpan="5"
                BorderThickness="0,0,0,2"
                Cursor="SizeNS"
                DragDelta="UniversalDragDelta"
                DragStarted="SResize_DragStarted"
                Style="{DynamicResource CanvasZoneThumbStyle}" />
            <Thumb
                x:Name="WResize"
                Grid.RowSpan="5"
                BorderThickness="2,0,0,0"
                Cursor="SizeWE"
                DragDelta="UniversalDragDelta"
                DragStarted="WResize_DragStarted"
                Style="{DynamicResource CanvasZoneThumbStyle}" />
            <Thumb
                x:Name="EResize"
                Grid.RowSpan="5"
                Grid.Column="4"
                BorderThickness="0,0,2,0"
                Cursor="SizeWE"
                DragDelta="UniversalDragDelta"
                DragStarted="EResize_DragStarted"
                Style="{DynamicResource CanvasZoneThumbStyle}" />

            <Thumb
                x:Name="NWResize"
                Grid.Row="0"
                Grid.RowSpan="2"
                Grid.Column="0"
                Grid.ColumnSpan="2"
                BorderThickness="2,2,0,0"
                Cursor="SizeNWSE"
                DragDelta="UniversalDragDelta"
                DragStarted="NWResize_DragStarted"
                Style="{DynamicResource CanvasZoneThumbStyle}" />
            <Thumb
                x:Name="NEResize"
                Grid.Row="0"
                Grid.RowSpan="2"
                Grid.Column="3"
                Grid.ColumnSpan="2"
                BorderThickness="0,2,2,0"
                Cursor="SizeNESW"
                DragDelta="UniversalDragDelta"
                DragStarted="NEResize_DragStarted"
                Style="{DynamicResource CanvasZoneThumbStyle}" />
            <Thumb
                x:Name="SWResize"
                Grid.Row="3"
                Grid.RowSpan="2"
                Grid.Column="0"
                Grid.ColumnSpan="2"
                BorderThickness="2,0,0,2"
                Cursor="SizeNESW"
                DragDelta="UniversalDragDelta"
                DragStarted="SWResize_DragStarted"
                Style="{DynamicResource CanvasZoneThumbStyle}" />
            <Thumb
                x:Name="SEResize"
                Grid.Row="3"
                Grid.RowSpan="2"
                Grid.Column="3"
                Grid.ColumnSpan="2"
                BorderThickness="0,0,2,2"
                Cursor="SizeNWSE"
                DragDelta="UniversalDragDelta"
                DragStarted="SEResize_DragStarted"
                Style="{DynamicResource CanvasZoneThumbStyle}" />

            <Button
                Grid.Row="2"
                Grid.Column="2"
                Padding="4"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Background="Transparent"
                BorderThickness="0"
                Click="OnClose"
                Content="&#xE894;"
                Focusable="False"
                FontFamily="{StaticResource SymbolThemeFontFamily}"
                FontSize="16"
                IsTabStop="False"
                Style="{DynamicResource CloseButtonStyle}"
                ToolTip="{x:Static props:Resources.Delete_Zone}" />

            <Canvas x:Name="Body" />
        </Grid>
    </Border>
</UserControl>
