<views:ViewBase
    x:Class="CharacterMap.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:av="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
    xmlns:controls="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:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:views="using:CharacterMap.Views"
    xmlns:vm="using:CharacterMap.ViewModels"
    xmlns:wct="using:Microsoft.Toolkit.Uwp.UI.Controls"
    x:Name="PageRoot"
    Background="{ThemeResource DefaultPageBackgroundBrush}"
    DataContext="{x:Bind ViewModel}"
    mc:Ignorable="d">

    <Control.Resources>
        <!--  Ensure both of these are equal  -->
        <x:Double x:Key="SplitViewPaneWidth">256</x:Double>
        <GridLength x:Key="PaneGridWidth">256</GridLength>

        <MenuFlyout x:Key="TabContextMenu" Opening="TabViewItemContext_Opening" />

        <TransitionCollection x:Name="TabTransitions">
            <ReorderThemeTransition />
            <RepositionThemeTransition IsStaggeringEnabled="False" />
        </TransitionCollection>

        <Flyout
            x:Name="AppMenuFlyout"
            core:Properties.UseExpandContractAnimation="True"
            Placement="BottomEdgeAlignedLeft">
            <Flyout.FlyoutPresenterStyle>
                <Style BasedOn="{StaticResource ThemeFlyoutStyle}" TargetType="FlyoutPresenter">
                    <Setter Property="RenderTransformOrigin" Value="0 0" />
                    <Setter Property="Margin" Value="0 -4 0 0" />
                    <Setter Property="Width" Value="470" />
                    <Setter Property="MaxWidth" Value="470" />
                    <Setter Property="MinWidth" Value="470" />
                </Style>
            </Flyout.FlyoutPresenterStyle>

            <ScrollViewer>
                <Grid>
                    <TextBlock
                        x:Name="MenuShimmy"
                        FontSize="14"
                        FontWeight="SemiBold"
                        Visibility="Collapsed" />

                    <StackPanel Padding="16" Spacing="16">
                        <FrameworkElement.Resources>
                            <Style x:Key="LabelButtonStyle" BasedOn="{StaticResource DefaultThemeButtonStyle}" TargetType="Button">
                                <Setter Property="HorizontalAlignment" Value="Stretch" />
                                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                <Setter Property="VerticalAlignment" Value="Stretch" />
                                <Setter Property="CornerRadius" Value="0" />
                                <Setter Property="FontSize" Value="14" />
                                <Setter Property="Foreground" Value="{ThemeResource AppBarItemPointerOverForegroundThemeBrush}" />
                                <Setter Property="ContentTemplate" Value="{StaticResource LabelButtonContentTemplate}" />
                                <Setter Property="helpers:FluentAnimation.Pressed" Value="ContentRoot" />
                                <Setter Property="helpers:FluentAnimation.PointerOver" Value="LabelRoot" />
                                <Setter Property="helpers:FluentAnimation.PointerDownScale" Value="0.95" />
                            </Style>

                            <Style BasedOn="{StaticResource LabelButtonStyle}" TargetType="Button" />
                        </FrameworkElement.Resources>

                        <TextBlock
                            FontSize="{Binding FontSize, ElementName=MenuShimmy}"
                            FontWeight="{Binding FontWeight, ElementName=MenuShimmy}"
                            Text="{core:Localizer Key='OpenFontButton/Label', ZuneTitle=true}" />
                        <controls:ButtonGroup
                            Height="160"
                            Margin="0 -8 0 0"
                            Orientation="Vertical">
                            <Button Click="{x:Bind OpenFont}">
                                <controls:ButtonLabel
                                    Title="{core:Localizer Key='FontFileMenuItem/Text'}"
                                    Description="{core:Localizer Key='OpenFontDescription/Text'}"
                                    Glyph="&#xE8E5;"
                                    Shortcut="Ctrl+O" />
                            </Button>
                            <Button Click="{x:Bind OpenFolder}">
                                <controls:ButtonLabel
                                    Title="{core:Localizer Key='FontFolderMenuItem/Text'}"
                                    Description="{core:Localizer Key='OpenFolderDescription/Text'}"
                                    Glyph="&#xE838;"
                                    Shortcut="Ctrl+Shift+O" />
                            </Button>
                        </controls:ButtonGroup>

                        <TextBlock
                            FontSize="{Binding FontSize, ElementName=MenuShimmy}"
                            FontWeight="{Binding FontWeight, ElementName=MenuShimmy}"
                            Text="{core:Localizer Key='DoMoreLabel/Text', ZuneTitle=true}"
                            d:Text="Do More" />
                        <controls:ButtonGroup Margin="0 -8 0 0" Orientation="Vertical">
                            <controls:ButtonGroup Height="80">
                                <Button Click="FontCompareButton_Click">
                                    <controls:ButtonLabel
                                        Title="{core:Localizer Key='CompareFontsTitle/Text'}"
                                        Description="{core:Localizer Key='CompareFontsDescription/Text'}"
                                        Glyph="&#xE8F1;"
                                        Shortcut="Ctrl+K" />
                                </Button>
                            </controls:ButtonGroup>
                            <controls:ButtonGroup Height="80">
                                <Button Click="{x:Bind FontMap.OpenCalligraphy}">
                                    <controls:ButtonLabel
                                        Title="{core:Localizer Key='CalligraphyLabel/Text'}"
                                        Description="{core:Localizer Key='CalligraphyDescription/Text'}"
                                        Glyph="&#xEDFB;"
                                        Shortcut="Ctrl+I" />
                                </Button>
                            </controls:ButtonGroup>
                            <controls:ButtonGroup Height="70">
                                <Control.Resources>
                                    <Style BasedOn="{StaticResource LabelButtonStyle}" TargetType="Button">
                                        <Setter Property="FontSize" Value="12" />
                                        <Setter Property="ContentTemplate" Value="{StaticResource CompactLabelButtonContentTemplate}" />
                                        <Setter Property="helpers:FluentAnimation.PointerOver" Value="Icon" />
                                    </Style>
                                </Control.Resources>

                                <Button Command="{Binding CommandToggleFullScreen}">
                                    <controls:ButtonLabel
                                        x:Name="FullscreenLabel"
                                        Title="{core:Localizer Key='FullscreenLabel/Text'}"
                                        Glyph="&#xE740;"
                                        Shortcut="F11" />
                                </Button>

                                <Button Click="{x:Bind ShowPrint}">
                                    <controls:ButtonLabel
                                        Title="{core:Localizer Key='BtnPrint/Content'}"
                                        Glyph="&#xE749;"
                                        Shortcut="Ctrl+P" />
                                </Button>

                                <Button
                                    x:Name="AppMenuSettings"
                                    x:Load="{x:Bind core:Converters.False(ViewModel.IsSecondaryView)}"
                                    Click="BtnSettings_OnClick">
                                    <controls:ButtonLabel Title="{core:Localizer Key='SettingsHeader/Text'}" Glyph="&#xE713;" />
                                </Button>

                                <Button
                                    x:Name="AppMenuAbout"
                                    x:Load="{x:Bind core:Converters.False(ViewModel.IsSecondaryView)}"
                                    Click="{x:Bind ShowAbout}">
                                    <controls:ButtonLabel Title="{core:Localizer Key='SettingsAboutLabel/Text'}" Glyph="&#xE946;" />
                                </Button>

                            </controls:ButtonGroup>
                        </controls:ButtonGroup>
                    </StackPanel>
                </Grid>
            </ScrollViewer>

        </Flyout>

        <MenuFlyout
            x:Key="MainMenuFlyout"
            AreOpenCloseAnimationsEnabled="{x:Bind ViewModel.AllowAnimation, Mode=OneWay}"
            MenuFlyoutPresenterStyle="{StaticResource FontListFlyoutStyle}"
            Placement="BottomEdgeAlignedLeft">
            <MenuFlyoutSubItem Text="{core:Localizer Key='OpenFontButton/Label'}">
                <MenuFlyoutSubItem.Icon>
                    <FontIcon
                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                        FontSize="14"
                        Glyph="&#xED25;" />
                </MenuFlyoutSubItem.Icon>
                <MenuFlyoutItem
                    x:Uid="FontFileMenuItem"
                    Click="{x:Bind OpenFont}"
                    d:Text="Font File">
                    <MenuFlyoutItem.KeyboardAccelerators>
                        <KeyboardAccelerator Key="O" Modifiers="Control" />
                    </MenuFlyoutItem.KeyboardAccelerators>
                </MenuFlyoutItem>
                <MenuFlyoutItem
                    x:Uid="FontFolderMenuItem"
                    Click="{x:Bind OpenFolder}"
                    d:Text="Font Folder">
                    <MenuFlyoutItem.KeyboardAccelerators>
                        <KeyboardAccelerator Key="O" Modifiers="Control,Shift" />
                    </MenuFlyoutItem.KeyboardAccelerators>
                </MenuFlyoutItem>
            </MenuFlyoutSubItem>

            <MenuFlyoutItem x:Uid="CompareFontsTitle" Click="FontCompareButton_Click">
                <MenuFlyoutItem.KeyboardAccelerators>
                    <KeyboardAccelerator Key="K" Modifiers="Control" />
                </MenuFlyoutItem.KeyboardAccelerators>
                <MenuFlyoutItem.Icon>
                    <FontIcon
                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                        FontSize="14"
                        Glyph="&#xE8F1;" />
                </MenuFlyoutItem.Icon>
            </MenuFlyoutItem>

            <MenuFlyoutItem Command="{Binding CommandToggleFullScreen}" Text="{core:Localizer Key='ToggleFullScreenModeButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip'}">
                <MenuFlyoutItem.KeyboardAccelerators>
                    <KeyboardAccelerator Key="F11" />
                </MenuFlyoutItem.KeyboardAccelerators>
                <MenuFlyoutItem.Icon>
                    <FontIcon
                        x:Name="ToggleFullscreenIcon"
                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                        FontSize="14"
                        Glyph="&#xE740;" />
                </MenuFlyoutItem.Icon>
            </MenuFlyoutItem>

            <MenuFlyoutSeparator />

            <MenuFlyoutItem Click="{x:Bind helpers:FlyoutHelper.PrintRequested}" Text="{core:Localizer Key='BtnPrint/Content'}">
                <MenuFlyoutItem.KeyboardAccelerators>
                    <KeyboardAccelerator Key="P" Modifiers="Control" />
                </MenuFlyoutItem.KeyboardAccelerators>
                <MenuFlyoutItem.Icon>
                    <FontIcon
                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                        FontSize="14"
                        Glyph="&#xE749;" />
                </MenuFlyoutItem.Icon>
            </MenuFlyoutItem>

            <MenuFlyoutSeparator />

            <MenuFlyoutItem
                x:Name="CompactAppMenuSettings"
                x:Load="{x:Bind core:Converters.False(ViewModel.IsSecondaryView)}"
                x:Uid="SettingsHeader"
                Click="BtnSettings_OnClick"
                d:Text="{core:Localizer Key=SettingsHeader/Text}">
                <MenuFlyoutItem.Icon>
                    <FontIcon
                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                        FontSize="14"
                        Glyph="&#xE713;" />
                </MenuFlyoutItem.Icon>
            </MenuFlyoutItem>

            <MenuFlyoutItem
                x:Name="CompactAppMenuAbout"
                x:Load="{x:Bind core:Converters.False(ViewModel.IsSecondaryView)}"
                x:Uid="SettingsAboutLabel"
                Click="{x:Bind ShowAbout}"
                d:Text="{core:Localizer Key=SettingsAboutLabel/Text}">
                <MenuFlyoutItem.Icon>
                    <FontIcon
                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                        FontSize="14"
                        Glyph="&#xE946;" />
                </MenuFlyoutItem.Icon>
            </MenuFlyoutItem>
        </MenuFlyout>

        <CollectionViewSource
            x:Key="GroupedFontList"
            x:Name="GroupedFontList"
            IsSourceGrouped="True"
            Source="{Binding GroupedFontList}" />

        <MenuFlyout
            x:Name="FontListFlyout"
            AreOpenCloseAnimationsEnabled="{x:Bind ViewModel.AllowAnimation, Mode=OneWay}"
            MenuFlyoutPresenterStyle="{StaticResource DefaultFlyoutStyle}"
            Placement="Bottom" />

    </Control.Resources>

    <Grid
        x:Name="LayoutRoot"
        AllowDrop="True"
        DragOver="Grid_DragOver"
        Drop="Grid_Drop"
        KeyDown="LayoutRoot_KeyDown">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="{StaticResource PaneGridWidth}" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

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

        <!--  Title Bar Grid  -->
        <ContentPresenter
            x:Name="TitleButtonsPresenter"
            Grid.Row="1"
            Grid.ColumnSpan="2"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Top"
            HorizontalContentAlignment="Stretch"
            Canvas.ZIndex="10"
            Foreground="{ThemeResource ButtonForegroundThemeBrush}">
            <Grid
                Height="{x:Bind TitleBar.TemplateSettings.Height, Mode=OneWay}"
                ChildrenTransitions="{x:Bind GetRepositionCollection(ViewModel.AllowAnimation), Mode=OneWay}"
                d:Height="32">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="{x:Bind TitleBar.TemplateSettings.LeftColumnWidth, Mode=OneWay}" d:Width="0" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="{x:Bind TitleBar.TemplateSettings.RightColumnWidth, Mode=OneWay}" d:Width="0" />
                </Grid.ColumnDefinitions>

                <StackPanel Grid.Column="1" Orientation="Horizontal">

                    <StackPanel x:Name="TitleButtonsPanel" Orientation="Horizontal">
                        <FrameworkElement.RenderTransform>
                            <CompositeTransform />
                        </FrameworkElement.RenderTransform>

                        <Button
                            x:Name="MainMenuButton"
                            x:Uid="MenuButton"
                            Flyout="{StaticResource AppMenuFlyout}"
                            Foreground="{Binding ElementName=TitleButtonsPresenter, Path=Foreground}"
                            Style="{StaticResource TitleBarButtonStyle}"
                            d:ToolTipService.ToolTip="{core:Localizer Key=MenuButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}">
                            <Grid>
                                <FontIcon
                                    x:Name="MainMenuIcon"
                                    x:Load="False"
                                    FontFamily="{StaticResource SymbolThemeFontFamily}"
                                    FontSize="{Binding ElementName=MainMenuButton, Path=FontSize}"
                                    Glyph="&#xE700;" />
                                <muxc:AnimatedIcon
                                    x:Name="AnimatedMenuIcon"
                                    x:Load="False"
                                    Height="16"
                                    muxc:AnimatedIcon.State="{x:Bind MainMenuButton.(muxc:AnimatedIcon.State), Mode=OneWay}"
                                    IsHitTestVisible="False">
                                    <av:AnimatedGlobalNavigationButtonVisualSource />
                                    <muxc:AnimatedIcon.FallbackIconSource>
                                        <muxc:FontIconSource
                                            FontFamily="{StaticResource SymbolThemeFontFamily}"
                                            FontSize="{Binding ElementName=MainMenuButton, Path=FontSize}"
                                            Glyph="&#xE700;" />
                                    </muxc:AnimatedIcon.FallbackIconSource>
                                </muxc:AnimatedIcon>
                            </Grid>
                        </Button>

                        <Button
                            x:Name="OpenFontPaneButton"
                            x:Uid="MenuToggle"
                            core:Properties.ClickAnimation="Text"
                            Click="OpenFontPaneButton_Click"
                            Content="&#xE8C4;"
                            Foreground="{Binding ElementName=TitleButtonsPresenter, Path=Foreground}"
                            Style="{StaticResource TitleBarButtonStyle}"
                            Visibility="Collapsed"
                            d:ToolTipService.ToolTip="{core:Localizer Key=MenuToggle/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}">
                            <Button.KeyboardAccelerators>
                                <KeyboardAccelerator Key="L" Modifiers="Control" />
                            </Button.KeyboardAccelerators>
                        </Button>
                    </StackPanel>

                </StackPanel>

                <controls:UXButton
                    x:Name="ZuneSettingsButton"
                    x:Load="False"
                    Grid.Column="3"
                    HorizontalAlignment="Right"
                    Click="BtnSettings_OnClick"
                    FontSize="9"
                    Foreground="#8A8D90"
                    Style="{StaticResource MapInfoButtonStyle}"
                    Visibility="{x:Bind core:Converters.FalseToVis(ViewModel.IsSecondaryView)}">
                    <TextBlock
                        CharacterSpacing="30"
                        FontWeight="Bold"
                        Text="{core:Localizer Key=SettingsHeader/Text, Casing=Upper}" />
                </controls:UXButton>

                <TextBlock
                    x:Name="ClassicTitleTextLabel"
                    x:Load="False"
                    Grid.Column="2"
                    Margin="8 0 0 0"
                    VerticalAlignment="Center"
                    FontSize="12"
                    FontWeight="Normal"
                    Foreground="{ThemeResource ControlHighlightContrastForegroundBrush}"
                    IsHitTestVisible="False"
                    Style="{StaticResource BaseTextStyle}"
                    Text="{core:Localizer Key=AppName}"
                    TextLineBounds="Tight" />

            </Grid>


        </ContentPresenter>

        <controls:XamlTitleBar
            x:Name="TitleBar"
            Grid.Row="1"
            Grid.ColumnSpan="2"
            MinHeight="{StaticResource MinTitleBarHeight}"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Top"
            AutoUpdateTitle="False"
            Content="{x:Null}"
            IsAutoHeightEnabled="True"
            Tag="{x:Null}" />

        <!--  Main Content  -->
        <controls:ExtendedSplitView
            x:Name="SplitView"
            Grid.Row="1"
            Grid.ColumnSpan="3"
            Background="{x:Null}"
            DisplayMode="Inline"
            EnableAnimation="{x:Bind ViewModel.AllowAnimation, Mode=OneWay}"
            IsPaneOpen="True"
            OpenPaneLength="{StaticResource SplitViewPaneWidth}"
            PaneBackground="{x:Null}">
            <SplitView.Pane>
                <Grid x:Name="PaneRoot">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <Rectangle
                        x:Name="PaneTitleBarSpacer"
                        Height="{x:Bind TitleBar.TemplateSettings.Height, Mode=OneWay}"
                        d:Height="32" />

                    <Border
                        x:Name="PaneRootBackground"
                        Grid.RowSpan="5"
                        Background="Transparent"
                        IsHitTestVisible="False" />

                    <Border
                        x:Name="OverlayPaneRootBackground"
                        x:Load="False"
                        Grid.RowSpan="5"
                        Background="{ThemeResource PaneCollapsedBackgroundBrush}"
                        IsHitTestVisible="False"
                        Visibility="Collapsed" />

                    <!--  Pane Header Commands  -->
                    <Grid
                        x:Name="PaneHeaderGrid"
                        Grid.Row="1"
                        Height="{StaticResource TitleRowHeight}"
                        Margin="0 -1 0 0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <controls:UXButton
                            x:Name="SubMenuButton"
                            Grid.Column="0"
                            Width="{StaticResource TitleRowHeight}"
                            Height="Auto"
                            Padding="4"
                            VerticalAlignment="Stretch"
                            core:Properties.ClickAnimation="FluentContentPresenter|Scale"
                            core:Properties.ClickAnimationOffset="0.8"
                            Flyout="{StaticResource MainMenuFlyout}"
                            Foreground="{ThemeResource AppBarItemForegroundThemeBrush}"
                            Style="{StaticResource MapInfoButtonStyle}"
                            Visibility="Collapsed"
                            d:Label="Open">
                            <FontIcon
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="14"
                                Glyph="&#xE700;" />
                        </controls:UXButton>

                        <controls:UXButton
                            x:Name="FontListFilter"
                            x:Uid="FontListFilter"
                            Grid.Column="1"
                            MinHeight="26"
                            Padding="12 0"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            HorizontalContentAlignment="Left"
                            VerticalContentAlignment="Center"
                            core:Properties.PointerAnimationOffset="2"
                            core:Properties.PointerOverAnimation="DropDownGlyph"
                            core:Properties.SupportAnimatedIcon="False"
                            IsEnabled="{x:Bind ViewModel.CanFilter, Mode=OneWay}"
                            Style="{StaticResource TransparentHintButton}"
                            ToolTipService.Placement="Bottom"
                            Visibility="{x:Bind core:Converters.FalseToVis(ViewModel.IsSecondaryView)}">

                            <StackPanel
                                Margin="0 -4"
                                VerticalAlignment="Center"
                                Orientation="Vertical">
                                <TextBlock
                                    x:Name="GroupLabel"
                                    OpticalMarginAlignment="TrimSideBearings"
                                    Style="{StaticResource FontFilterTitleStyle}"
                                    Text="{x:Bind ViewModel.FilterTitle, Mode=OneWay, Converter={StaticResource FontSelectorTitleConverter}}"
                                    TextLineBounds="Tight"
                                    TextTrimming="CharacterEllipsis"
                                    TextWrapping="NoWrap" />
                                <Border Opacity="0.5">
                                    <TextBlock
                                        x:Name="InlineLabelCount"
                                        Grid.Row="0"
                                        Margin="0 8 0 0"
                                        OpticalMarginAlignment="TrimSideBearings"
                                        Style="{StaticResource StatusBarTextStyle}"
                                        Text="{x:Bind UpdateFontCountLabel(ViewModel.FontList, InlineLabelCount.IsHitTestVisible), Mode=OneWay}"
                                        TextLineBounds="Tight" />
                                </Border>
                            </StackPanel>

                            <Button.Flyout>
                                <controls:FilterFlyout
                                    AreOpenCloseAnimationsEnabled="{x:Bind ViewModel.AllowAnimation, Mode=OneWay}"
                                    CollectionSelectedCommand="{x:Bind CollectionSelectedCommand}"
                                    FilterCommand="{x:Bind FilterCommand}" />
                            </Button.Flyout>
                        </controls:UXButton>

                        <controls:UXButton
                            x:Name="SecondaryHeader"
                            x:Load="{x:Bind ViewModel.IsSecondaryView}"
                            Grid.Column="1"
                            MinHeight="26"
                            Margin="0,0,0,0"
                            Padding="12 0"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="{Binding ElementName=FontListFilter, Path=VerticalAlignment}"
                            HorizontalContentAlignment="Left"
                            VerticalContentAlignment="Center"
                            Click="{x:Bind ViewModel.OpenSourceFolder}"
                            IsHintVisible="False"
                            Style="{StaticResource TransparentHintButton}">

                            <StackPanel
                                Margin="0 -4"
                                VerticalAlignment="Center"
                                Orientation="Vertical">
                                <TextBlock
                                    x:Name="GroupLabel2"
                                    OpticalMarginAlignment="TrimSideBearings"
                                    Style="{StaticResource FontFilterTitleStyle}"
                                    Text="{x:Bind ViewModel.Folder.Source.Name, Mode=OneWay, Converter={StaticResource FontSelectorTitleConverter}}"
                                    TextLineBounds="Tight"
                                    TextTrimming="CharacterEllipsis"
                                    TextWrapping="NoWrap"
                                    d:Text="{core:Localizer Key=OptionAllFonts/Text}" />
                                <Border Opacity="0.5">
                                    <TextBlock
                                        x:Name="InlineLabelCount2"
                                        Grid.Row="0"
                                        Margin="{Binding ElementName=InlineLabelCount, Path=Margin}"
                                        FontSize="{Binding ElementName=InlineLabelCount, Path=FontSize}"
                                        FontWeight="{Binding ElementName=InlineLabelCount, Path=FontWeight}"
                                        OpticalMarginAlignment="TrimSideBearings"
                                        Style="{StaticResource StatusBarTextStyle}"
                                        Text="{x:Bind UpdateFontCountLabel(ViewModel.FontList, InlineLabelCount.IsHitTestVisible), Mode=OneWay}"
                                        TextLineBounds="Tight"
                                        Visibility="{Binding ElementName=InlineLabelCount, Path=Visibility}"
                                        d:Text="123 Font Families" />
                                </Border>
                            </StackPanel>
                        </controls:UXButton>

                    </Grid>

                    <!--  Font List Grid  -->
                    <Grid
                        x:Name="FontListGrid"
                        Grid.Row="2"
                        Loading="FontListGrid_Loading">

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

                        <!--  User Collection Control Panel  -->
                        <Grid
                            x:Name="CollectionControlRow"
                            Grid.Row="0"
                            Height="48"
                            Visibility="{x:Bind core:Converters.IsNotNullToVis(ViewModel.SelectedCollection), Mode=OneWay, FallbackValue=Collapsed}">
                            <Border x:Name="CollectionControlBackground" Background="{ThemeResource DefaultAcrylicBrush}" />
                            <wct:WrapPanel
                                x:Name="CollectionControlItems"
                                Padding="0,0"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                HorizontalSpacing="12"
                                Orientation="Horizontal"
                                VerticalSpacing="4">
                                <Panel.Resources>
                                    <Style BasedOn="{StaticResource MapInfoButtonStyle}" TargetType="controls:UXButton">
                                        <Setter Property="Height" Value="40" />
                                        <Setter Property="VerticalAlignment" Value="Stretch" />
                                        <Setter Property="helpers:FluentAnimation.PointerOver" Value="FluentContentPresenter" />
                                        <Setter Property="helpers:FluentAnimation.PointerOverOffset" Value="-2" />
                                        <Setter Property="Foreground" Value="{ThemeResource AppBarItemForegroundThemeBrush}" />
                                        <Setter Property="ToolTipService.Placement" Value="Bottom" />
                                    </Style>
                                </Panel.Resources>
                                <controls:UXButton
                                    x:Name="RenameButton"
                                    x:Uid="EditCollectionButton"
                                    Click="RenameFontCollection_Click"
                                    d:Label="{core:Localizer Key=EditCollectionButton/Label}"
                                    d:ToolTipService.ToolTip="{core:Localizer Key=EditCollectionButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}">
                                    <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE8AC;" />
                                </controls:UXButton>
                                <controls:UXButton
                                    x:Uid="DeleteCollectionButton"
                                    Click="DeleteCollection_Click"
                                    d:Label="{core:Localizer Key=DeleteCollectionButton/Label}"
                                    d:ToolTipService.ToolTip="{core:Localizer Key=DeleteCollectionButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}">
                                    <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE74D;" />
                                </controls:UXButton>
                                <controls:UXButton
                                    x:Name="CollectionExportButton"
                                    x:Uid="CollectionExportButton"
                                    IsEnabled="{x:Bind core:Converters.TrueTrue(ViewModel.HasFonts, ViewModel.IsCollectionExportEnabled), Mode=OneWay}"
                                    d:Label="{core:Localizer Key=CollectionExportButton/Label}"
                                    d:ToolTipService.ToolTip="{core:Localizer Key=CollectionExportButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip}">
                                    <Button.Flyout>
                                        <MenuFlyout
                                            AreOpenCloseAnimationsEnabled="{x:Bind ViewModel.AllowAnimation, Mode=OneWay}"
                                            MenuFlyoutPresenterStyle="{StaticResource DefaultFlyoutStyle}"
                                            Placement="Bottom">
                                            <MenuFlyoutItem x:Uid="CollectionExportHeader" Style="{StaticResource MenuFlyoutItemReadOnlyHeaderStyle}" />
                                            <MenuFlyoutItem
                                                x:Uid="CollectionExportFolder"
                                                Click="{x:Bind ViewModel.ExportAsFolder}"
                                                Style="{StaticResource ThemeMenuFlyoutItemStyle}"
                                                d:Text="{core:Localizer Key=CollectionExportFolder/Text}" />
                                            <MenuFlyoutItem
                                                x:Uid="CollectionExportZip"
                                                Click="{x:Bind ViewModel.ExportAsZip}"
                                                Style="{StaticResource ThemeMenuFlyoutItemStyle}"
                                                d:Text="{core:Localizer Key=CollectionExportZip/Text}" />
                                        </MenuFlyout>
                                    </Button.Flyout>
                                    <Grid>
                                        <StackPanel
                                            Spacing="4"
                                            Visibility="{x:Bind core:Converters.FalseToVis(ViewModel.IsCollectionExportEnabled), Mode=OneWay}"
                                            d:Visibility="Collapsed">
                                            <muxc:ProgressRing
                                                Width="16"
                                                Height="16"
                                                HorizontalAlignment="Center"
                                                VerticalAlignment="Center"
                                                IsActive="{x:Bind core:Converters.False(ViewModel.IsCollectionExportEnabled), Mode=OneWay}" />
                                            <TextBlock
                                                HorizontalAlignment="Center"
                                                VerticalAlignment="Center"
                                                FontSize="11"
                                                IsTextScaleFactorEnabled="False"
                                                Opacity="0.7"
                                                OpticalMarginAlignment="TrimSideBearings"
                                                Text="{x:Bind ViewModel.CollectionExportProgress, Mode=OneWay}"
                                                TextAlignment="Center"
                                                TextLineBounds="Tight"
                                                d:Text="50%" />
                                        </StackPanel>
                                        <Path
                                            Height="16"
                                            Data="F1 M 38.613281 -43.886719 L 47.167969 -52.500000 L 0.000000 -52.500000 L 0.000000 -60.000000 L 47.167969 -60.000000 L 38.613281 -68.613281 L 43.886719 -73.886719 L 61.523438 -56.250000 L 43.886719 -38.613281 Z M 62.167969 -112.500000 L 120.000000 -112.500000 L 120.000000 -22.500000 L 0.000000 -22.500000 L 0.000000 -45.000000 L 7.500000 -45.000000 L 7.500000 -30.000000 L 112.500000 -30.000000 L 112.500000 -75.000000 L 62.167969 -75.000000 L 47.167969 -90.000000 L 7.500000 -90.000000 L 7.500000 -67.500000 L 0.000000 -67.500000 L 0.000000 -97.500000 L 47.167969 -97.500000 Z M 112.500000 -82.500000 L 112.500000 -105.000000 L 65.332031 -105.000000 L 54.023438 -93.750000 L 65.332031 -82.500000 Z "
                                            Fill="{Binding ElementName=CollectionExportButton, Path=Foreground}"
                                            Stretch="Uniform"
                                            Visibility="{x:Bind ViewModel.IsCollectionExportEnabled, Mode=OneWay}" />
                                    </Grid>

                                </controls:UXButton>
                                <controls:UXButton
                                    Click="CollectionCompareButton_Click"
                                    IsEnabled="{x:Bind ViewModel.HasFonts, Mode=OneWay}"
                                    Label="{core:Localizer Key='CompareShortLabel'}"
                                    ToolTipService.ToolTip="{core:Localizer Key='CompareFontsTitle/Text'}"
                                    d:Label="Compare Fonts">
                                    <FontIcon
                                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                                        FontSize="16"
                                        Glyph="&#xE8F1;" />
                                </controls:UXButton>
                            </wct:WrapPanel>
                        </Grid>

                        <!--  Font List Refresh Grid  -->
                        <Grid
                            x:Name="CollectionRefreshRow"
                            Grid.Row="1"
                            Visibility="{x:Bind ViewModel.IsFontSetExpired, Mode=OneWay, FallbackValue=Collapsed}"
                            d:Visibility="Visible">
                            <Border Background="{StaticResource SystemControlAccentDark1AcrylicElementAccentDark1Brush}" />

                            <Grid
                                ColumnSpacing="12"
                                Margin="12 4"
                                RequestedTheme="Dark">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <TextBlock
                                    x:Uid="SystemFontsExpiredMessage"
                                    Margin="0 -2 0 0"
                                    VerticalAlignment="Center"
                                    Style="{StaticResource CaptionTextBlockStyle}"
                                    d:Text="{core:Localizer Key=SystemFontsExpiredMessage/Text}" />

                                <AppBarButton
                                    Grid.Column="1"
                                    Width="40"
                                    Height="40"
                                    VerticalAlignment="Center"
                                    Click="{x:Bind ViewModel.ReloadFontSet}"
                                    Icon="Refresh"
                                    ToolTipService.Placement="Bottom" />

                            </Grid>
                        </Grid>

                        <AutoSuggestBox
                            x:Name="FontListSearchBox"
                            x:Uid="FontListSearchBox"
                            Grid.Row="2"
                            Margin="0 6 0 0"
                            core:Properties.UseStandardReposition="{x:Bind ViewModel.AllowAnimation, Mode=OneWay}"
                            IsEnabled="{x:Bind ViewModel.CanFilter, Mode=OneWay}"
                            Text="{Binding FontSearch, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                            TextBoxStyle="{StaticResource FontAutoSuggestBoxTextBoxStyle}"
                            d:PlaceholderText="{core:Localizer Key=FontListSearchBox/PlaceholderText}" />

                        <Grid
                            x:Name="FontHelpBlock"
                            x:Load="False"
                            Grid.Row="3"
                            core:Properties.ClipToBounds="True"
                            core:Properties.UseStandardReposition="{x:Bind ViewModel.AllowAnimation, Mode=OneWay}"
                            Opacity="0.7"
                            Visibility="Collapsed"
                            d:Visibility="Collapsed">
                            <TextBlock
                                x:Name="ImportFontHelpBlock"
                                x:Uid="ImportFontHelpBlock"
                                Margin="12"
                                Loading="{x:Bind helpers:CompositionFactory.SetStandardEntrance}"
                                Style="{StaticResource CaptionTextBlockStyle}"
                                d:Text="{core:Localizer Key=ImportFontHelpBlock/Text}" />
                            <TextBlock
                                x:Name="SearchFontHelpBlock"
                                x:Uid="SearchFontHelpBlock"
                                Margin="12"
                                Loading="{x:Bind helpers:CompositionFactory.SetStandardEntrance}"
                                Style="{StaticResource CaptionTextBlockStyle}"
                                Visibility="Collapsed"
                                d:Text="{core:Localizer Key=SearchFontHelpBlock/Text}"
                                d:Visibility="Collapsed" />
                            <TextBlock
                                x:Name="CollectionFontHelpBlock"
                                x:Uid="CollectionFontHelpBlock"
                                Margin="12"
                                Loading="{x:Bind helpers:CompositionFactory.SetStandardEntrance}"
                                Style="{StaticResource CaptionTextBlockStyle}"
                                Visibility="Collapsed"
                                d:Text="{core:Localizer Key=CollectionFontHelpBlock/Text}"
                                d:Visibility="Collapsed" />
                        </Grid>

                        <Border Grid.Row="3" Style="{StaticResource FontListStyle}">
                            <SemanticZoom x:Name="FontsSemanticZoom">
                                <SemanticZoom.ZoomedInView>
                                    <controls:ExtendedListView
                                        x:Name="LstFontFamily"
                                        core:Properties.ItemContainerBackgroundTransition="{StaticResource BackgroundTransition}"
                                        core:Properties.ToolTipPlacement="Bottom"
                                        ContainerContentChanging="LstFontFamily_ContainerContentChanging"
                                        IsItemClickEnabled="False"
                                        IsSwipeEnabled="False"
                                        ItemContainerTransitions="{StaticResource NoTransitions}"
                                        ItemTemplate="{StaticResource FontListItemTemplate}"
                                        ItemsSource="{Binding Source={StaticResource GroupedFontList}}"
                                        SelectedValuePath="Name"
                                        SelectionChanged="LstFontFamily_SelectionChanged"
                                        SelectionMode="Single"
                                        ShowsScrollingPlaceholders="False">
                                        <ListView.GroupStyle>
                                            <GroupStyle
                                                HeaderContainerStyle="{ThemeResource FontListHeaderItem}"
                                                HeaderTemplate="{StaticResource FontListGroupHeaderTemplate}"
                                                HidesIfEmpty="True" />
                                        </ListView.GroupStyle>
                                        <d:ListView.Items>
                                            <ListViewItem>
                                                <Grid ColumnSpacing="12">
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="192" />
                                                        <ColumnDefinition Width="Auto" />
                                                    </Grid.ColumnDefinitions>
                                                    <TextBlock
                                                        Padding="5"
                                                        VerticalAlignment="Center"
                                                        FontFamily="Arial"
                                                        Text="Arial" />
                                                    <TextBlock
                                                        Grid.Column="1"
                                                        Padding="5"
                                                        HorizontalAlignment="Right"
                                                        VerticalAlignment="Center"
                                                        Opacity="0.5"
                                                        Text="14" />
                                                </Grid>
                                            </ListViewItem>
                                            <ListViewItem>
                                                <Grid ColumnSpacing="12">
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="192" />
                                                        <ColumnDefinition Width="Auto" />
                                                    </Grid.ColumnDefinitions>
                                                    <TextBlock
                                                        Padding="5"
                                                        VerticalAlignment="Center"
                                                        FontFamily="Bahnschrift"
                                                        Text="Bahnschrift" />
                                                    <TextBlock
                                                        Grid.Column="1"
                                                        Padding="5"
                                                        HorizontalAlignment="Right"
                                                        VerticalAlignment="Center"
                                                        Opacity="0.5"
                                                        Text="30" />
                                                </Grid>
                                            </ListViewItem>
                                        </d:ListView.Items>
                                    </controls:ExtendedListView>
                                </SemanticZoom.ZoomedInView>
                                <SemanticZoom.ZoomedOutView>
                                    <GridView
                                        x:Name="ZoomGridView"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        ItemContainerStyle="{StaticResource FontListGridViewItemStyle}"
                                        ItemsSource="{Binding CollectionGroups, Source={StaticResource GroupedFontList}}">
                                        <GridView.ItemTemplate>
                                            <DataTemplate>
                                                <Border Width="64" Height="64">
                                                    <TextBlock
                                                        x:Name="Text"
                                                        HorizontalAlignment="Center"
                                                        VerticalAlignment="Center"
                                                        FontSize="32"
                                                        FontWeight="Bold"
                                                        Opacity="{Binding Group.Count, Converter={StaticResource ZoomBackgroundConverter}}"
                                                        Text="{Binding Group.Key}" />
                                                </Border>
                                            </DataTemplate>
                                        </GridView.ItemTemplate>
                                    </GridView>
                                </SemanticZoom.ZoomedOutView>
                            </SemanticZoom>
                        </Border>
                    </Grid>

                    <!--  Pane Footer  -->
                    <Grid
                        Grid.Row="3"
                        Height="32"
                        Background="{x:Bind PaneRoot.Background, Mode=OneWay}">
                        <controls:LabelButton
                            x:Name="FontCompareButton"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Stretch"
                            core:Properties.ToolTip="{core:Localizer Key='CompareFontsTitle/Text'}"
                            Click="FontCompareButton_Click">
                            <controls:LabelButton.IconContent>
                                <FontIcon
                                    Width="45"
                                    MinHeight="12"
                                    VerticalAlignment="Center"
                                    FontFamily="{StaticResource SymbolThemeFontFamily}"
                                    FontSize="14"
                                    Glyph="&#xE8F1;" />
                            </controls:LabelButton.IconContent>
                            <TextBlock
                                x:Uid="CompareFontsTitle"
                                Margin="0 0 12 0"
                                VerticalAlignment="Center"
                                FontSize="13.333" />
                        </controls:LabelButton>

                        <!--<AppBarButton
                            Grid.Column="1"
                            Width="45"
                            BorderThickness="0">
                        -->
                        <!--<FontIcon
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="16"
                                Glyph="&#xE8F1;" />-->
                        <!--
                        </AppBarButton>-->

                        <controls:UXButton
                            x:Name="TitleHidePaneButton"
                            x:Uid="BtnHidePane"
                            Grid.Column="1"
                            Width="45"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Stretch"
                            Click="TogglePane_Click"
                            Style="{StaticResource DefaultThemeAppBarButtonStyle}">
                            <FontIcon
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="18"
                                Glyph="&#xE8A0;" />
                        </controls:UXButton>

                        <controls:UXButton
                            x:Name="TitleShowPaneButton"
                            x:Uid="BtnShowPane"
                            Grid.Column="1"
                            Width="45"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Stretch"
                            Click="TogglePane_Click"
                            Style="{StaticResource DefaultThemeAppBarButtonStyle}"
                            Visibility="Collapsed">
                            <FontIcon
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="18"
                                Glyph="&#xE89F;" />
                        </controls:UXButton>

                    </Grid>

                </Grid>
            </SplitView.Pane>

            <!--  FontMap Grid  -->
            <Grid x:Name="SplitViewContentRoot" Loading="Grid_Loading">
                <Grid.RowDefinitions>
                    <RowDefinition Height="2" d:Height="0" />
                    <RowDefinition Height="Auto" d:Height="32" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="CollapsedTabColumn" Width="0" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="{x:Bind TitleBar.TemplateSettings.RightColumnWidth, Mode=OneWay, FallbackValue=0}" d:Width="150" />
                </Grid.ColumnDefinitions>

                <Rectangle
                    x:Name="NoTabsTitleBarSpacer"
                    x:Load="{x:Bind core:Converters.False(helpers:ResourceHelper.SupportsTabs), FallbackValue=False}"
                    Grid.Row="1"
                    Height="{x:Bind TitleBar.TemplateSettings.Height, Mode=OneWay}"
                    Margin="0 0 0 -8" />

                <Border
                    x:Name="FontsTabContainer"
                    Grid.Row="1"
                    Grid.Column="1"
                    Margin="6 0 0 0">
                    <muxc:TabView
                        x:Name="FontsTabBar"
                        x:Load="False"
                        core:Properties.ChildrenTransitions="{x:Bind GetRepositionCollection(ViewModel.AllowAnimation), Mode=OneWay}"
                        core:Properties.IsTabOpenAnimationEnabled="True"
                        core:Properties.RequireOpenTab="True"
                        core:Properties.ToolTipTemplate="{StaticResource FontListItemToolTipTemplate}"
                        AddTabButtonClick="FontMapContainer_AddTabButtonClick"
                        AllowDropTabs="True"
                        Background="{x:Null}"
                        CanDragTabs="True"
                        Loaded="FontsTabBar_Loaded"
                        SelectedIndex="{x:Bind ViewModel.TabIndex, Mode=TwoWay}"
                        Style="{StaticResource TabViewStyle}"
                        TabCloseRequested="FontMapContainer_TabCloseRequested"
                        TabDroppedOutside="FontsTabBar_TabDroppedOutside"
                        TabItemsSource="{x:Bind ViewModel.Fonts}"
                        Visibility="Collapsed"
                        d:Visibility="Visible">
                        <muxc:TabView.TabItemTemplate>
                            <DataTemplate x:DataType="vm:FontItem" x:DefaultBindMode="OneWay">
                                <muxc:TabViewItem
                                    core:Properties.IsCompact="{x:Bind IsCompact}"
                                    core:Properties.TargetContextFlyout="{StaticResource TabContextMenu}"
                                    DoubleTapped="TabViewItem_DoubleTapped"
                                    IsDoubleTapEnabled="True"
                                    Tag="{Binding ElementName=FontsTabBar, Path=DataContext.AllowFluentAnimation}">
                                    <muxc:TabViewItem.Header>
                                        <Grid ColumnSpacing="8">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="12" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>

                                            <FontIcon
                                                x:Name="CharMapIcon"
                                                x:Load="{x:Bind core:Converters.False(IsTypeRamp)}"
                                                Margin="0 2 0 0"
                                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                FontSize="12"
                                                Glyph="&#xE8A9;" />

                                            <FontIcon
                                                x:Name="TypeRampIcon"
                                                x:Load="{x:Bind IsTypeRamp}"
                                                Margin="0 2 0 0"
                                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                FontSize="11"
                                                Glyph="&#xEA37;" />

                                            <TextBlock
                                                x:Name="TitleText"
                                                x:Load="{x:Bind core:Converters.False(IsCompact)}"
                                                Grid.Column="1"
                                                Margin="0 0 0 0"
                                                VerticalAlignment="Center"
                                                IsHitTestVisible="False"
                                                IsTextScaleFactorEnabled="False"
                                                TextLineBounds="Tight"
                                                TextTrimming="CharacterEllipsis">
                                                <Run FontFamily="{x:Bind core:Converters.GetPreviewFontSource(Font.DefaultVariant), FallbackValue='Segoe UI', TargetNullValue='Segoe UI'}" Text="{x:Bind Font.Name}" />
                                                <Run />
                                                <Run
                                                    FontFamily="{ThemeResource ContentControlThemeFontFamily}"
                                                    FontSize="11.333"
                                                    Foreground="{ThemeResource TextFillColorTertiary}"
                                                    Text="{x:Bind SubTitle}" />
                                            </TextBlock>
                                        </Grid>
                                    </muxc:TabViewItem.Header>
                                </muxc:TabViewItem>
                            </DataTemplate>
                        </muxc:TabView.TabItemTemplate>
                    </muxc:TabView>

                </Border>

                <Border
                    x:Name="TabBorder"
                    x:Load="False"
                    Grid.Row="2"
                    Grid.ColumnSpan="3"
                    Background="{ThemeResource LayerOnMicaBaseAltFillColorDefaultBrush}"
                    BackgroundTransition="{StaticResource RootBackgroundTransition}"
                    BorderBrush="{ThemeResource TabViewSelectedItemBorderBrush}"
                    BorderThickness="1 0 0 0"
                    CornerRadius="6 6 0 0" />

                <views:FontMapView
                    x:Name="FontMap"
                    Grid.Row="2"
                    Grid.ColumnSpan="3"
                    HorizontalAlignment="Stretch"
                    Font="{x:Bind ViewModel.CurrentFont, Mode=OneWay}">
                    <views:FontMapView.TitleRightContent>
                        <Border MinHeight="45">
                            <Border Visibility="{x:Bind core:Converters.FalseToVis(ViewModel.IsSecondaryView)}">
                                <controls:UXButton
                                    x:Name="BtnSettings"
                                    Width="45"
                                    Height="45"
                                    Margin="-6 0 0 0"
                                    VerticalAlignment="Center"
                                    helpers:FluentAnimation.PointerOver="FluentContentPresenter"
                                    helpers:FluentAnimation.PointerOverOffset="-2"
                                    helpers:FluentAnimation.UsePointerOver="True"
                                    Click="BtnSettings_OnClick"
                                    Foreground="{ThemeResource AppBarItemForegroundThemeBrush}"
                                    Label="{core:Localizer Key='SettingsHeader/Text'}"
                                    Style="{StaticResource MapInfoButtonStyle}">
                                    <ToolTipService.ToolTip>
                                        <TextBlock x:Uid="SettingsHeader" d:Text="Settings" />
                                    </ToolTipService.ToolTip>
                                    <Grid>
                                        <FontIcon
                                            x:Name="SettingsButtonIcon"
                                            x:Load="False"
                                            HorizontalAlignment="Center"
                                            VerticalAlignment="Center"
                                            FontFamily="{StaticResource SymbolThemeFontFamily}"
                                            FontSize="16"
                                            Glyph="&#xE713;" />
                                        <muxc:AnimatedIcon
                                            x:Name="SettingsButtonAnimatedIcon"
                                            x:Load="False"
                                            Height="18"
                                            muxc:AnimatedIcon.State="{x:Bind BtnSettings.(muxc:AnimatedIcon.State), Mode=OneWay}"
                                            IsHitTestVisible="False">
                                            <av:AnimatedSettingsVisualSource />
                                            <muxc:AnimatedIcon.FallbackIconSource>
                                                <muxc:FontIconSource
                                                    FontFamily="{StaticResource SymbolThemeFontFamily}"
                                                    FontSize="16"
                                                    Glyph="&#xE713;" />
                                            </muxc:AnimatedIcon.FallbackIconSource>
                                        </muxc:AnimatedIcon>
                                    </Grid>

                                </controls:UXButton>
                            </Border>
                        </Border>
                    </views:FontMapView.TitleRightContent>
                </views:FontMapView>

                <controls:PreviewTip
                    x:Name="PreviewTip"
                    Grid.RowSpan="30"
                    Grid.ColumnSpan="30"
                    Width="Auto"
                    MaxWidth="350"
                    core:Properties.Receiver="{x:Bind FontMap}"
                    core:Properties.Tag="{x:Bind ViewModel}"
                    ContentTemplate="{StaticResource FontListToolTipTemplate}"
                    HorizontalOffset="4"
                    Target="{x:Bind LstFontFamily}"
                    VerticalOffset="2" />

                <controls:PreviewTip
                    x:Name="TabPreviewTip"
                    x:Load="{x:Bind helpers:ResourceHelper.SupportsTabs}"
                    Grid.Row="2"
                    Grid.RowSpan="30"
                    Grid.ColumnSpan="30"
                    core:Properties.Receiver="{x:Bind FontMap}"
                    BorderThickness="1 0 1 1"
                    ContentTemplate="{StaticResource FontListItemToolTipTemplate}"
                    CornerRadius="0 4 4 4"
                    HorizontalOffset="5"
                    Placement="BottomEdgeLeftAligned"
                    Target="{x:Bind FontsTabBar}" />

            </Grid>
        </controls:ExtendedSplitView>

        <!--  Print Presenter  -->
        <Border
            x:Name="PrintPresenter"
            x:DeferLoadStrategy="Lazy"
            Grid.RowSpan="3"
            Grid.ColumnSpan="10"
            d:Visibility="Collapsed" />

        <!--  Settings  -->
        <views:SettingsView
            x:Name="SettingsView"
            x:Load="False"
            Grid.RowSpan="3"
            Grid.ColumnSpan="10"
            TitleBarHeight="{x:Bind TitleBar.TemplateSettings.GridHeight, Mode=OneWay}"
            Visibility="Collapsed" />

        <!--  Startup Exception Root  -->
        <Grid
            x:Name="StartupFailedRoot"
            x:Load="{x:Bind ViewModel.IsLoadingFontsFailed, Mode=OneWay}"
            Grid.Row="1"
            Grid.ColumnSpan="10">
            <StackPanel
                Margin="40"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Spacing="8">
                <TextBlock
                    x:Uid="StartupFailedHeader"
                    Style="{StaticResource TitleTextBlockStyle}"
                    TextAlignment="Center"
                    d:Text="{core:Localizer Key=StartupFailedHeader/Text}" />
                <TextBlock
                    x:Uid="StartupFailedMessage"
                    Style="{StaticResource BodyTextBlockStyle}"
                    TextAlignment="Center"
                    TextWrapping="Wrap"
                    d:Text="{core:Localizer Key=StartupFailedMessage/Text}" />
                <Button
                    x:Uid="StartupFailedButton"
                    MinWidth="200"
                    Margin="0 8 0 0"
                    HorizontalAlignment="Center"
                    Click="{x:Bind ViewModel.ShowStartUpException}"
                    d:Content="{core:Localizer Key=StartupFailedButton/Content}" />
            </StackPanel>
        </Grid>

        <!--  Notification Presenter  -->
        <Grid
            x:Name="NotificationRoot"
            x:Load="False"
            Grid.Row="1"
            Grid.RowSpan="3"
            Grid.ColumnSpan="10"
            d:Visibility="Collapsed">
            <wct:InAppNotification x:Name="DefaultNotification" />
        </Grid>

        <!--  Loading Root  -->
        <Grid
            x:Name="LoadingRoot"
            x:Load="{x:Bind ViewModel.IsLoadingFonts, Mode=OneWay}"
            Grid.Row="1"
            Grid.RowSpan="20"
            Grid.ColumnSpan="20"
            Background="{Binding Background, ElementName=PageRoot}"
            Loading="LoadingRoot_Loading"
            d:Visibility="Collapsed">

            <StackPanel
                x:Name="LoadingStack"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Spacing="24">
                <muxc:ProgressRing
                    Width="80"
                    Height="80"
                    Background="Transparent"
                    Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
                    IsActive="True" />
                <TextBlock
                    HorizontalAlignment="Center"
                    Style="{StaticResource TitleTextStyle}"
                    Text="{core:Localizer Key=TxtLoadingFonts/Text, Casing={StaticResource TitleCasing}}" />
            </StackPanel>

        </Grid>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="WindowPrimaryState">
                <VisualState x:Name="SecondaryViewState" />
            </VisualStateGroup>
            <VisualStateGroup x:Name="ViewStates">
                <VisualState x:Name="CompactViewState">
                    <VisualState.Setters>
                        <Setter Target="SplitView.IsPaneOpen" Value="False" />
                        <Setter Target="SplitView.DisplayMode" Value="Overlay" />
                        <Setter Target="CollapsedTabColumn.Width" Value="40" />
                        <Setter Target="FontsTabContainer.Margin" Value="0 0 -24 0" />
                        <Setter Target="SubMenuButton.Visibility" Value="Visible" />
                        <Setter Target="MainMenuButton.Visibility" Value="Collapsed" />
                        <Setter Target="OpenFontPaneButton.Visibility" Value="Visible" />
                        <Setter Target="TitleHidePaneButton.Visibility" Value="Collapsed" />
                        <Setter Target="TitleShowPaneButton.Visibility" Value="Collapsed" />
                        <Setter Target="OverlayPaneRootBackground.Visibility" Value="Visible" />
                        <Setter Target="PreviewTip.IsEnabled" Value="False" />
                        <Setter Target="LstFontFamily.(core:Properties.ToolTipTemplate)" Value="{StaticResource FontListToolTipTemplate}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="CollapsedViewState">
                    <VisualState.Setters>
                        <Setter Target="SplitView.IsPaneOpen" Value="False" />
                        <Setter Target="SplitView.DisplayMode" Value="Overlay" />
                        <Setter Target="CollapsedTabColumn.Width" Value="40" />
                        <Setter Target="FontsTabContainer.Margin" Value="0 0 -12 0" />
                        <Setter Target="MainMenuButton.Visibility" Value="Collapsed" />
                        <Setter Target="SubMenuButton.Visibility" Value="Visible" />
                        <Setter Target="OpenFontPaneButton.Visibility" Value="Visible" />
                        <Setter Target="TitleHidePaneButton.Visibility" Value="Collapsed" />
                        <Setter Target="TitleShowPaneButton.Visibility" Value="Visible" />
                        <Setter Target="OverlayPaneRootBackground.Visibility" Value="Visible" />
                        <Setter Target="PreviewTip.IsEnabled" Value="False" />
                        <Setter Target="LstFontFamily.(core:Properties.ToolTipTemplate)" Value="{StaticResource FontListToolTipTemplate}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="DefaultViewState">
                    <VisualState.Setters>
                        <Setter Target="SplitView.IsPaneOpen" Value="True" />
                        <Setter Target="SplitView.DisplayMode" Value="Inline" />
                        <Setter Target="TitleHidePaneButton.Visibility" Value="Visible" />
                        <Setter Target="TitleShowPaneButton.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="LoadingStates">
                <VisualState x:Name="FontsLoadingState">
                    <VisualState.Setters>
                        <Setter Target="SplitView.Opacity" Value="0" />
                        <Setter Target="SplitView.IsEnabled" Value="False" />
                        <Setter Target="TitleButtonsPanel.Visibility" Value="Collapsed" />
                        <Setter Target="TitleHidePaneButton.IsEnabled" Value="False" />
                        <Setter Target="TitleShowPaneButton.IsEnabled" Value="False" />
                        <Setter Target="TitleHidePaneButton.Opacity" Value="0" />
                        <Setter Target="TitleShowPaneButton.Opacity" Value="0" />
                        <Setter Target="TitleBar.(Canvas.ZIndex)" Value="9" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="FontsFailedState">
                    <VisualState.Setters>
                        <Setter Target="SplitView.Visibility" Value="Collapsed" />
                        <Setter Target="TitleHidePaneButton.IsEnabled" Value="False" />
                        <Setter Target="TitleShowPaneButton.IsEnabled" Value="False" />
                        <Setter Target="TitleHidePaneButton.Opacity" Value="0" />
                        <Setter Target="TitleShowPaneButton.Opacity" Value="0" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="FontsLoadedState">
                    <VisualState.Setters>
                        <Setter Target="FontMap.Visibility" Value="Visible" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="FontStates">
                <VisualState x:Name="NoFontsState">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{x:Bind core:Converters.False(ViewModel.HasFonts), Mode=OneWay}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="FontHelpBlock.Visibility" Value="Visible" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="HasFontsState" />
            </VisualStateGroup>
            <VisualStateGroup x:Name="FallbackTextStates">
                <VisualState x:Name="SearchFallbackState">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{x:Bind core:Converters.True(ViewModel.IsSearchResults), Mode=OneWay}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ImportFontHelpBlock.Visibility" Value="Collapsed" />
                        <Setter Target="SearchFontHelpBlock.Visibility" Value="Visible" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="CollectionFallbackState">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{x:Bind core:Converters.IsNotNullAndFalse(ViewModel.SelectedCollection, ViewModel.IsSearchResults), Mode=OneWay}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ImportFontHelpBlock.Visibility" Value="Collapsed" />
                        <Setter Target="CollectionFontHelpBlock.Visibility" Value="Visible" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="DesignThemeStates">
                <VisualState x:Name="DefaultThemeState">
                    <VisualState.Setters>
                        <Setter Target="PaneRootBackground.Background" Value="{ThemeResource DefaultHostBrush}" />
                        <Setter Target="MainMenuIcon.Visibility" Value="Visible" />
                        <Setter Target="SettingsButtonIcon.Visibility" Value="Visible" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="FUIThemeState">
                    <VisualState.Setters>
                        <Setter Target="MainMenuButton.(core:Properties.SupportAnimatedIcon)" Value="True" />
                        <Setter Target="BtnSettings.(core:Properties.SupportAnimatedIcon)" Value="True" />
                        <Setter Target="AnimatedMenuIcon.Visibility" Value="Visible" />
                        <Setter Target="SettingsButtonAnimatedIcon.Visibility" Value="Visible" />
                        <Setter Target="PageRoot.Background" Value="Transparent" />
                        <Setter Target="PageRoot.(muxc:BackdropMaterial.ApplyToRootOrPageBackground)" Value="True" />
                        <Setter Target="PaneRootBackground.Visibility" Value="Visible" />
                        <Setter Target="PaneRootBackground.CornerRadius" Value="0" />
                        <Setter Target="OverlayPaneRootBackground.Background" Value="{ThemeResource SystemChromeMediumColor}" />
                        <Setter Target="FontMap.Margin" Value="0 0 2 0" />
                        <Setter Target="FontMap.Padding" Value="0 0 0 4" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="ClassicThemeState">
                    <VisualState.Setters>
                        <Setter Target="MainMenuIcon.Visibility" Value="Visible" />
                        <Setter Target="SettingsButtonIcon.Visibility" Value="Visible" />
                        <Setter Target="TitleButtonsPresenter.(Grid.Row)" Value="0" />
                        <Setter Target="TitleBar.(Grid.Row)" Value="0" />
                        <Setter Target="TitleBar.(Canvas.ZIndex)" Value="9" />
                        <Setter Target="TitleButtonsPresenter.Foreground" Value="White" />
                        <Setter Target="SplitView.(core:Properties.ClipToBounds)" Value="True" />
                        <Setter Target="BtnSettings.Height" Value="Auto" />
                        <Setter Target="BtnSettings.Width" Value="Auto" />
                        <Setter Target="BtnSettings.Margin" Value="0 -4 0 0" />
                        <Setter Target="PaneTitleBarSpacer.MaxHeight" Value="0" />
                        <Setter Target="NoTabsTitleBarSpacer.MaxHeight" Value="0" />
                        <Setter Target="FontMap.Margin" Value="0 0 8 0" />
                        <Setter Target="SplitView.Margin" Value="0 0 0 0" />
                        <Setter Target="PaneRoot.Padding" Value="8 0 0 0" />
                        <Setter Target="ClassicTitleTextLabel.Visibility" Value="Visible" />
                        <Setter Target="InlineLabelCount.Visibility" Value="Collapsed" />
                        <Setter Target="PaneRootBackground.Background" Value="{ThemeResource DefaultPageBackgroundBrush}" />
                        <Setter Target="SubMenuButton.VerticalAlignment" Value="Center" />
                        <Setter Target="FontListFilter.VerticalAlignment" Value="Center" />
                        <Setter Target="RenameButton.Height" Value="26" />
                        <Setter Target="CollectionControlRow.Height" Value="64" />
                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource DefaultPageBackgroundBrush}" />
                        <Setter Target="CollectionControlItems.VerticalAlignment" Value="Center" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="ZuneThemeState">
                    <VisualState.Setters>
                        <Setter Target="MainMenuIcon.Visibility" Value="Visible" />
                        <Setter Target="SettingsButtonIcon.Visibility" Value="Visible" />
                        <Setter Target="BtnSettings.Visibility" Value="Collapsed" />
                        <Setter Target="ZuneSettingsButton.IsHitTestVisible" Value="True" />
                        <Setter Target="MenuShimmy.FontWeight" Value="Light" />
                        <Setter Target="MenuShimmy.FontSize" Value="16" />
                        <Setter Target="InlineLabelCount.IsHitTestVisible" Value="False" />
                        <Setter Target="InlineLabelCount.FontSize" Value="11" />
                        <Setter Target="InlineLabelCount.FontWeight" Value="SemiBold" />
                        <Setter Target="LstFontFamily.FontWeight" Value="SemiBold" />
                        <Setter Target="InlineLabelCount.Margin" Value="0 6 0 0" />
                        <Setter Target="PaneRootBackground.Visibility" Value="Collapsed" />
                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource DefaultPageBackgroundBrush}" />
                        <Setter Target="OverlayPaneRootBackground.Background" Value="White" />
                        <!--<Setter Target="FontListFilter.Foreground" Value="Black" />-->
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="ModalStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition From="ModalOpenState" To="NoModalOpenState">
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TitleButtonsPanel" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
                                <EasingDoubleKeyFrame KeyTime="0" Value="-50" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <BackEase Amplitude="0.3" EasingMode="EaseOut" />
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualTransition>
                    <VisualTransition From="NoModalOpenState" To="ModalOpenState">
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TitleButtonsPanel" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-50">
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <BackEase Amplitude="0.2" EasingMode="EaseIn" />
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="NoModalOpenState" />
                <VisualState x:Name="ModalOpenState">
                    <VisualState.Setters>
                        <Setter Target="TitleButtonsPanel.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="TabStates">
                <VisualState x:Name="TabSupportedState">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{x:Bind helpers:ResourceHelper.SupportsTabs}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="FontsTabBar.(core:Properties.ClipToBounds)" Value="True" />
                        <Setter Target="FontsTabBar.Visibility" Value="Visible" />
                        <Setter Target="TabBorder.Visibility" Value="Visible" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="WindowStates">
                <VisualState x:Name="WindowState" />
                <VisualState x:Name="FullscreenState">
                    <VisualState.Setters>
                        <Setter Target="ToggleFullscreenIcon.Glyph" Value="&#xE73F;" />
                        <Setter Target="FullscreenLabel.Glyph" Value="&#xE73F;" />
                        <Setter Target="FullscreenLabel.Title" Value="{core:Localizer Key='RestoreLabel/Text'}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</views:ViewBase>
