<view:ViewBase
    x:Class="CharacterMap.Views.CalligraphyView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:CharacterMap.Controls"
    xmlns:core="using:CharacterMap.Core"
    xmlns:cx="using:CharacterMapCX.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:h="using:CharacterMap.Helpers"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:view="using:CharacterMap.Views"
    xmlns:viewmodels="using:CharacterMap.ViewModels"
    xmlns:xaml="using:Microsoft.Graphics.Canvas.UI.Xaml"
    x:Name="ViewRoot"
    Background="Transparent"
    DataContext="{x:Bind}"
    TabFocusNavigation="Cycle"
    mc:Ignorable="d"
    d:DataContext="{d:DesignInstance Type=view:CalligraphyView}">

    <Control.Resources>
        <view:CalligraphicPen x:Key="CalligraphyPen" />

        <ExponentialEase
            x:Key="Accel"
            EasingMode="EaseOut"
            Exponent="7" />

        <ExponentialEase
            x:Key="Deccel"
            EasingMode="EaseIn"
            Exponent="7" />

        <Style TargetType="ListViewItem">
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="BorderBrush" Value="{x:Null}" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
            <Setter Property="TabNavigation" Value="Local" />
            <Setter Property="IsHoldingEnabled" Value="True" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Margin" Value="0 0 0 8" />
            <Setter Property="CornerRadius" Value="4" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
            <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />
            <Setter Property="AllowDrop" Value="False" />
            <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
            <Setter Property="FocusVisualMargin" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <Grid
                            x:Name="ContentBorder"
                            Width="150"
                            Height="100"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Control.IsTemplateFocusTarget="True"
                            CornerRadius="{TemplateBinding CornerRadius}"
                            FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                            RenderTransformOrigin="0.5,0.5">

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates" h:FluentAnimation.Pressed="{Binding ElementName=ContentPresenter}">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition From="Normal" To="PointerOver">
                                            <Storyboard>

                                                <DoubleAnimation
                                                    Storyboard.TargetName="BorderBackground"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="1"
                                                    Duration="00:00:0.1" />

                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverlayGrid" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                                </ObjectAnimationUsingKeyFrames>

                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OverlayGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
                                                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="50" />
                                                    <EasingDoubleKeyFrame EasingFunction="{StaticResource Accel}" KeyTime="00:00:00.4" Value="0" />
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualTransition>

                                        <VisualTransition From="PointerOver" To="Normal">
                                            <Storyboard>

                                                <DoubleAnimation
                                                    Storyboard.TargetName="BorderBackground"
                                                    Storyboard.TargetProperty="Opacity"
                                                    From="1"
                                                    To="0"
                                                    Duration="00:00:0.1" />

                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverlayGrid" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                                </ObjectAnimationUsingKeyFrames>

                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OverlayGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
                                                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                                    <EasingDoubleKeyFrame EasingFunction="{StaticResource Deccel}" KeyTime="00:00:00.15" Value="50" />
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualTransition>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal">
                                        <!--<Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                        </Storyboard>-->
                                    </VisualState>

                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="BorderBackground"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <!--<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />-->
                                        </Storyboard>
                                        <VisualState.Setters>
                                            <Setter Target="OverlayGrid.Visibility" Value="Visible" />
                                        </VisualState.Setters>
                                    </VisualState>

                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="BorderBackground"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <!--<PointerDownThemeAnimation TargetName="ContentPresenter" />-->
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>

                                <VisualStateGroup x:Name="DisabledStates">
                                    <VisualState x:Name="Enabled" />
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="ContentBorder"
                                                Storyboard.TargetProperty="Opacity"
                                                To="{ThemeResource ListViewItemDisabledThemeOpacity}"
                                                Duration="0" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <Rectangle
                                x:Name="BorderBackground"
                                Control.IsTemplateFocusTarget="True"
                                Fill="{ThemeResource SystemControlHighlightListLowBrush}"
                                IsHitTestVisible="False"
                                Opacity="0" />

                            <ContentPresenter
                                x:Name="ContentPresenter"
                                Margin="{TemplateBinding Padding}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="Stretch"
                                Background="{ThemeResource LayerFillColorDefaultBrush}"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                d:Background="#88DDDDDD" />


                            <Grid
                                x:Name="OverlayGrid"
                                x:Load="False"
                                Margin="4"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                RenderTransformOrigin="0.5,0.5"
                                Visibility="Collapsed"
                                d:Visibility="Visible">
                                <Grid.RenderTransform>
                                    <CompositeTransform TranslateY="0" />
                                </Grid.RenderTransform>
                                <StackPanel
                                    Background="{ThemeResource LayerOnMicaBaseAltFillColorDefaultBrush}"
                                    CornerRadius="4"
                                    Orientation="Horizontal"
                                    Spacing="4">
                                    <Button
                                        x:Name="DeleteButton"
                                        x:Uid="RemoveButton"
                                        Click="DeleteButton_Click"
                                        Content="&#xE74D;"
                                        DataContext="{TemplateBinding Content}"
                                        Style="{StaticResource SmolButton}"
                                        d:ToolTipService.ToolTip="Remove" />
                                    <Button
                                        x:Uid="SaveButton"
                                        Content="&#xE74E;"
                                        DataContext="{TemplateBinding Content}"
                                        Style="{StaticResource SmolButton}"
                                        d:ToolTipService.ToolTip="Save">
                                        <Button.Flyout>
                                            <MenuFlyout Placement="Bottom">
                                                <MenuFlyoutItem
                                                    x:Uid="ExportPNGLabel"
                                                    Click="SaveHistoryAsPNG"
                                                    DataContext="{TemplateBinding Content}"
                                                    Style="{StaticResource ThemeMenuFlyoutItemStyle}"
                                                    d:Text="As PNG" />
                                                <MenuFlyoutItem
                                                    x:Uid="ExportSVGLabel"
                                                    Click="SaveHistoryAsSVG"
                                                    DataContext="{TemplateBinding Content}"
                                                    Style="{StaticResource ThemeMenuFlyoutItemStyle}"
                                                    d:Text="As SVG" />
                                            </MenuFlyout>
                                        </Button.Flyout>
                                    </Button>
                                </StackPanel>
                            </Grid>

                        </Grid>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


    </Control.Resources>

    <Grid>

        <controls:ModalPagePresenter
            x:Name="Presenter"
            Title="{core:Localizer Key=CalligraphyLabel/Text}"
            CloseButtonVisibility="Collapsed"
            IsWindowRoot="True">
            <controls:ModalPagePresenter.TitleBarContent>
                <controls:XamlTitleBar VerticalAlignment="Top" IsDragTarget="False" />
            </controls:ModalPagePresenter.TitleBarContent>

            <Grid x:Name="ContentRoot" Padding="20 8">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <xaml:CanvasControl x:Name="ShimCanvas" Visibility="Collapsed" />

                <Grid ColumnSpacing="8">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="2*" />
                    </Grid.ColumnDefinitions>

                    <!--
                        Button is ordered first in XAML to ensure it becomes
                        the default focus target
                    -->

                    <controls:CharacterPickerButton
                        x:Name="PickerButton"
                        Grid.Column="1"
                        Margin="-8 0 0 0"
                        Options="{x:Bind ViewModel.Options}"
                        Target="{x:Bind InputBox}" />

                    <StackPanel
                        x:Name="InputContainer"
                        VerticalAlignment="Bottom"
                        Spacing="6">
                        <TextBlock
                            x:Name="InputHeader"
                            x:Uid="GuideHeaderLabel"
                            FontWeight="{ThemeResource SliderHeaderThemeFontWeight}"
                            d:Text="{core:Localizer Key=GuideHeaderLabel/Text}" />
                        <TextBox
                            x:Name="InputBox"
                            x:Uid="GuidePreviewInput"
                            Height="32"
                            VerticalAlignment="Bottom"
                            BorderThickness="1 1 0 1"
                            CornerRadius="4 0 0 4"
                            Text="{Binding ViewModel.Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                            d:Text="Hello" />
                    </StackPanel>


                    <StackPanel
                        x:Name="SliderContainer"
                        Grid.Column="2"
                        Spacing="6">
                        <TextBlock
                            x:Name="SliderHeader"
                            x:Uid="GuideSizeLabel"
                            FontWeight="{ThemeResource SliderHeaderThemeFontWeight}"
                            d:Text="{core:Localizer Key=GuideSizeLabel/Text}" />
                        <Slider
                            x:Name="FontSizeSlider"
                            Height="32"
                            Maximum="400"
                            Minimum="60"
                            Style="{StaticResource DefaultThemeSliderStyle}"
                            Value="{x:Bind ViewModel.FontSize, Mode=TwoWay}"
                            d:Margin="0 4 0 0"
                            d:Value="220" />
                    </StackPanel>


                </Grid>

                <Grid
                    x:Name="ContentGrid"
                    Grid.Row="2"
                    ColumnSpacing="0"
                    RowSpacing="8"
                    Margin="0 8 0 0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="8" />
                        <ColumnDefinition Width="Auto" MinWidth="150" />
                    </Grid.ColumnDefinitions>

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

                    <!--  LEFT COLUMN  -->

                    <Border
                        Grid.ColumnSpan="3"
                        Background="{ThemeResource LayerOnMicaBaseAltFillColorDefaultBrush}"
                        CornerRadius="4"
                        d:Background="#88DDDDDD" />

                    <AppBarSeparator
                        x:Name="Separator"
                        Grid.Column="1"
                        HorizontalAlignment="Center" />

                    <Grid Padding="4 0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <toolkit:WrapPanel
                            x:Name="ButtonsPanel"
                            Padding="0 4 0 4"
                            VerticalAlignment="Stretch"
                            ChildrenTransitions="{x:Bind GetRepositionCollection(ViewModel.AllowAnimation), Mode=OneWay}"
                            HorizontalSpacing="4"
                            Orientation="Horizontal"
                            VerticalSpacing="4">

                            <Button
                                x:Name="UndoButton"
                                x:Uid="UndoButton"
                                Click="{x:Bind ViewModel.InkManager.Undo}"
                                Content="&#xE7A7;"
                                IsEnabled="{x:Bind ViewModel.InkManager.CanUndo, Mode=OneWay, FallbackValue=False}"
                                Style="{StaticResource SmolButton}"
                                d:IsEnabled="False"
                                d:ToolTipService.ToolTip="{core:Localizer Key=UndoButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}">
                                <Button.KeyboardAccelerators>
                                    <KeyboardAccelerator Key="Z" Modifiers="Control" />
                                </Button.KeyboardAccelerators>
                            </Button>

                            <Button
                                x:Name="RedoButton"
                                x:Uid="RedoButton"
                                Click="{x:Bind ViewModel.InkManager.Redo}"
                                Content="&#xE7A6;"
                                IsEnabled="{x:Bind ViewModel.InkManager.CanRedo, Mode=OneWay, FallbackValue=False}"
                                Style="{StaticResource SmolButton}"
                                d:IsEnabled="False"
                                d:ToolTipService.ToolTip="{core:Localizer Key=RedoButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}">
                                <Button.KeyboardAccelerators>
                                    <KeyboardAccelerator Key="Y" Modifiers="Control" />
                                </Button.KeyboardAccelerators>
                            </Button>

                            <AppBarSeparator
                                Width="8"
                                Height="40"
                                Margin="0 -2 0 0"
                                VerticalAlignment="Stretch" />

                            <InkToolbar
                                x:Name="Toolbar"
                                Margin="0 -4 -4 4"
                                core:Properties.DefaultTool="{x:Bind calligraphyPen}"
                                CornerRadius="8"
                                InitialControls="None"
                                TargetInkCanvas="{x:Bind Ink}">
                                <InkToolbarCustomPenButton
                                    x:Name="calligraphyPen"
                                    core:Properties.ClickAnimationOffset="0.87"
                                    core:Properties.PointerOverAnimation="Content"
                                    core:Properties.PointerPressedAnimation="RootElement|Scale"
                                    core:Properties.ToolTip="{core:Localizer Key=CalligraphyPenInkToolbarButtonToolTip}"
                                    CustomPen="{StaticResource CalligraphyPen}"
                                    MaxStrokeWidth="10"
                                    MinStrokeWidth="3"
                                    Palette="{x:Bind BallpointPen.Palette, Mode=OneWay}"
                                    SelectedBrushIndex="0"
                                    SelectedStrokeWidth="4">
                                    <Border>
                                        <Grid>
                                            <TextBlock
                                                AutomationProperties.AccessibilityView="Raw"
                                                Canvas.ZIndex="1"
                                                Style="{StaticResource InkToolbarGlyphFontStyle}"
                                                Text="&#xEDFB;" />
                                            <TextBlock
                                                AutomationProperties.AccessibilityView="Raw"
                                                Canvas.ZIndex="0"
                                                Foreground="{x:Bind calligraphyPen.SelectedBrush, Mode=OneWay}"
                                                Style="{StaticResource InkToolbarGlyphFillFontStyle}"
                                                Text="&#xF0C7;" />
                                        </Grid>
                                    </Border>
                                    <InkToolbarCustomPenButton.ConfigurationContent>
                                        <InkToolbarPenConfigurationControl />
                                    </InkToolbarCustomPenButton.ConfigurationContent>
                                </InkToolbarCustomPenButton>
                                <InkToolbarBallpointPenButton
                                    x:Name="BallpointPen"
                                    core:Properties.ClickAnimationOffset="0.87"
                                    core:Properties.PointerOverAnimation="Content,ContentFillGlyph,CheckedContent"
                                    core:Properties.PointerPressedAnimation="RootElement|Scale"
                                    core:Properties.ToolTipStyleKey="DefaultThemeToolTipStyle"
                                    MaxStrokeWidth="10"
                                    MinStrokeWidth="3" />
                                <InkToolbarEraserButton
                                    core:Properties.ClickAnimationOffset="0.87"
                                    core:Properties.PointerOverAnimation="Content"
                                    core:Properties.PointerPressedAnimation="RootElement|Scale"
                                    core:Properties.ToolTipStyleKey="DefaultThemeToolTipStyle"
                                    IsClearAllVisible="False"
                                    IsExtensionGlyphShown="False" />
                            </InkToolbar>

                            <Button
                                x:Name="ClearAllButton"
                                x:Uid="ClearAllButton"
                                Content="&#xE74D;"
                                IsEnabled="{x:Bind ViewModel.InkManager.HasStrokes, Mode=OneWay, FallbackValue=False}"
                                Style="{StaticResource SmolButton}"
                                d:IsEnabled="False"
                                d:ToolTipService.ToolTip="{core:Localizer Key=ClearAllButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}">
                                <Button.Flyout>
                                    <MenuFlyout Placement="Bottom">
                                        <MenuFlyoutItem
                                            x:Uid="ClearAllItem"
                                            Click="{x:Bind Reset}"
                                            Style="{StaticResource ThemeMenuFlyoutItemStyle}"
                                            d:Text="{core:Localizer Key=ClearAllItem/Text}" />
                                    </MenuFlyout>
                                </Button.Flyout>
                            </Button>

                            <AppBarSeparator
                                Width="8"
                                Height="40"
                                Margin="0 -2 0 0"
                                VerticalAlignment="Stretch" />

                            <InkToolbarCustomToggleButton
                                x:Name="GuideCheck"
                                x:Uid="GuideToggle"
                                Margin="0 0 0 4"
                                core:Properties.ClickAnimation="Content|Scale"
                                core:Properties.ClickAnimationOffset="0.87"
                                core:Properties.PointerOverAnimation="Content"
                                core:Properties.ToolTipStyleKey="DefaultThemeToolTipStyle"
                                IsChecked="{x:Bind ViewModel.IsOverlayVisible, Mode=TwoWay}"
                                d:ToolTipService.ToolTip="{core:Localizer Key=GuideToggle/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}">
                                <TextBlock
                                    AutomationProperties.AccessibilityView="Raw"
                                    FontFamily="{StaticResource SymbolThemeFontFamily}"
                                    FontSize="16"
                                    IsTextScaleFactorEnabled="False"
                                    Text="&#xE80A;" />
                            </InkToolbarCustomToggleButton>

                            <InkToolbarCustomToggleButton
                                x:Name="SwapButton"
                                x:Uid="SideBySideToggle"
                                Margin="0 0 0 4"
                                core:Properties.ClickAnimation="Content|Scale"
                                core:Properties.ClickAnimationOffset="0.87"
                                core:Properties.PointerOverAnimation="Content"
                                core:Properties.ToolTipStyleKey="DefaultThemeToolTipStyle"
                                Click="Button_Click"
                                d:ToolTipService.ToolTip="{core:Localizer Key=SideBySideToggle/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}">
                                <TextBlock
                                    AutomationProperties.AccessibilityView="Raw"
                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                    FontSize="16"
                                    IsTextScaleFactorEnabled="False"
                                    Text="&#xE89A;" />
                            </InkToolbarCustomToggleButton>
                        </toolkit:WrapPanel>


                        <StackPanel
                            Grid.Column="1"
                            Orientation="Horizontal"
                            Spacing="4">
                            <Button
                                x:Name="SaveButton"
                                x:Uid="SaveButton"
                                Content="&#xE74E;"
                                IsEnabled="{x:Bind ViewModel.InkManager.HasStrokes, Mode=OneWay, FallbackValue=False}"
                                Style="{StaticResource SmolButton}"
                                d:ToolTipService.ToolTip="{core:Localizer Key=SaveButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}">
                                <Button.KeyboardAccelerators>
                                    <KeyboardAccelerator Key="S" Modifiers="Control" />
                                </Button.KeyboardAccelerators>
                                <Button.Flyout>
                                    <MenuFlyout Placement="Bottom">
                                        <MenuFlyoutItem
                                            x:Uid="ExportPNGLabel"
                                            Click="SaveAsPNG"
                                            Style="{StaticResource ThemeMenuFlyoutItemStyle}"
                                            d:Text="{core:Localizer Key=ExportPNGLabel/Text}" />
                                        <MenuFlyoutItem
                                            x:Uid="ExportSVGLabel"
                                            Click="SaveAsSVG"
                                            Style="{StaticResource ThemeMenuFlyoutItemStyle}"
                                            d:Text="{core:Localizer Key=ExportSVGLabel/Text}" />
                                    </MenuFlyout>
                                </Button.Flyout>
                            </Button>
                            <Button
                                x:Name="AddButton"
                                x:Uid="AddHistoryButton"
                                HorizontalAlignment="Right"
                                Click="AddHistoryButton_Click"
                                Content="&#xE710;"
                                IsEnabled="{x:Bind ViewModel.InkManager.HasStrokes, Mode=OneWay, FallbackValue=False}"
                                Style="{StaticResource SmolButton}"
                                d:IsEnabled="False"
                                d:ToolTipService.ToolTip="{core:Localizer Key=AddHistoryButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}" />
                        </StackPanel>

                    </Grid>


                    <Grid
                        x:Name="PresentationRoot"
                        Grid.Row="1"
                        Grid.Column="0"
                        ColumnSpacing="8">

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <cx:DirectText
                            x:Name="Guide"
                            Grid.ColumnSpan="2"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            core:Properties.Options="{x:Bind ViewModel.Options}"
                            h:CompositionFactory.OpacityDuration="0:0:0.15"
                            FontSize="{x:Bind ViewModel.FontSize, Mode=OneWay}"
                            IsOverwriteCompensationEnabled="True"
                            IsTextWrappingEnabled="True"
                            Text="{Binding ViewModel.Text, Mode=OneWay}"
                            d:FontSize="124"
                            d:Opacity="0.3"
                            d:Text="Preview" />

                        <Border
                            x:Name="CanvasContainer"
                            Grid.ColumnSpan="2"
                            Background="{ThemeResource LayerFillColorDefaultBrush}"
                            CornerRadius="4"
                            d:Background="#88DDDDDD">
                            <Border x:Name="Inker">
                                <InkCanvas x:Name="Ink" core:Properties.IsMouseInputEnabled="True" />
                            </Border>
                        </Border>

                    </Grid>

                    <!--  RIGHT COLUMN  -->

                    <Grid Grid.Column="2">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <StackPanel
                            Margin="1 0 0 0"
                            HorizontalAlignment="Center"
                            Opacity="0.4"
                            Orientation="Horizontal"
                            Spacing="8">
                            <TextBlock
                                VerticalAlignment="Center"
                                AutomationProperties.AccessibilityView="Raw"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                IsTextScaleFactorEnabled="False"
                                Text="&#xE81C;" />
                            <TextBlock
                                x:Uid="HistoryLabel"
                                VerticalAlignment="Center"
                                TextLineBounds="Tight"
                                d:Text="{core:Localizer Key=HistoryLabel/Text}" />
                        </StackPanel>
                    </Grid>



                    <ListView
                        x:Name="HistoryList"
                        Grid.Row="1"
                        Grid.Column="2"
                        Margin="0 0 0 0"
                        ContainerContentChanging="HistoryList_ContainerContentChanging"
                        IsItemClickEnabled="True"
                        ItemClick="HistoryList_ItemClick"
                        ItemContainerTransitions="{x:Bind GetRepositionCollection(ViewModel.AllowAnimation), Mode=OneWay}"
                        ItemsSource="{x:Bind ViewModel.Histories}"
                        SelectionMode="None">
                        <d:ListView.Items>
                            <viewmodels:CalligraphyHistoryItem />
                            <viewmodels:CalligraphyHistoryItem />
                            <viewmodels:CalligraphyHistoryItem />
                            <viewmodels:CalligraphyHistoryItem />
                            <viewmodels:CalligraphyHistoryItem />
                        </d:ListView.Items>
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="viewmodels:CalligraphyHistoryItem">
                                <Image
                                    x:Name="Thumb"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Source="{x:Bind Thumbnail}"
                                    Stretch="Uniform" />
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>

                </Grid>

            </Grid>

        </controls:ModalPagePresenter>

        <!--  Notification Presenter  -->
        <Grid x:Name="NotificationRoot" x:Load="False">
            <toolkit:InAppNotification x:Name="DefaultNotification" />
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="VisualThemeState">
                <VisualState x:Name="FUIThemeState">
                    <VisualState.Setters>
                        <Setter Target="FontSizeSlider.Margin" Value="0 4 0 0" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="ClassicThemeState">
                    <VisualState.Setters>
                        <Setter Target="SaveButton.CornerRadius" Value="0" />
                        <Setter Target="AddButton.CornerRadius" Value="0" />
                        <Setter Target="UndoButton.CornerRadius" Value="0" />
                        <Setter Target="RedoButton.CornerRadius" Value="0" />
                        <Setter Target="InputBox.CornerRadius" Value="0" />
                        <Setter Target="ClearAllButton.CornerRadius" Value="0" />
                        <Setter Target="PickerButton.CornerRadius" Value="0" />
                        <Setter Target="Toolbar.Margin" Value="0 0 0 0" />
                        <Setter Target="ButtonsPanel.Padding" Value="0" />
                        <Setter Target="ButtonsPanel.Margin" Value="0 4 0 0" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="DefaultThemeState">
                    <VisualState.Setters>
                        <Setter Target="SaveButton.CornerRadius" Value="0" />
                        <Setter Target="AddButton.CornerRadius" Value="0" />
                        <Setter Target="UndoButton.CornerRadius" Value="0" />
                        <Setter Target="RedoButton.CornerRadius" Value="0" />
                        <Setter Target="InputBox.CornerRadius" Value="0" />
                        <Setter Target="ClearAllButton.CornerRadius" Value="0" />
                        <Setter Target="PickerButton.CornerRadius" Value="0" />
                        <Setter Target="Toolbar.Margin" Value="0 0 0 0" />
                        <Setter Target="ButtonsPanel.Padding" Value="0" />
                        <Setter Target="ButtonsPanel.Margin" Value="0 -3 0 0" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="ZuneThemeState">
                    <VisualState.Setters>
                        <Setter Target="SaveButton.CornerRadius" Value="0" />
                        <Setter Target="AddButton.CornerRadius" Value="0" />
                        <Setter Target="UndoButton.CornerRadius" Value="0" />
                        <Setter Target="RedoButton.CornerRadius" Value="0" />
                        <Setter Target="InputBox.CornerRadius" Value="0" />
                        <Setter Target="ClearAllButton.CornerRadius" Value="0" />
                        <Setter Target="PickerButton.CornerRadius" Value="0" />
                        <Setter Target="Toolbar.Margin" Value="0 0 0 4" />
                        <Setter Target="InputBox.Height" Value="36" />
                        <Setter Target="InputBox.FontSize" Value="13" />
                        <Setter Target="ButtonsPanel.Padding" Value="0" />
                        <Setter Target="ButtonsPanel.Margin" Value="0 4 0 0" />
                    </VisualState.Setters>
                </VisualState>

            </VisualStateGroup>

            <VisualStateGroup x:Name="PreviewStates">
                <VisualState x:Name="PreviewVisibleState">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{x:Bind ViewModel.IsOverlayVisible, Mode=OneWay}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Guide.Opacity" Value="0.3" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="PreviewHiddenState">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{x:Bind core:Converters.False(ViewModel.IsOverlayVisible), Mode=OneWay}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Guide.Opacity" Value="0" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>

            <VisualStateGroup x:Name="ViewStates">
                <VisualState x:Name="OverlayState" />
                <VisualState x:Name="SideBySideState" />
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    </Grid>
</view:ViewBase>
