<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
    xmlns:primitives="using:Microsoft.UI.Xaml.Controls.Primitives">

    <ResourceDictionary.MergedDictionaries>
        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
    </ResourceDictionary.MergedDictionaries>

    <Style x:Key="PageScrollViewerStyle" TargetType="ScrollViewer">
        <Setter Property="HorizontalScrollMode" Value="Disabled" />
        <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
    </Style>

    <Style x:Key="PageProgressRingStyle" TargetType="ProgressRing">
        <Setter Property="Width" Value="28" />
        <Setter Property="Height" Value="28" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Center" />
    </Style>

    <Thickness x:Key="PageMargin">20,20,20,12</Thickness>

    <Style x:Key="MUX_NavigationViewItemPresenterStyleWhenOnTopPane" TargetType="primitives:NavigationViewItemPresenter">
        <Setter Property="Foreground" Value="{ThemeResource TopNavigationViewItemForeground}" />
        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="primitives:NavigationViewItemPresenter">
                    <Grid
                        x:Name="LayoutRoot"
                        Background="{TemplateBinding Background}"
                        Control.IsTemplateFocusTarget="True"
                        CornerRadius="{TemplateBinding CornerRadius}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="PointerStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource TopNavigationViewItemBackgroundPointerOver}" />
                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource NavigationViewItemBackgroundPointerOver}" />
                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundPointerOver}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundPointerOver}" />
                                        <Setter Target="Icon.(AnimatedIcon.State)" Value="PointerOver" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource TopNavigationViewItemBackgroundPressed}" />
                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource NavigationViewItemBackgroundPressed}" />
                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundPressed}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundPressed}" />
                                        <Setter Target="Icon.(AnimatedIcon.State)" Value="Pressed" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource ListViewItemBackgroundSelected}" />
                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource NavigationViewItemBackgroundSelected}" />
                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundSelected}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundSelected}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PointerOverSelected">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource ListViewItemBackgroundSelectedPointerOver}" />
                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource NavigationViewItemBackgroundSelectedPointerOver}" />
                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundSelectedPointerOver}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundSelectedPointerOver}" />
                                        <Setter Target="Icon.(AnimatedIcon.State)" Value="PointerOver" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PressedSelected">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource ListViewItemBackgroundSelectedPressed}" />
                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource NavigationViewItemBackgroundSelectedPressed}" />
                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundSelectedPressed}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundSelectedPressed}" />
                                        <Setter Target="Icon.(AnimatedIcon.State)" Value="Pressed" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="DisabledStates">
                                <VisualState x:Name="Enabled" />
                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundDisabled}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundDisabled}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="NavigationViewIconPositionStates">
                                <VisualState x:Name="IconOnLeft" />
                                <VisualState x:Name="IconOnly">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Width" Value="36" />
                                        <Setter Target="LayoutRoot.Height" Value="36" />
                                        <Setter Target="LayoutRoot.Margin" Value="2" />
                                        <Setter Target="IconBox.Margin" Value="10,0" />
                                        <Setter Target="ContentPresenter.Visibility" Value="Collapsed" />
                                        <Setter Target="SelectionIndicatorGrid.Margin" Value="0" />
                                        <Setter Target="ExpandCollapseChevron.Margin" Value="{ThemeResource TopNavigationViewItemIconOnlyExpandChevronMargin}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="ContentOnly">
                                    <VisualState.Setters>
                                        <Setter Target="IconBox.Visibility" Value="Collapsed" />
                                        <Setter Target="ContentPresenter.Margin" Value="{ThemeResource TopNavigationViewItemContentOnlyContentPresenterMargin}" />
                                        <Setter Target="SelectionIndicatorGrid.Margin" Value="12,0,12,4" />
                                        <Setter Target="ExpandCollapseChevron.Margin" Value="{ThemeResource TopNavigationViewItemContentOnlyExpandChevronMargin}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="InfoBadgeStates">
                                <VisualState x:Name="InfoBadgeVisible" />
                                <VisualState x:Name="InfoBadgeCollapsed">
                                    <VisualState.Setters>
                                        <Setter Target="InfoBadgePresenter.Visibility" Value="Collapsed" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ChevronStates">
                                <VisualState x:Name="ChevronHidden" />
                                <VisualState x:Name="ChevronVisibleOpen">
                                    <VisualState.Setters>
                                        <Setter Target="ExpandCollapseChevron.Visibility" Value="Visible" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="ChevronVisibleClosed">
                                    <VisualState.Setters>
                                        <Setter Target="ExpandCollapseChevron.Visibility" Value="Visible" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="PointerChevronStates">
                                <VisualState x:Name="NormalChevronHidden" />
                                <VisualState x:Name="NormalChevronVisibleOpen">
                                    <VisualState.Setters>
                                        <Setter Target="ExpandCollapseChevronIcon.(AnimatedIcon.State)" Value="NormalOn" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="NormalChevronVisibleClosed">
                                    <VisualState.Setters>
                                        <Setter Target="ExpandCollapseChevronIcon.(AnimatedIcon.State)" Value="NormalOff" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PointerOverChevronHidden">
                                    <VisualState.Setters>
                                        <Setter Target="ExpandCollapseChevronIcon.(AnimatedIcon.State)" Value="PointerOverOff" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PointerOverChevronVisibleOpen">
                                    <VisualState.Setters>
                                        <Setter Target="ExpandCollapseChevronIcon.Foreground" Value="{ThemeResource NavigationViewItemForegroundPointerOver}" />
                                        <Setter Target="ExpandCollapseChevronIcon.(AnimatedIcon.State)" Value="PointerOverOn" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PointerOverChevronVisibleClosed">
                                    <VisualState.Setters>
                                        <Setter Target="ExpandCollapseChevronIcon.Foreground" Value="{ThemeResource NavigationViewItemForegroundPointerOver}" />
                                        <Setter Target="ExpandCollapseChevronIcon.(AnimatedIcon.State)" Value="PointerOverOff" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PressedChevronHidden">
                                    <VisualState.Setters>
                                        <Setter Target="ExpandCollapseChevronIcon.(AnimatedIcon.State)" Value="PressedOff" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PressedChevronVisibleOpen">
                                    <VisualState.Setters>
                                        <Setter Target="ExpandCollapseChevronIcon.Foreground" Value="{ThemeResource NavigationViewItemForegroundPressed}" />
                                        <Setter Target="ExpandCollapseChevronIcon.(AnimatedIcon.State)" Value="PressedOn" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PressedChevronVisibleClosed">
                                    <VisualState.Setters>
                                        <Setter Target="ExpandCollapseChevronIcon.Foreground" Value="{ThemeResource NavigationViewItemForegroundPressed}" />
                                        <Setter Target="ExpandCollapseChevronIcon.(AnimatedIcon.State)" Value="PressedOff" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle
                            x:Name="PointerRectangle"
                            Fill="Transparent"
                            Visibility="Collapsed" />
                        <Grid x:Name="ContentGrid">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Viewbox
                                x:Name="IconBox"
                                Width="20"
                                Height="20"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center">
                                <ContentPresenter
                                    x:Name="Icon"
                                    Margin="-2,0,0,0"
                                    AnimatedIcon.State="Normal"
                                    Content="{TemplateBinding Icon}"
                                    Foreground="{TemplateBinding Foreground}" />
                            </Viewbox>
                            <ContentPresenter
                                x:Name="ContentPresenter"
                                Grid.Column="1"
                                Margin="{ThemeResource TopNavigationViewItemContentPresenterMargin}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="Center"
                                AutomationProperties.AccessibilityView="Raw"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                Foreground="{TemplateBinding Foreground}"
                                TextWrapping="NoWrap" />
                            <Grid
                                x:Name="ExpandCollapseChevron"
                                Grid.Column="2"
                                Width="40"
                                Margin="{ThemeResource TopNavigationViewItemExpandChevronMargin}"
                                HorizontalAlignment="Right"
                                Background="Transparent"
                                Visibility="Collapsed">
                                <AnimatedIcon
                                    x:Name="ExpandCollapseChevronIcon"
                                    Width="12"
                                    Height="12"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    AnimatedIcon.State="NormalOff"
                                    AutomationProperties.AccessibilityView="Raw"
                                    Foreground="{ThemeResource NavigationViewItemForeground}"
                                    RenderTransformOrigin="0.5, 0.5">
                                    <animatedvisuals:AnimatedChevronUpDownSmallVisualSource />
                                    <AnimatedIcon.FallbackIconSource>
                                        <FontIconSource
                                            FontFamily="{StaticResource SymbolThemeFontFamily}"
                                            FontSize="{ThemeResource NavigationViewItemExpandedGlyphFontSize}"
                                            Foreground="{ThemeResource NavigationViewItemForeground}"
                                            Glyph="{StaticResource NavigationViewItemExpandedGlyph}" />
                                    </AnimatedIcon.FallbackIconSource>
                                </AnimatedIcon>
                            </Grid>
                            <ContentPresenter
                                x:Name="InfoBadgePresenter"
                                Grid.Column="3"
                                Margin="-16,0,2,13"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Content="{TemplateBinding InfoBadge}" />

                        </Grid>
                        <Grid
                            x:Name="SelectionIndicatorGrid"
                            Margin="16,0,16,4"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Bottom">
                            <Rectangle
                                x:Name="SelectionIndicator"
                                Width="16"
                                Height="3"
                                Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}"
                                Opacity="0"
                                RadiusX="2"
                                RadiusY="2" />
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>
