BasePage.xaml

<Page
    x:Class="Rich_Text_Editor.BasePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:Rich_Text_Editor"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:primitiveContract7Present="using:Microsoft.UI.Xaml.Controls.Primitives?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
    d:Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    muxc:BackdropMaterial.ApplyToRootOrPageBackground="True"
    mc:Ignorable="d">

    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light">
                    <SolidColorBrush x:Key="tabColor" Color="#99FFFFFF" />
                </ResourceDictionary>
                <ResourceDictionary x:Key="Dark">
                    <SolidColorBrush x:Key="tabColor" Color="#26535353" />
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>

            <Style x:Key="TabViewCloseButtonStyle" TargetType="Button">
                <Setter Property="HorizontalContentAlignment" Value="Center" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
                <Setter Property="FontSize" Value="{ThemeResource TabViewItemHeaderCloseFontSize}" />
                <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
                <Setter Property="Width" Value="{ThemeResource TabViewItemHeaderCloseButtonWidth}" />
                <Setter Property="Height" Value="{ThemeResource TabViewItemHeaderCloseButtonHeight}" />
                <Setter Property="Background" Value="{ThemeResource TabViewItemHeaderCloseButtonBackground}" />
                <Setter Property="Foreground" Value="{ThemeResource TabViewItemHeaderCloseButtonForeground}" />
                <Setter Property="FocusVisualMargin" Value="-3" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <ContentPresenter
                                x:Name="ContentPresenter"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                AutomationProperties.AccessibilityView="Raw"
                                Background="{TemplateBinding Background}"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                CornerRadius="3,3,3,3">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewItemHeaderCloseButtonBackgroundPointerOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewItemHeaderCloseButtonForegroundPointerOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewItemHeaderCloseButtonBackgroundPressed}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TabViewItemHeaderCloseButtonForegroundPressed}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </ContentPresenter>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="TabViewStyle1" TargetType="muxc:TabView">
                <Setter Property="VerticalAlignment" Value="Top" />
                <Setter Property="Padding" Value="{ThemeResource TabViewHeaderPadding}" />
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="muxc:TabView">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" MinHeight="44" />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <Grid
                                    x:Name="TabContainerGrid"
                                    Margin="119,0,0,0"
                                    Padding="-123,0,0,0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition x:Name="LeftContentColumn" Width="Auto" />
                                        <ColumnDefinition
                                            x:Name="TabColumn"
                                            Width="Auto"
                                            MinWidth="10" />
                                        <ColumnDefinition x:Name="AddButtonColumn" Width="Auto" />
                                        <ColumnDefinition x:Name="RightContentColumn" Width="*" />
                                    </Grid.ColumnDefinitions>

                                    <ContentPresenter
                                        x:Name="LeftContentPresenter"
                                        Grid.Column="0"
                                        Content="{TemplateBinding TabStripHeader}"
                                        ContentTemplate="{TemplateBinding TabStripHeaderTemplate}" />
                                    <primitiveContract7Present:TabViewListView
                                        x:Name="TabListView"
                                        Grid.Column="1"
                                        Padding="{TemplateBinding Padding}"
                                        AllowDrop="{TemplateBinding AllowDropTabs}"
                                        CanDragItems="{TemplateBinding CanDragTabs}"
                                        CanReorderItems="{TemplateBinding CanReorderTabs}"
                                        ItemTemplate="{TemplateBinding TabItemTemplate}"
                                        ItemTemplateSelector="{TemplateBinding TabItemTemplateSelector}"
                                        ItemsSource="{TemplateBinding TabItemsSource}" />
                                    <Border
                                        Grid.Column="2"
                                        Width="29"
                                        Height="29"
                                        Margin="0,4,0,0"
                                        Padding="{ThemeResource TabViewItemAddButtonContainerPadding}"
                                        VerticalAlignment="Center"
                                        Visibility="{Binding IsAddTabButtonVisible, RelativeSource={RelativeSource Mode=TemplatedParent}}">
                                        <Button
                                            x:Name="AddButton"
                                            Width="30"
                                            Height="30"
                                            Margin="-4,0,0,-4"
                                            Padding="8"
                                            HorizontalAlignment="Stretch"
                                            VerticalAlignment="Stretch"
                                            Background="#00808080"
                                            BorderThickness="0,0,0,0"
                                            Command="{TemplateBinding AddTabButtonCommand}"
                                            CommandParameter="{TemplateBinding AddTabButtonCommandParameter}"
                                            CornerRadius="5,5,5,5"
                                            FontSize="13"
                                            HighContrastAdjustment="None"
                                            IsTextScaleFactorEnabled="False"
                                            UseLayoutRounding="False">
                                            <Button.Content>
                                                <Viewbox Width="13" Height="13">
                                                    <SymbolIcon Symbol="Add" />
                                                </Viewbox>
                                            </Button.Content>
                                            <Button.BorderBrush>
                                                <LinearGradientBrush MappingMode="Absolute" EndPoint="0,3">
                                                    <LinearGradientBrush.RelativeTransform>
                                                        <ScaleTransform CenterY="0.5" ScaleY="-1" />
                                                    </LinearGradientBrush.RelativeTransform>
                                                    <GradientStop Offset="0.33" Color="#29000000" />
                                                    <GradientStop Offset="1" Color="#19000000" />
                                                </LinearGradientBrush>
                                            </Button.BorderBrush>
                                        </Button>
                                    </Border>
                                    <ContentPresenter
                                        x:Name="RightContentPresenter"
                                        Grid.Column="3"
                                        HorizontalAlignment="Stretch"
                                        Content="{TemplateBinding TabStripFooter}"
                                        ContentTemplate="{TemplateBinding TabStripFooterTemplate}" />
                                </Grid>
                                <ContentPresenter x:Name="TabContentPresenter" Grid.Row="1" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="TabViewItemStyle1" TargetType="muxc:TabViewItem">
                <Setter Property="Background" Value="{ThemeResource TabViewItemHeaderBackground}" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
                <Setter Property="MinHeight" Value="{ThemeResource TabViewItemMinHeight}" />
                <Setter Property="BorderThickness" Value="{ThemeResource TabViewItemBorderThickness}" />
                <Setter Property="BorderBrush" Value="{ThemeResource TabViewItemBorderBrush}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="muxc:TabViewItem">
                            <Grid
                                x:Name="LayoutRoot"
                                Height="35"
                                Margin="0,-1,0,0"
                                Padding="{TemplateBinding Padding}"
                                Background="#00B87171"
                                BorderThickness="1"
                                CornerRadius="4">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="LeftColumn" Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition x:Name="RightColumn" Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RenderTransform>
                                    <ScaleTransform x:Name="LayoutRootScale" />
                                </Grid.RenderTransform>
                                <Path
                                    x:Name="LeftRadiusRenderArc"
                                    Width="4"
                                    Height="4"
                                    Margin="-4,0,0,0"
                                    VerticalAlignment="Bottom"
                                    x:Load="False"
                                    Data="M4 0C4 1.19469 3.47624 2.26706 2.64582 3H0C1.65685 3 3 1.65685 3 0H4Z"
                                    Fill="{ThemeResource CardStrokeColorDefault}"
                                    Visibility="Collapsed" />
                                <Path
                                    x:Name="LeftRadiusRenderTriangle"
                                    Margin="-4,0,0,0"
                                    VerticalAlignment="Bottom"
                                    x:Load="False"
                                    Data="M0 4H4V0C4 2.20914 2.20914 4 0 4Z"
                                    Fill="{ThemeResource TabViewItemHeaderBackgroundSelected}"
                                    Visibility="Collapsed" />
                                <Path
                                    x:Name="RightRadiusRenderArc"
                                    Grid.Column="2"
                                    Width="4"
                                    Height="4"
                                    Margin="0,0,-4,0"
                                    VerticalAlignment="Bottom"
                                    x:Load="False"
                                    Data="M0 0C0 1.19469 0.523755 2.26706 1.35418 3H4C2.34315 3 1 1.65685 1 0H0Z"
                                    Fill="{ThemeResource CardStrokeColorDefault}"
                                    Visibility="Collapsed" />
                                <Path
                                    x:Name="RightRadiusRenderTriangle"
                                    Grid.Column="2"
                                    Margin="0,0,-4,0"
                                    VerticalAlignment="Bottom"
                                    x:Load="False"
                                    Data="M4 4H0V0C0 2.20914 1.79086 4 4 4Z"
                                    Fill="{ThemeResource TabViewItemHeaderBackgroundSelected}"
                                    Visibility="Collapsed" />
                                <Border
                                    x:Name="TabSeparator"
                                    Grid.Column="1"
                                    Width="1"
                                    Height="18"
                                    Margin="0,8"
                                    HorizontalAlignment="Right"
                                    BorderBrush="{ThemeResource TabViewItemSeparator}"
                                    BorderThickness="1" />
                                <Grid
                                    x:Name="TabContainer"
                                    Grid.Column="1"
                                    Padding="{ThemeResource TabViewItemHeaderPadding}"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    Control.IsTemplateFocusTarget="True"
                                    CornerRadius="4"
                                    FocusVisualMargin="{TemplateBinding FocusVisualMargin}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition x:Name="IconColumn" Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Viewbox
                                        x:Name="IconBox"
                                        MaxWidth="{ThemeResource TabViewItemHeaderIconSize}"
                                        MaxHeight="{ThemeResource TabViewItemHeaderIconSize}"
                                        Margin="0,2,8,0">
                                        <ContentControl
                                            x:Name="IconControl"
                                            Content="{Binding TabViewTemplateSettings.IconElement, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                            FontSize="10"
                                            Foreground="{ThemeResource TabViewItemIconForeground}"
                                            HighContrastAdjustment="None"
                                            IsTabStop="False" />
                                    </Viewbox>
                                    <ContentPresenter
                                        x:Name="ContentPresenter"
                                        Grid.Column="1"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                        Content="{Binding title}"
                                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                                        ContentTransitions="{TemplateBinding ContentTransitions}"
                                        FontSize="13"
                                        FontWeight="{TemplateBinding FontWeight}"
                                        Foreground="{ThemeResource TabViewItemHeaderForeground}"
                                        HighContrastAdjustment="None"
                                        OpticalMarginAlignment="TrimSideBearings" />
                                    <Button
                                        x:Name="CloseButton"
                                        Grid.Column="2"
                                        Width="24"
                                        Height="24"
                                        Margin="{ThemeResource TabViewItemHeaderCloseMargin}"
                                        Padding="12,4"
                                        FontSize="12"
                                        HighContrastAdjustment="None"
                                        IsTabStop="False"
                                        IsTextScaleFactorEnabled="False"
                                        Style="{ThemeResource TabViewCloseButtonStyle}">
                                        <Button.Content>
                                            <Viewbox Width="12" Height="12">
                                                <SymbolIcon Symbol="Cancel" />
                                            </Viewbox>
                                        </Button.Content>
                                    </Button>
                                </Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundPointerOver}" />
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPointerOver}" />
                                                <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundPointerOver}" />
                                                <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderPointerOverCloseButtonBackground}" />
                                                <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderPointerOverCloseButtonForeground}" />
                                                <Setter Target="TabSeparator.Opacity" Value="0" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <VisualState.Setters>
                                                <Setter Target="TabContainer.Background" Value="{ThemeResource tabColor}" />
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPressed}" />
                                                <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundPressed}" />
                                                <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderPressedCloseButtonBackground}" />
                                                <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderPressedCloseButtonForeground}" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Selected">
                                            <VisualState.Setters>
                                                <Setter Target="LayoutRoot.BorderBrush" Value="#26767676" />
                                                <Setter Target="RightRadiusRenderArc.Visibility" Value="Visible" />
                                                <Setter Target="RightRadiusRenderTriangle.Visibility" Value="Visible" />
                                                <Setter Target="RightRadiusRenderTriangle.Fill" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
                                                <Setter Target="LeftRadiusRenderArc.Visibility" Value="Visible" />
                                                <Setter Target="LeftRadiusRenderTriangle.Visibility" Value="Visible" />
                                                <Setter Target="LeftRadiusRenderTriangle.Fill" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
                                                <Setter Target="TabContainer.Margin" Value="{ThemeResource TabViewSelectedItemHeaderMargin}" />
                                                <Setter Target="TabContainer.BorderBrush" Value="{ThemeResource TabViewSelectedItemBorderBrush}" />
                                                <Setter Target="TabContainer.Background" Value="{ThemeResource tabColor}" />
                                                <Setter Target="TabContainer.Padding" Value="{ThemeResource TabViewSelectedItemHeaderPadding}" />
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundSelected}" />
                                                <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundSelected}" />
                                                <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonBackground}" />
                                                <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonForeground}" />
                                                <Setter Target="LayoutRoot.Background" Value="Transparent" />
                                                <Setter Target="ContentPresenter.FontWeight" Value="SemiBold" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="PointerOverSelected">
                                            <VisualState.Setters>
                                                <Setter Target="LayoutRoot.BorderBrush" Value="#26767676" />
                                                <Setter Target="RightRadiusRenderArc.Visibility" Value="Visible" />
                                                <Setter Target="RightRadiusRenderTriangle.Visibility" Value="Visible" />
                                                <Setter Target="RightRadiusRenderTriangle.Fill" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
                                                <Setter Target="LeftRadiusRenderArc.Visibility" Value="Visible" />
                                                <Setter Target="LeftRadiusRenderTriangle.Visibility" Value="Visible" />
                                                <Setter Target="LeftRadiusRenderTriangle.Fill" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
                                                <Setter Target="TabContainer.Margin" Value="{ThemeResource TabViewSelectedItemHeaderMargin}" />
                                                <Setter Target="TabContainer.BorderBrush" Value="{ThemeResource TabViewSelectedItemBorderBrush}" />
                                                <Setter Target="TabContainer.Background" Value="{ThemeResource tabColor}" />
                                                <Setter Target="TabContainer.Padding" Value="{ThemeResource TabViewSelectedItemHeaderPadding}" />
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundSelected}" />
                                                <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundSelected}" />
                                                <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonBackground}" />
                                                <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonForeground}" />
                                                <Setter Target="LayoutRoot.Background" Value="Transparent" />
                                                <Setter Target="ContentPresenter.FontWeight" Value="SemiBold" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="PressedSelected">
                                            <VisualState.Setters>
                                                <Setter Target="LayoutRoot.BorderBrush" Value="#26767676" />
                                                <Setter Target="RightRadiusRenderArc.Visibility" Value="Visible" />
                                                <Setter Target="RightRadiusRenderTriangle.Visibility" Value="Visible" />
                                                <Setter Target="RightRadiusRenderTriangle.Fill" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
                                                <Setter Target="LeftRadiusRenderArc.Visibility" Value="Visible" />
                                                <Setter Target="LeftRadiusRenderTriangle.Visibility" Value="Visible" />
                                                <Setter Target="LeftRadiusRenderTriangle.Fill" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
                                                <Setter Target="TabContainer.Margin" Value="{ThemeResource TabViewSelectedItemHeaderMargin}" />
                                                <Setter Target="TabContainer.BorderBrush" Value="{ThemeResource TabViewSelectedItemBorderBrush}" />
                                                <Setter Target="TabContainer.Background" Value="{ThemeResource tabColor}" />
                                                <Setter Target="TabContainer.Padding" Value="{ThemeResource TabViewSelectedItemHeaderPadding}" />
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundSelected}" />
                                                <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemIconForegroundSelected}" />
                                                <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonBackground}" />
                                                <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderSelectedCloseButtonForeground}" />
                                                <Setter Target="LayoutRoot.Background" Value="Transparent" />
                                                <Setter Target="ContentPresenter.FontWeight" Value="SemiBold" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="DisabledStates">
                                        <VisualState x:Name="Enabled" />
                                        <VisualState x:Name="Disabled">
                                            <VisualState.Setters>
                                                <Setter Target="TabContainer.Background" Value="{ThemeResource TabViewItemHeaderBackgroundDisabled}" />
                                                <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundDisabled}" />
                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundDisabled}" />
                                                <Setter Target="IconControl.Foreground" Value="{ThemeResource TabViewButtonForegroundDisabled}" />
                                                <Setter Target="CloseButton.Background" Value="{ThemeResource TabViewItemHeaderDisabledCloseButtonBackground}" />
                                                <Setter Target="CloseButton.Foreground" Value="{ThemeResource TabViewItemHeaderDisabledCloseButtonForeground}" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="DataVirtualizationStates">
                                        <VisualState x:Name="DataAvailable" />
                                        <VisualState x:Name="DataPlaceholder" />
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="ReorderHintStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition GeneratedDuration="0:0:0.2" To="NoReorderHint" />
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="NoReorderHint" />
                                        <VisualState x:Name="BottomReorderHint">
                                            <Storyboard>
                                                <DragOverThemeAnimation
                                                    Direction="Bottom"
                                                    ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                                    TargetName="LayoutRoot" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="TopReorderHint">
                                            <Storyboard>
                                                <DragOverThemeAnimation
                                                    Direction="Top"
                                                    ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                                    TargetName="LayoutRoot" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="RightReorderHint">
                                            <Storyboard>
                                                <DragOverThemeAnimation
                                                    Direction="Right"
                                                    ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                                    TargetName="LayoutRoot" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="LeftReorderHint">
                                            <Storyboard>
                                                <DragOverThemeAnimation
                                                    Direction="Left"
                                                    ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                                    TargetName="LayoutRoot" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="DragStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition GeneratedDuration="0:0:0.2" To="NotDragging" />
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="NotDragging" />
                                        <VisualState x:Name="Dragging">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Storyboard.TargetName="LayoutRoot"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="{ThemeResource ListViewItemDragThemeOpacity}"
                                                    Duration="0" />
                                                <DragItemThemeAnimation TargetName="LayoutRoot" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="DraggingTarget" />
                                        <VisualState x:Name="MultipleDraggingPrimary" />
                                        <VisualState x:Name="MultipleDraggingSecondary" />
                                        <VisualState x:Name="DraggedPlaceholder" />
                                        <VisualState x:Name="Reordering">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Storyboard.TargetName="LayoutRoot"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="{ThemeResource ListViewItemReorderThemeOpacity}"
                                                    Duration="0:0:0.240" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="ReorderingTarget">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Storyboard.TargetName="LayoutRoot"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="{ThemeResource ListViewItemReorderTargetThemeOpacity}"
                                                    Duration="0:0:0.240" />
                                                <DoubleAnimation
                                                    Storyboard.TargetName="LayoutRootScale"
                                                    Storyboard.TargetProperty="ScaleX"
                                                    To="{ThemeResource ListViewItemReorderTargetThemeScale}"
                                                    Duration="0:0:0.240" />
                                                <DoubleAnimation
                                                    Storyboard.TargetName="LayoutRootScale"
                                                    Storyboard.TargetProperty="ScaleY"
                                                    To="{ThemeResource ListViewItemReorderTargetThemeScale}"
                                                    Duration="0:0:0.240" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="MultipleReorderingPrimary" />
                                        <VisualState x:Name="ReorderedPlaceholder">
                                            <Storyboard>
                                                <FadeOutThemeAnimation TargetName="LayoutRoot" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="DragOver">
                                            <Storyboard>
                                                <DropTargetItemThemeAnimation TargetName="LayoutRoot" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="IconStates">
                                        <VisualState x:Name="Icon" />
                                        <VisualState x:Name="NoIcon">
                                            <VisualState.Setters>
                                                <Setter Target="IconBox.Visibility" Value="Collapsed" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="TabWidthModes">
                                        <VisualState x:Name="StandardWidth" />
                                        <VisualState x:Name="Compact">
                                            <VisualState.Setters>
                                                <Setter Target="IconBox.Margin" Value="0,0,0,0" />
                                                <Setter Target="ContentPresenter.Visibility" Value="Collapsed" />
                                                <Setter Target="IconColumn.Width" Value="{ThemeResource TabViewItemHeaderIconSize}" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="CloseIconStates">
                                        <VisualState x:Name="CloseButtonVisible" />
                                        <VisualState x:Name="CloseButtonCollapsed">
                                            <VisualState.Setters>
                                                <Setter Target="CloseButton.Visibility" Value="Collapsed" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup>
                                        <VisualState x:Name="ForegroundNotSet" />
                                        <VisualState x:Name="ForegroundSet">
                                            <VisualState.Setters>
                                                <Setter Target="IconControl.Foreground" Value="{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                                <Setter Target="ContentPresenter.Foreground" Value="{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Page.Resources>

    <muxc:TabView
        x:Name="Tabs"
        Margin="0"
        VerticalAlignment="Stretch"
        x:FieldModifier="public"
        AddTabButtonClick="TabView_AddTabButtonClick"
        Background="{x:Null}"
        Style="{StaticResource TabViewStyle1}"
        CloseButtonOverlayMode="OnPointerOver"
        TabCloseRequested="TabView_TabCloseRequested">
        <muxc:TabView.KeyboardAccelerators>
            <KeyboardAccelerator Key="Number1" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number2" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number3" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number4" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number5" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number6" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number7" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number8" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number9" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="NumberPad1" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="NumberPad2" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="NumberPad3" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="NumberPad4" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="NumberPad5" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="NumberPad6" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="NumberPad7" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="NumberPad8" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="NumberPad9" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        </muxc:TabView.KeyboardAccelerators>
        <muxc:TabView.TabStripHeader>
            <Grid
                x:Name="ShellTitlebarInset"
                Width="4"
                Background="Transparent" />
        </muxc:TabView.TabStripHeader>
        <muxc:TabView.TabStripFooter>
            <RelativePanel>
                <Grid
                    x:Name="CustomDragRegion"
                    Background="Transparent"
                    Canvas.ZIndex="1"
                    Margin="0"
                    RelativePanel.AlignLeftWithPanel="True"
                    RelativePanel.AlignTopWithPanel="True"
                    RelativePanel.AlignBottomWithPanel="True"
                    RelativePanel.LeftOf="CompactOverlayBtn" />
                <Button
                    x:Name="CompactOverlayBtn"
                    Margin="0,0,195,0"
                    Canvas.ZIndex="2"
                    Click="CompactOverlayBtn_Click"
                    RelativePanel.AlignRightWithPanel="True"
                    RelativePanel.AlignVerticalCenterWithPanel="True"
                    ToolTipService.ToolTip="Toggle overlay">
                    <FontIcon FontSize="16" Glyph="&#xEE49;" />
                </Button>
            </RelativePanel>
        </muxc:TabView.TabStripFooter>
    </muxc:TabView>
</Page>