<views:PopoverViewBase
    x:Class="CharacterMap.Views.ExportView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cmControls="using:CharacterMap.Controls"
    xmlns:core="using:CharacterMap.Core"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:helpers="using:CharacterMap.Helpers"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:CharacterMap.Models"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:primitiveContract7Present="using:Microsoft.UI.Xaml.Controls.Primitives?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
    xmlns:views="using:CharacterMap.Views"
    Background="Transparent"
    DataContext="{x:Bind}"
    TabFocusNavigation="Cycle"
    mc:Ignorable="d"
    d:DataContext="{d:DesignInstance Type=views:ExportView}"
    d:DesignHeight="1024"
    d:DesignWidth="1280">

    <UserControl.Resources>

        <Style TargetType="RadioButton">
            <Setter Property="MinWidth" Value="200" />
        </Style>

        <DataTemplate x:Key="HeaderTemplate">
            <TextBlock Style="{StaticResource HeaderStyle}" Text="{Binding}" />
        </DataTemplate>

        <Style BasedOn="{StaticResource DefaultThemeComboBoxStyle}" TargetType="cmControls:UXComboBox">
            <Setter Property="MinWidth" Value="168" />
            <Setter Property="HeaderTemplate" Value="{StaticResource HeaderTemplate}" />
        </Style>

        <Style x:Key="ColorPickerStyle1" TargetType="muxc:ColorPicker">
            <Setter Property="MaxWidth" Value="1000" />
            <Setter Property="MinWidth" Value="250" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="muxc:ColorPicker">
                        <Grid Background="{TemplateBinding Background}">
                            <Grid.Resources>
                                <Style x:Key="ColorPickerSliderStyle" TargetType="primitiveContract7Present:ColorPickerSlider">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="Slider">
                                                <Grid Margin="0,5,0,0">
                                                    <Grid.Resources>
                                                        <Style x:Key="SliderThumbStyle" TargetType="Thumb">
                                                            <Setter Property="BorderThickness" Value="0" />
                                                            <Setter Property="Background" Value="{ThemeResource ColorPickerSliderThumbBackground}" />
                                                            <Setter Property="Template">
                                                                <Setter.Value>
                                                                    <ControlTemplate TargetType="Thumb">
                                                                        <Border
                                                                            Background="{TemplateBinding Background}"
                                                                            BorderBrush="{TemplateBinding BorderBrush}"
                                                                            BorderThickness="{TemplateBinding BorderThickness}"
                                                                            CornerRadius="{ThemeResource SliderThumbCornerRadius}" />
                                                                    </ControlTemplate>
                                                                </Setter.Value>
                                                            </Setter>
                                                        </Style>
                                                    </Grid.Resources>
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="Auto" />
                                                        <RowDefinition Height="*" />
                                                    </Grid.RowDefinitions>
                                                    <VisualStateManager.VisualStateGroups>
                                                        <VisualStateGroup x:Name="CommonStates">
                                                            <VisualState x:Name="Normal" />
                                                            <VisualState x:Name="Pressed">
                                                                <VisualState.Setters>
                                                                    <Setter Target="HorizontalThumb.Background" Value="{ThemeResource ColorPickerSliderThumbBackgroundPressed}" />
                                                                </VisualState.Setters>
                                                            </VisualState>
                                                            <VisualState x:Name="Disabled">
                                                                <VisualState.Setters>
                                                                    <Setter Target="HeaderContentPresenter.Foreground" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                                                    <Setter Target="HorizontalThumb.Background" Value="{ThemeResource ColorPickerSliderThumbBackgroundDisabled}" />
                                                                    <Setter Target="HorizontalTrackRect.Fill" Value="{ThemeResource ColorPickerSliderTrackFillDisabled}" />
                                                                    <Setter Target="HorizontalDecreaseRect.Fill" Value="{ThemeResource ColorPickerSliderTrackFillDisabled}" />
                                                                </VisualState.Setters>
                                                            </VisualState>
                                                            <VisualState x:Name="PointerOver">
                                                                <VisualState.Setters>
                                                                    <Setter Target="HorizontalThumb.Background" Value="{ThemeResource ColorPickerSliderThumbBackgroundPointerOver}" />
                                                                </VisualState.Setters>
                                                            </VisualState>
                                                        </VisualStateGroup>
                                                        <VisualStateGroup x:Name="FocusEngagementStates">
                                                            <VisualState x:Name="FocusDisengaged" />
                                                            <VisualState x:Name="FocusEngagedHorizontal">
                                                                <VisualState.Setters>
                                                                    <Setter Target="SliderContainer.(Control.IsTemplateFocusTarget)" Value="False" />
                                                                    <Setter Target="HorizontalThumb.(Control.IsTemplateFocusTarget)" Value="True" />
                                                                </VisualState.Setters>
                                                            </VisualState>
                                                            <VisualState x:Name="FocusEngagedVertical">
                                                                <VisualState.Setters>
                                                                    <Setter Target="SliderContainer.(Control.IsTemplateFocusTarget)" Value="False" />
                                                                    <Setter Target="VerticalThumb.(Control.IsTemplateFocusTarget)" Value="True" />
                                                                </VisualState.Setters>
                                                            </VisualState>
                                                        </VisualStateGroup>
                                                    </VisualStateManager.VisualStateGroups>
                                                    <ContentPresenter
                                                        x:Name="HeaderContentPresenter"
                                                        x:DeferLoadStrategy="Lazy"
                                                        Margin="{ThemeResource SliderHeaderThemeMargin}"
                                                        Content="{TemplateBinding Header}"
                                                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                                                        FontWeight="{ThemeResource SliderHeaderThemeFontWeight}"
                                                        Foreground="{ThemeResource SliderHeaderForeground}"
                                                        TextWrapping="Wrap"
                                                        Visibility="Collapsed" />
                                                    <Grid
                                                        x:Name="SliderContainer"
                                                        Grid.Row="1"
                                                        Background="Transparent"
                                                        Control.IsTemplateFocusTarget="True">
                                                        <Grid x:Name="HorizontalTemplate" MinHeight="44">
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="Auto" />
                                                                <ColumnDefinition Width="Auto" />
                                                                <ColumnDefinition />
                                                            </Grid.ColumnDefinitions>
                                                            <Grid.RowDefinitions>
                                                                <RowDefinition Height="18" />
                                                                <RowDefinition Height="Auto" />
                                                                <RowDefinition Height="18" />
                                                            </Grid.RowDefinitions>
                                                            <Rectangle
                                                                x:Name="HorizontalTrackRect"
                                                                Grid.Row="1"
                                                                Grid.ColumnSpan="3"
                                                                Height="{ThemeResource SliderTrackThemeHeight}"
                                                                Fill="Transparent"
                                                                Opacity="0"
                                                                RadiusX="{Binding Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}, Source={ThemeResource ControlCornerRadius}}"
                                                                RadiusY="{Binding Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}, Source={ThemeResource ControlCornerRadius}}" />
                                                            <Rectangle
                                                                x:Name="HorizontalDecreaseRect"
                                                                Grid.Row="1"
                                                                Fill="Transparent"
                                                                Opacity="0" />
                                                            <Thumb
                                                                x:Name="HorizontalThumb"
                                                                Grid.Row="0"
                                                                Grid.RowSpan="3"
                                                                Grid.Column="1"
                                                                Width="{ThemeResource SliderHorizontalThumbWidth}"
                                                                Height="{ThemeResource SliderHorizontalThumbHeight}"
                                                                AutomationProperties.AccessibilityView="Raw"
                                                                DataContext="{TemplateBinding Value}"
                                                                Style="{StaticResource SliderThumbStyle}">
                                                                <ToolTipService.ToolTip>
                                                                    <ToolTip x:Name="ToolTip" VerticalOffset="20" />
                                                                </ToolTipService.ToolTip>
                                                            </Thumb>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                                <SolidColorBrush x:Name="CheckerColorBrush" Color="{ThemeResource SystemListLowColor}" />
                            </Grid.Resources>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="ColorSpectrumVisibility">
                                    <VisualState x:Name="ColorSpectrumVisible" />
                                    <VisualState x:Name="ColorSpectrumCollapsed">
                                        <VisualState.Setters>
                                            <Setter Target="ColorSpectrum.Visibility" Value="Collapsed" />
                                            <Setter Target="ColorPreviewRectangleGrid.Width" Value="NaN" />
                                            <Setter Target="ColorPreviewRectangleGrid.Height" Value="44" />
                                            <Setter Target="ColorPreviewRectangleGrid.Margin" Value="0" />
                                            <Setter Target="ColorPreviewRectangleGrid.(Grid.Column)" Value="0" />
                                            <Setter Target="ColorPreviewRectangleGrid.(Grid.ColumnSpan)" Value="2" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ColorPreviewVisibility">
                                    <VisualState x:Name="ColorPreviewVisible" />
                                    <VisualState x:Name="ColorPreviewCollapsed">
                                        <VisualState.Setters>
                                            <Setter Target="ColorPreviewRectangleGrid.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="PreviousColorVisibility">
                                    <VisualState x:Name="PreviousColorCollapsedVertical" />
                                    <VisualState x:Name="PreviousColorVisibleVertical">
                                        <VisualState.Setters>
                                            <Setter Target="ColorPreviewRectangle.(Grid.RowSpan)" Value="1" />
                                            <Setter Target="PreviousColorRectangle.Visibility" Value="Visible" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PreviousColorCollapsedHorizontal">
                                        <VisualState.Setters>
                                            <Setter Target="PreviousColorRectangle.(Grid.Row)" Value="0" />
                                            <Setter Target="PreviousColorRectangle.(Grid.Column)" Value="1" />
                                            <Setter Target="PreviousColorRectangle.(Grid.RowSpan)" Value="2" />
                                            <Setter Target="PreviousColorRectangle.(Grid.ColumnSpan)" Value="1" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PreviousColorVisibleHorizontal">
                                        <VisualState.Setters>
                                            <Setter Target="ColorPreviewRectangle.(Grid.ColumnSpan)" Value="1" />
                                            <Setter Target="PreviousColorRectangle.Visibility" Value="Visible" />
                                            <Setter Target="PreviousColorRectangle.(Grid.Row)" Value="0" />
                                            <Setter Target="PreviousColorRectangle.(Grid.Column)" Value="1" />
                                            <Setter Target="PreviousColorRectangle.(Grid.RowSpan)" Value="2" />
                                            <Setter Target="PreviousColorRectangle.(Grid.ColumnSpan)" Value="1" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ThirdDimensionSliderVisibility">
                                    <VisualState x:Name="ThirdDimensionSliderVisible" />
                                    <VisualState x:Name="ThirdDimensionSliderCollapsed">
                                        <VisualState.Setters>
                                            <Setter Target="ThirdDimensionSliderGrid.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="AlphaSliderVisibility">
                                    <VisualState x:Name="AlphaSliderVisible" />
                                    <VisualState x:Name="AlphaSliderCollapsed">
                                        <VisualState.Setters>
                                            <Setter Target="AlphaSliderGrid.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="MoreButtonVisibility">
                                    <VisualState x:Name="MoreButtonVisible" />
                                    <VisualState x:Name="MoreButtonCollapsed">
                                        <VisualState.Setters>
                                            <!--<Setter Target="MoreButton.Visibility" Value="Collapsed" />-->
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="TextEntryGridVisibility">
                                    <VisualState x:Name="TextEntryGridCollapsed" />
                                    <VisualState x:Name="TextEntryGridVisible">
                                        <VisualState.Setters>
                                            <Setter Target="TextEntryGrid.Visibility" Value="Visible" />
                                            <!--<Setter Target="MoreGlyph.Glyph" Value="&#xE70E;" />-->
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ColorChannelTextInputVisibility">
                                    <VisualState x:Name="ColorChannelTextInputVisible" />
                                    <VisualState x:Name="ColorChannelTextInputCollapsed">
                                        <VisualState.Setters>
                                            <Setter Target="ColorRepresentationComboBox.Visibility" Value="Collapsed" />
                                            <Setter Target="ColorChannelTextInputPanel.Visibility" Value="Collapsed" />
                                            <Setter Target="HexTextBox.(Grid.Column)" Value="0" />
                                            <Setter Target="HexTextBox.HorizontalAlignment" Value="Left" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="AlphaTextInputVisibility">
                                    <VisualState x:Name="AlphaTextInputVisible" />
                                    <VisualState x:Name="AlphaTextInputCollapsed">
                                        <VisualState.Setters>
                                            <Setter Target="AlphaPanel.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ColorRepresentationSelected">
                                    <VisualState x:Name="RgbSelected" />
                                    <VisualState x:Name="HsvSelected">
                                        <VisualState.Setters>
                                            <Setter Target="RgbPanel.Visibility" Value="Collapsed" />
                                            <Setter Target="HsvPanel.Visibility" Value="Visible" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="HexInputVisibility">
                                    <VisualState x:Name="HexInputVisible" />
                                    <VisualState x:Name="HexInputCollapsed">
                                        <VisualState.Setters>
                                            <Setter Target="HexTextBox.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="AlphaEnabledState">
                                    <VisualState x:Name="AlphaDisabled" />
                                    <VisualState x:Name="AlphaEnabled">
                                        <VisualState.Setters>
                                            <Setter Target="HexTextBox.MaxLength" Value="9" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid ColumnSpacing="12">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <StackPanel>
                                    <Grid x:Name="ColorSpectrumGrid">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="250" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <primitiveContract7Present:ColorSpectrum
                                            x:Name="ColorSpectrum"
                                            Grid.Row="0"
                                            Grid.Column="0"
                                            MinWidth="256"
                                            MinHeight="256"
                                            MaxWidth="336"
                                            MaxHeight="336"
                                            Components="{TemplateBinding ColorSpectrumComponents}"
                                            MaxHue="{TemplateBinding MaxHue}"
                                            MaxSaturation="{TemplateBinding MaxSaturation}"
                                            MaxValue="{TemplateBinding MaxValue}"
                                            MinHue="{TemplateBinding MinHue}"
                                            MinSaturation="{TemplateBinding MinSaturation}"
                                            MinValue="{TemplateBinding MinValue}"
                                            Shape="{TemplateBinding ColorSpectrumShape}" />
                                        <Grid
                                            x:Name="ColorPreviewRectangleGrid"
                                            Grid.Row="0"
                                            Grid.Column="1"
                                            Width="44"
                                            Margin="12,0,0,0">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition />
                                                <ColumnDefinition />
                                            </Grid.ColumnDefinitions>
                                            <Grid.RowDefinitions>
                                                <RowDefinition />
                                                <RowDefinition />
                                            </Grid.RowDefinitions>
                                            <Rectangle
                                                Grid.RowSpan="2"
                                                Grid.ColumnSpan="2"
                                                VerticalAlignment="Stretch"
                                                RadiusX="{Binding Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}, Source={ThemeResource ControlCornerRadius}}"
                                                RadiusY="{Binding Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}, Source={ThemeResource ControlCornerRadius}}">
                                                <Rectangle.Fill>
                                                    <ImageBrush x:Name="ColorPreviewRectangleCheckeredBackgroundImageBrush" />
                                                </Rectangle.Fill>
                                            </Rectangle>
                                            <Rectangle
                                                x:Name="ColorPreviewRectangle"
                                                Grid.RowSpan="2"
                                                Grid.ColumnSpan="2"
                                                VerticalAlignment="Stretch"
                                                RadiusX="{Binding Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}, Source={ThemeResource ControlCornerRadius}}"
                                                RadiusY="{Binding Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}, Source={ThemeResource ControlCornerRadius}}" />
                                            <Rectangle
                                                x:Name="PreviousColorRectangle"
                                                Grid.Row="1"
                                                Grid.ColumnSpan="2"
                                                VerticalAlignment="Stretch"
                                                RadiusX="{Binding Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}, Source={ThemeResource ControlCornerRadius}}"
                                                RadiusY="{Binding Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}, Source={ThemeResource ControlCornerRadius}}"
                                                Visibility="Collapsed" />
                                            <Rectangle
                                                x:Name="BorderRectangle"
                                                Grid.RowSpan="2"
                                                Grid.ColumnSpan="2"
                                                RadiusX="{Binding Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}, Source={ThemeResource ControlCornerRadius}}"
                                                RadiusY="{Binding Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}, Source={ThemeResource ControlCornerRadius}}"
                                                Style="{StaticResource ColorPickerBorderStyle}" />
                                        </Grid>
                                    </Grid>
                                    <Grid x:Name="ThirdDimensionSliderGrid" Margin="0,12,0,0">
                                        <Rectangle
                                            Height="11"
                                            VerticalAlignment="Center"
                                            RadiusX="{Binding Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}, Source={ThemeResource ControlCornerRadius}}"
                                            RadiusY="{Binding Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}, Source={ThemeResource ControlCornerRadius}}">
                                            <Rectangle.Fill>
                                                <LinearGradientBrush x:Name="ThirdDimensionSliderGradientBrush" />
                                            </Rectangle.Fill>
                                        </Rectangle>
                                        <primitiveContract7Present:ColorPickerSlider
                                            x:Name="ThirdDimensionSlider"
                                            ColorChannel="Value"
                                            IsThumbToolTipEnabled="False"
                                            Maximum="100"
                                            Minimum="0"
                                            Style="{StaticResource ColorPickerSliderStyle}" />
                                    </Grid>
                                    <Grid x:Name="AlphaSliderGrid" Margin="0,12,0,0">
                                        <Rectangle
                                            Height="11"
                                            VerticalAlignment="Center"
                                            RadiusX="{Binding Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}, Source={ThemeResource ControlCornerRadius}}"
                                            RadiusY="{Binding Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}, Source={ThemeResource ControlCornerRadius}}">
                                            <Rectangle.Fill>
                                                <ImageBrush x:Name="AlphaSliderCheckeredBackgroundImageBrush" />
                                            </Rectangle.Fill>
                                        </Rectangle>
                                        <Rectangle
                                            x:Name="AlphaSliderBackgroundRectangle"
                                            Height="11"
                                            VerticalAlignment="Center"
                                            RadiusX="{Binding Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}, Source={ThemeResource ControlCornerRadius}}"
                                            RadiusY="{Binding Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}, Source={ThemeResource ControlCornerRadius}}">
                                            <Rectangle.Fill>
                                                <LinearGradientBrush x:Name="AlphaSliderGradientBrush" />
                                            </Rectangle.Fill>
                                        </Rectangle>
                                        <primitiveContract7Present:ColorPickerSlider
                                            x:Name="AlphaSlider"
                                            ColorChannel="Alpha"
                                            IsThumbToolTipEnabled="False"
                                            Maximum="100"
                                            Minimum="0"
                                            Style="{StaticResource ColorPickerSliderStyle}" />
                                    </Grid>
                                </StackPanel>

                                <StackPanel
                                    x:Name="TextEntryGrid"
                                    Grid.Column="1"
                                    Visibility="Collapsed">
                                    <TextBox
                                        x:Name="HexTextBox"
                                        Width="120"
                                        HorizontalAlignment="Left"
                                        MaxLength="7"
                                        Text="#FFFFFF" />
                                    <StackPanel x:Name="ColorChannelTextInputPanel">
                                        <StackPanel x:Name="RgbPanel">
                                            <StackPanel Margin="0,12,0,0" Orientation="Horizontal">
                                                <TextBox
                                                    x:Name="RedTextBox"
                                                    Width="120"
                                                    MaxLength="3"
                                                    Text="255" />
                                                <TextBlock
                                                    x:Name="RedLabel"
                                                    Margin="8,0,0,0"
                                                    VerticalAlignment="Center"
                                                    Style="{StaticResource BaseTextStyle}"
                                                    Text="Red" />
                                            </StackPanel>
                                            <StackPanel Margin="0,12,0,0" Orientation="Horizontal">
                                                <TextBox
                                                    x:Name="GreenTextBox"
                                                    Width="120"
                                                    MaxLength="3"
                                                    Text="255" />
                                                <TextBlock
                                                    x:Name="GreenLabel"
                                                    Margin="8,0,0,0"
                                                    VerticalAlignment="Center"
                                                    Style="{StaticResource BaseTextStyle}"
                                                    Text="Green" />
                                            </StackPanel>
                                            <StackPanel Margin="0,12,0,0" Orientation="Horizontal">
                                                <TextBox
                                                    x:Name="BlueTextBox"
                                                    Width="120"
                                                    MaxLength="3"
                                                    Text="255" />
                                                <TextBlock
                                                    x:Name="BlueLabel"
                                                    Margin="8,0,0,0"
                                                    VerticalAlignment="Center"
                                                    Style="{StaticResource BaseTextStyle}"
                                                    Text="Blue" />
                                            </StackPanel>
                                        </StackPanel>
                                        <StackPanel
                                            x:Name="HsvPanel"
                                            Grid.Row="1"
                                            Visibility="Collapsed">
                                            <StackPanel Margin="0,12,0,0" Orientation="Horizontal">
                                                <TextBox
                                                    x:Name="HueTextBox"
                                                    Width="120"
                                                    MaxLength="3"
                                                    Text="0" />
                                                <TextBlock
                                                    x:Name="HueLabel"
                                                    Margin="8,0,0,0"
                                                    VerticalAlignment="Center"
                                                    Style="{StaticResource BaseTextStyle}"
                                                    Text="Hue" />
                                            </StackPanel>
                                            <StackPanel Margin="0,12,0,0" Orientation="Horizontal">
                                                <TextBox
                                                    x:Name="SaturationTextBox"
                                                    Width="120"
                                                    MaxLength="3"
                                                    Text="0" />
                                                <TextBlock
                                                    x:Name="SaturationLabel"
                                                    Margin="8,0,0,0"
                                                    VerticalAlignment="Center"
                                                    Style="{StaticResource BaseTextStyle}"
                                                    Text="Saturation" />
                                            </StackPanel>
                                            <StackPanel Margin="0,12,0,0" Orientation="Horizontal">
                                                <TextBox
                                                    x:Name="ValueTextBox"
                                                    Width="120"
                                                    MaxLength="3"
                                                    Text="100" />
                                                <TextBlock
                                                    x:Name="ValueLabel"
                                                    Margin="8,0,0,0"
                                                    VerticalAlignment="Center"
                                                    Style="{StaticResource BaseTextStyle}"
                                                    Text="Value" />
                                            </StackPanel>
                                        </StackPanel>
                                    </StackPanel>
                                    <StackPanel
                                        x:Name="AlphaPanel"
                                        Margin="0,12,0,0"
                                        Orientation="Horizontal">
                                        <TextBox
                                            x:Name="AlphaTextBox"
                                            Width="120"
                                            MaxLength="4"
                                            Text="100%" />
                                        <TextBlock
                                            x:Name="AlphaLabel"
                                            Margin="8,0,0,0"
                                            VerticalAlignment="Center"
                                            Style="{StaticResource BaseTextStyle}"
                                            Text="Opacity" />
                                    </StackPanel>
                                </StackPanel>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>

    <cmControls:ModalPagePresenter
        x:Name="Presenter"
        Title="{core:Localizer Key=ExportGlyphsHeader/Text}"
        CloseClicked="{x:Bind Hide}"
        TitleBarHeight="{x:Bind TitleBarHeight, Mode=OneWay}"
        d:TitleBarHeight="32">
        <Grid x:Name="LayoutRoot">

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

            <Grid
                x:Name="ContentPanel"
                Grid.Row="2"
                ColumnSpacing="12"
                CornerRadius="8 8 0 0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.8*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <!--  Requires it's own element to enable theme shadows  -->
                <Border x:Name="ContentBackground" Grid.ColumnSpan="2" />

                <!--  Options Scroller  -->
                <ScrollViewer x:Name="ContentScroller">
                    <StackPanel
                        x:Name="OptionsPanel"
                        Margin="0 12 0 0"
                        Padding="20 0 20 40"
                        ChildrenTransitions="{x:Bind GetRepositionCollection(ViewModel.AllowAnimation), Mode=OneWay}">

                        <cmControls:ContentGroup x:Uid="PrintDataHeader" d:Text="{core:Localizer Key=PrintDataHeader/Text}">
                            <Button Margin="0 2 0 8" Style="{StaticResource ThemeTextBlockButtonStyle}">
                                <Button.Content>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock
                                            x:Uid="PrintCharacterFilterContent"
                                            OpticalMarginAlignment="TrimSideBearings"
                                            d:Text="{core:Localizer Key=PrintCharacterFilterContent/Text}" />
                                        <TextBlock
                                            Margin="4 2 0 0"
                                            VerticalAlignment="Center"
                                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                            FontSize="12"
                                            IsTextScaleFactorEnabled="False"
                                            Text="&#xE70D;"
                                            TextLineBounds="Tight" />
                                    </StackPanel>
                                </Button.Content>
                                <Button.Flyout>
                                    <Flyout
                                        x:Name="CatFlyout"
                                        core:Properties.UseExpandContractAnimation="True"
                                        FlyoutPresenterStyle="{StaticResource ThemeFlyoutStyle}"
                                        Opened="{x:Bind CatFlyoutContent.OnOpening}">
                                        <cmControls:CategoryFlyout
                                            x:Name="CatFlyoutContent"
                                            AcceptClicked="CategoryFlyout_AcceptClicked"
                                            Flyout="{x:Bind CatFlyout}"
                                            SourceCategories="{x:Bind ViewModel.Categories, Mode=OneWay}" />
                                    </Flyout>
                                </Button.Flyout>
                            </Button>
                            <CheckBox
                                x:Uid="ChkBxHideWhitespace"
                                IsChecked="{x:Bind ViewModel.HideWhitespace, Mode=TwoWay}"
                                Style="{StaticResource DefaultThemeCheckBoxStyle}"
                                d:Content="{core:Localizer Key=ChkBxHideWhitespace/Content}" />

                        </cmControls:ContentGroup>

                        <cmControls:ContentGroup x:Uid="PreferredFormatGroup" d:Text="{core:Localizer Key=PreferredFormatGroup/Text}">

                            <TextBlock
                                x:Uid="ExportGlyphFormatDescription"
                                Style="{StaticResource BaseTextStyle}"
                                d:Text="{core:Localizer Key=ExportGlyphFormatDescription/Text}" />

                            <cmControls:UXComboBox
                                Margin="0 12 0 0"
                                Header="{x:Null}"
                                HeaderTemplate="{x:Null}"
                                ItemsSource="{x:Bind ViewModel.ExportFormats}"
                                SelectedIndex="{x:Bind ViewModel.SelectedFormat, Mode=TwoWay}"
                                Style="{StaticResource DefaultThemeComboBoxStyle}" />

                            <StackPanel Transitions="{x:Bind GetRepositionCollection(ViewModel.AllowAnimation), Mode=OneWay}" Visibility="{x:Bind ViewModel.IsPngFormat, Mode=OneWay}">
                                <TextBlock
                                    x:Uid="PrintViewCharSize"
                                    Margin="0 16 0 0"
                                    Style="{StaticResource HeaderStyle}"
                                    d:Text="{core:Localizer Key=PrintViewCharSize/Text}" />
                                <Slider
                                    x:Name="SldResolution"
                                    HorizontalAlignment="Stretch"
                                    IsThumbToolTipEnabled="True"
                                    Maximum="2048"
                                    Minimum="128"
                                    StepFrequency="64"
                                    Style="{StaticResource DefaultThemeSliderStyle}"
                                    TickFrequency="64"
                                    TickPlacement="Outside"
                                    Value="{x:Bind ViewModel.GlyphSize, Mode=TwoWay}"
                                    d:Value="1024" />
                                <TextBlock Margin="0 0 0 12" Style="{StaticResource BaseTextStyle}">
                                    <Run Text="{x:Bind SldResolution.Value, Mode=OneWay}" d:Text="1024" />
                                    <Run Text="×" />
                                    <Run Text="{x:Bind SldResolution.Value, Mode=OneWay}" d:Text="1024" />
                                </TextBlock>
                            </StackPanel>
                        </cmControls:ContentGroup>

                        <cmControls:ContentGroup x:Uid="ExportColorHeader" d:Text="{core:Localizer Key=ExportColorHeader/Text}">

                            <CheckBox
                                x:Uid="ExportAllowColor"
                                IsChecked="{x:Bind ViewModel.ExportColor, Mode=TwoWay}"
                                Style="{StaticResource DefaultThemeCheckBoxStyle}"
                                d:Content="{core:Localizer Key=ExportAllowColor/Content}" />

                            <muxc:ColorPicker
                                Margin="0 12 0 0"
                                HorizontalAlignment="Left"
                                IsAlphaEnabled="True"
                                Style="{StaticResource ColorPickerStyle1}"
                                Color="{x:Bind ViewModel.GlyphColor, Mode=TwoWay}" />

                        </cmControls:ContentGroup>

                        <cmControls:ContentGroup x:Uid="ExportFileOptionsHeader" d:Text="{core:Localizer Key=ExportFileOptionsHeader/Text}">
                            <CheckBox
                                x:Uid="ExportSkipBlank"
                                IsChecked="{x:Bind ViewModel.SkipBlankGlyphs, Mode=TwoWay}"
                                Style="{StaticResource DefaultThemeCheckBoxStyle}"
                                d:Content="{core:Localizer Key=ExportSkipBlank/Content}" />
                            <cmControls:GlyphNamingControl Margin="0 16 0 4" ViewModel="{x:Bind ViewModel.GlyphNameModel}" />
                        </cmControls:ContentGroup>

                    </StackPanel>
                </ScrollViewer>

                <!--  Page Preview Container  -->
                <Grid
                    x:Name="PreviewContainer"
                    Grid.Column="1"
                    RowSpacing="8"
                    Margin="0 12 0 0"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    core:Properties.UseStandardReposition="{x:Bind ViewModel.AllowAnimation, Mode=OneWay}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <Grid
                        x:Name="PreviewOptions"
                        Grid.Row="0"
                        Padding="12 0 12 0">
                        <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                            <TextBlock
                                VerticalAlignment="Center"
                                Style="{StaticResource BaseTextStyle}"
                                Text="{x:Bind ViewModel.SelectedText, Mode=OneWay}"
                                d:Text="0 of 0 characters selected" />
                        </StackPanel>

                        <cmControls:UXButton
                            Width="42"
                            Height="32"
                            Padding="0"
                            HorizontalAlignment="Right"
                            Click="{x:Bind ViewModel.ToggleTheme}"
                            Style="{StaticResource TransparentButton}">
                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE793;" />
                        </cmControls:UXButton>
                    </Grid>

                    <Grid
                        Grid.Row="1"
                        helpers:CompositionFactory.CornerRadius="4.0"
                        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                        RequestedTheme="{x:Bind ViewModel.PreviewTheme, Mode=OneWay}">
                        <Grid.BackgroundTransition>
                            <BrushTransition Duration="0:0:0.25" />
                        </Grid.BackgroundTransition>
                        <cmControls:CharacterGridView
                            x:Name="ItemsGridView"
                            Grid.Row="1"
                            Padding="20 20 20 40"
                            ContainerContentChanging="ItemsPanel_ContainerContentChanging"
                            IsItemClickEnabled="False"
                            ItemAnnotation="None"
                            ItemContainerTransitions="{StaticResource NoTransitions}"
                            ItemFontFace="{x:Bind _fontMap.ViewModel.SelectedVariant.Face}"
                            ItemFontFamily="{x:Bind _fontMap.ViewModel.FontFamily}"
                            ItemSize="{x:Bind _fontMap.CharGrid.ItemSize}"
                            ItemTemplate="{x:Bind _fontMap.CharGrid.ItemTemplate}"
                            ItemTypography="{x:Bind _fontMap.ViewModel.SelectedTypography}"
                            ItemsSource="{x:Bind ViewModel.Characters, Mode=OneWay}"
                            SelectionMode="None"
                            ShowColorGlyphs="{x:Bind ViewModel.ExportColor, Mode=OneWay}">
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <ItemsWrapGrid HorizontalAlignment="Center" Orientation="Horizontal" />
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
                            <ItemsControl.Foreground>
                                <SolidColorBrush Color="{x:Bind ViewModel.GlyphColor, Mode=OneWay}" />
                            </ItemsControl.Foreground>
                        </cmControls:CharacterGridView>
                    </Grid>
                </Grid>
            </Grid>

            <Grid
                x:Name="ExportRoot"
                Grid.Row="2"
                Grid.RowSpan="2"
                Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                Canvas.ZIndex="1"
                Visibility="{x:Bind ViewModel.IsExporting, Mode=OneWay, FallbackValue=Collapsed}"
                d:Visibility="Collapsed">
                <StackPanel
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Spacing="24">
                    <ProgressRing
                        Width="80"
                        Height="80"
                        Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
                        IsActive="{x:Bind ViewModel.IsExporting, Mode=OneWay}" />
                    <TextBlock
                        HorizontalAlignment="Center"
                        FontSize="24"
                        FontWeight="Bold"
                        Text="{x:Bind ViewModel.ExportMessage, Mode=OneWay}"
                        d:Text="{core:Localizer Key=ExportGlyphsProgressMessage/Text}" />

                    <Button
                        MinWidth="128"
                        HorizontalAlignment="Center"
                        Click="{x:Bind ViewModel.CancelExport}"
                        Content="{core:Localizer Key=Cancel}"
                        Style="{StaticResource AccentButtonStyle}"
                        Visibility="{x:Bind ViewModel.ShowCancelExport, Mode=OneWay, FallbackValue=Collapsed}" />
                </StackPanel>
            </Grid>

            <Grid
                x:Name="BottomBar"
                Grid.Row="3"
                Background="{StaticResource AltHostBrush}">

                <TextBlock
                    x:Name="BottomLabel"
                    Margin="12 0"
                    VerticalAlignment="Center"
                    FontSize="12"
                    Text="{x:Bind ViewModel.Summary, Mode=OneWay}"
                    d:Text="{core:Localizer Key=ExportGlyphSelectedCharacters/Text}" />

                <StackPanel
                    x:Name="BottomButtonOptions"
                    Margin="8"
                    HorizontalAlignment="Right"
                    Orientation="Horizontal"
                    Spacing="8">
                    <Button
                        x:Uid="BtnContinue"
                        MinWidth="128"
                        helpers:FluentAnimation.PointerOver="ContentPresenter.Content"
                        helpers:FluentAnimation.PointerOverOffset="-2"
                        helpers:FluentAnimation.Pressed="ContentPresenter"
                        Click="{x:Bind ViewModel.StartExport}"
                        IsEnabled="{x:Bind ViewModel.CanContinue, Mode=OneWay}"
                        Style="{StaticResource AccentButtonStyle}"
                        d:Content="{core:Localizer Key=BtnContinue/Content}" />
                    <Button
                        MinWidth="128"
                        Click="{x:Bind Hide}"
                        Content="{core:Localizer Key=Cancel}"
                        Style="{StaticResource DefaultThemeButtonStyle}" />
                </StackPanel>
            </Grid>

        </Grid>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ThemeStates">
                <VisualState x:Name="ClassicThemeState">
                    <VisualState.Setters>
                        <Setter Target="BottomBar.Background" Value="Transparent" />
                        <Setter Target="Presenter.Margin" Value="0 0 0 -6" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    </cmControls:ModalPagePresenter>

</views:PopoverViewBase>
