<ui:Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:ModernWpf.SampleApp"
    xmlns:local1="clr-namespace:ModernWpf.SampleApp.ControlPages"
    xmlns:converters="clr-namespace:ModernWpf.SampleApp.Common"
    xmlns:muxc="http://schemas.modernwpf.com/2019"
    xmlns:ui="http://schemas.modernwpf.com/2019"
    xmlns:sc="clr-namespace:SamplesCommon;assembly=SamplesCommon"
    x:Class="ModernWpf.SampleApp.ControlPages.NavigationViewPage"
    mc:Ignorable="d">

    <Page.Template>
        <ControlTemplate TargetType="Page">
            <ScrollViewer Background="{TemplateBinding Background}">
                <ContentPresenter Content="{TemplateBinding Content}" Margin="{StaticResource ControlPageContentMargin}" />
            </ScrollViewer>
        </ControlTemplate>
    </Page.Template>
    
    <Page.Resources>
        <converters:MenuItemTemplateSelector x:Key="selector" >
            <converters:MenuItemTemplateSelector.ItemTemplate>
                <DataTemplate>
                    <muxc:NavigationViewItem 
                                Content="{Binding Name, Mode=OneTime}"
                                ToolTipService.ToolTip="{Binding Tooltip, Mode=OneTime}">
                        <muxc:NavigationViewItem.Icon>
                            <ui:SymbolIcon Symbol="{Binding Glyph, Mode=OneTime}" />
                        </muxc:NavigationViewItem.Icon>
                    </muxc:NavigationViewItem>
                </DataTemplate>
            </converters:MenuItemTemplateSelector.ItemTemplate>
        </converters:MenuItemTemplateSelector>
    </Page.Resources>

    <StackPanel ui:ThemeManager.HasThemeResources="True">
        <!-- For the top nav collapsing to left hamburger sample -->
        <!--<VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{x:Bind nvSample2.CompactModeThresholdWidth}" />
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="nvSample2.PaneDisplayMode" Value="Top"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>-->

        <!-- Example on how to override NavView acrylic -->
        <StackPanel.Resources>
            <ui:ResourceDictionaryEx>
                <ui:ResourceDictionaryEx.ThemeDictionaries>
                    <ResourceDictionary x:Key="Light">
                        <SolidColorBrush x:Key="myBrush" Color="{StaticResource SystemBaseHighColor}" />
                        <!--<AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
                                      BackgroundSource="Backdrop"
                                      TintColor="White"
                                      TintOpacity="0.8"
                                      FallbackColor="#F2F2F2" />-->
                    </ResourceDictionary>
                    <ResourceDictionary x:Key="Dark">
                        <SolidColorBrush x:Key="myBrush" Color="{StaticResource SystemBaseHighColor}" />
                        <!--<AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
                                      BackgroundSource="Backdrop"
                                      TintColor="#1F1F1F"
                                      TintOpacity="0.8"
                                      FallbackColor="#1F1F1F" />-->
                    </ResourceDictionary>
                    <ResourceDictionary x:Key="HighContrast">
                        <SolidColorBrush x:Key="myBrush" Color="{ui:ThemeResource SystemColorButtonFaceColor}"/>
                    </ResourceDictionary>
                </ui:ResourceDictionaryEx.ThemeDictionaries>
            </ui:ResourceDictionaryEx>
        </StackPanel.Resources>

        <sc:ControlExample HeaderText="NavigationView with default PaneDisplayMode" 
                           VerticalAlignment="Top" 
                           HorizontalContentAlignment="Stretch">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <TextBlock TextWrapping="Wrap"
                           Margin="0,0,0,12"
                           Text="If you have five or more equally important navigation categories that should prominently appear on larger window widths, consider using a left navigation pane." />

                <muxc:NavigationView x:Name="nvSample5" 
                                            Grid.Row="1" 
                                            Height="460"
                                            Header="This is Header Text" 
                                            PaneDisplayMode="Auto" 
                                            IsTabStop="False" 
                                            SelectionChanged="NavigationView_SelectionChanged5" >
                    <muxc:NavigationView.MenuItems>
                        <muxc:NavigationViewItem Content="Menu Item1" Tag="SamplePage1" Icon="Play" />
                        <muxc:NavigationViewItem Content="Menu Item2" Tag="SamplePage2" Icon="Save" />
                        <muxc:NavigationViewItem Content="Menu Item3" Tag="SamplePage3" Icon="Refresh" />
                        <muxc:NavigationViewItem Content="Menu Item4" Tag="SamplePage4" Icon="Download" />
                    </muxc:NavigationView.MenuItems>
                    <ui:Frame Margin="0,0,0,0" x:Name="contentFrame5" />
                </muxc:NavigationView>
            </Grid>
        </sc:ControlExample>

        <sc:ControlExample HeaderText="NavigationView with PaneDisplayMode set to Top"
                           VerticalAlignment="Top" 
                           HorizontalContentAlignment="Stretch">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>

                <TextBlock TextWrapping="Wrap"
                           Margin="0,0,0,12"
                           Text="If you have equally important navigation categories that should be de-emphasized relative to the content of your app, consider using a top navigation pane." />

                <muxc:NavigationView x:Name="nvSample6"
                                            Grid.Row="1"
                                            Height="460"
                                            PaneDisplayMode="Top"
                                            Header="This is Header Text"
                                            IsTabStop="False" 
                                            SelectionChanged="NavigationView_SelectionChanged6">
                    <muxc:NavigationView.MenuItems>
                        <muxc:NavigationViewItem Content="Menu Item1" Tag="SamplePage1" />
                        <muxc:NavigationViewItem Content="Menu Item2" Tag="SamplePage2" />
                        <muxc:NavigationViewItem Content="Menu Item3" Tag="SamplePage3" />
                        <muxc:NavigationViewItem Content="Menu Item4" Tag="SamplePage3" />
                    </muxc:NavigationView.MenuItems>

                    <ui:Frame x:Name="contentFrame6" />
                </muxc:NavigationView>
            </Grid>
        </sc:ControlExample>

        <sc:ControlExample HeaderText="NavigationView that switches pane orientation based on window width"
                           VerticalAlignment="Top" 
                           HorizontalContentAlignment="Stretch">
            <Grid x:Name="InnerGrid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <TextBlock TextWrapping="Wrap" 
                           Margin="0,0,0,12"
                           Text="If you have equally important navigation categories and limited app content space, consider using a top navigation pane on larger window widths and a minimal left navigation pane on smaller window widths." />

                <muxc:NavigationView x:Name="nvSample2" Grid.Row="1" Height="460"
                                            SelectionChanged="NavigationView_SelectionChanged2"
                                            PaneDisplayMode="Auto" IsTabStop="False" >
                    <muxc:NavigationView.MenuItems>
                        <muxc:NavigationViewItem Content="Menu Item1" Tag="SamplePage1" />
                        <muxc:NavigationViewItem Content="Menu Item2" Tag="SamplePage2" />
                        <muxc:NavigationViewItem Content="Menu Item3" Tag="SamplePage3" />
                        <muxc:NavigationViewItem Content="Menu Item4" Tag="SamplePage4" />
                    </muxc:NavigationView.MenuItems>

                    <muxc:NavigationView.Content>
                        <ui:Frame x:Name="contentFrame2" />
                    </muxc:NavigationView.Content>
                </muxc:NavigationView>
            </Grid>
        </sc:ControlExample>

        <sc:ControlExample HeaderText="Tying selection and focus - Tabs"
                           VerticalAlignment="Top" 
                           HorizontalContentAlignment="Stretch">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <TextBlock TextWrapping="Wrap"
                           Margin="0,0,0,12"
                           Text="For the tabs pattern, ensure that you unify selection and focus by setting the SelectionFollowsFocus property to True. If using a Frame to swap out content, then navigating between items shouldn't be recorded into the Frame's navigation stack. Please see the C# in the sample below to understand how to do this." />

                <muxc:NavigationView x:Name="nvSample7" Grid.Row="1" Height="460"
                                            PaneDisplayMode="Top" SelectionFollowsFocus="Enabled"  SelectionChanged="NavigationView_SelectionChanged7"
                                            IsTabStop="False" IsBackButtonVisible="Collapsed" >
                    <muxc:NavigationView.MenuItems>
                        <muxc:NavigationViewItem Content="Item1" Tag="SamplePage1" />
                        <muxc:NavigationViewItem Content="Item2" Tag="SamplePage2" />
                        <muxc:NavigationViewItem Content="Item3" Tag="SamplePage3" />
                        <muxc:NavigationViewItem Content="Item4" Tag="SamplePage4" />
                    </muxc:NavigationView.MenuItems>
                    <ui:Frame x:Name="contentFrame7" />
                </muxc:NavigationView>
            </Grid>
        </sc:ControlExample>

        <sc:ControlExample HeaderText="Data binding"
                           VerticalAlignment="Top" 
                           HorizontalContentAlignment="Stretch">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <TextBlock TextWrapping="Wrap" 
                           Margin="0,0,0,12"
                           Text="When data binding, use the MenuItemsSource property to bind to an observable collection of items, and do not set the MenuItems property. In addition, set the MenuItemTemplate property and use a NavigationViewItem as the data template. If you wish to bind to the header content as well, use data template selectors via the MenuItemTemplateSelector property. " />

                <muxc:NavigationView x:Name="nvSample4" Grid.Row="2" Height="460"
                                            MenuItemTemplateSelector="{StaticResource selector}"
                                            MenuItemsSource="{Binding Categories, Mode=OneWay}" 
                                            IsTabStop="False" SelectionChanged="NavigationView_SelectionChanged4">
                    <StackPanel>
                        <ui:Frame Margin="0,0,0,0" x:Name="contentFrame4" />
                    </StackPanel>
                </muxc:NavigationView>
            </Grid>
        </sc:ControlExample>

        <sc:ControlExample HeaderText="Hierarchical NavigationView"
                           VerticalAlignment="Top" 
                           HorizontalContentAlignment="Stretch">
            <sc:ControlExample.Options>
                <StackPanel>
                    <TextBlock Text="PanePosition:" Margin="0,12,0,0"/>
                    <RadioButton x:Name="nvSample8Left" GroupName="hierachicalGroup" Content="Left mode" Checked="panePositionLeft_Checked" IsChecked="True"/>
                    <RadioButton x:Name="nvSample8Top" GroupName="hierachicalGroup" Content="Top mode" Checked="panePositionTop_Checked"/>
                    <RadioButton x:Name="nvSample8LeftCompact" GroupName="hierachicalGroup" Content="LeftCompact mode" Checked="panePositionLeftCompact_Checked"/>
                </StackPanel>
            </sc:ControlExample.Options>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <TextBlock TextWrapping="Wrap"
                           Margin="0,0,0,12"
                           Grid.Row="0"/>
                <RichTextBox Style="{StaticResource RichTextBlockStyle}" Margin="0,0,0,15">
                    <local1:NoPaddingFlowDocument>
                        <Paragraph>NavigationView supports hierarchy in Left, LeftCompact, and Top display modes.
                            <LineBreak/>
                        </Paragraph>
                        <Paragraph>
                            In the example below, the "Account" tab navigates to its own page while "Document options" only opens up its subtree of items. This is done by setting the SelectsOnInvoked property to false on the Document options NavigationView Item.
                            <LineBreak />
                        </Paragraph>
                        <Paragraph>
                            In both Top and Left modes, clicking the arrows on NavigationViewItems will expand or collapse the subtree. Clicking or tapping elsewhere on the NavigationViewItem will collapse or expand the subtree.
                            <LineBreak />
                        </Paragraph>
                        <Paragraph>
                            Switch between the three pane display modes on the right.
                        </Paragraph>
                    </local1:NoPaddingFlowDocument>
                </RichTextBox>
                <muxc:NavigationView x:Name="nvSample8" Grid.Row="1" Height="460"
                                        PaneDisplayMode="Left" 
                                        IsTabStop="False" 
                                        SelectionChanged="NavigationView_SelectionChanged8">
                    <muxc:NavigationView.MenuItems>
                        <muxc:NavigationViewItem Content="Home" Icon="Home" ToolTipService.ToolTip="Home" Tag="SamplePage1"/>
                        <muxc:NavigationViewItem Content="Account" Icon="Contact" ToolTipService.ToolTip="Account" Tag="SamplePage2">
                            <muxc:NavigationViewItem.MenuItems>
                                <muxc:NavigationViewItem Content="Mail" Icon="Mail" ToolTipService.ToolTip="Mail" Tag="SamplePage3"/>
                                <muxc:NavigationViewItem Content="Calendar" Icon="Calendar" ToolTipService.ToolTip="Calendar" Tag="SamplePage4"/>
                            </muxc:NavigationViewItem.MenuItems>
                        </muxc:NavigationViewItem>
                        <muxc:NavigationViewItem Content="Document options" Icon="Page2" ToolTipService.ToolTip="Document options" SelectsOnInvoked="False">
                            <muxc:NavigationViewItem.MenuItems>
                                <muxc:NavigationViewItem Content="Create new" Icon="NewFolder" ToolTipService.ToolTip="Create new" Tag="SamplePage5"/>
                                <muxc:NavigationViewItem Content="Upload file" Icon="OpenLocal" ToolTipService.ToolTip="Upload file" Tag="SamplePage6"/>
                            </muxc:NavigationViewItem.MenuItems>
                        </muxc:NavigationViewItem>
                    </muxc:NavigationView.MenuItems>
                    <ui:Frame x:Name="contentFrame8" />
                </muxc:NavigationView>
            </Grid>
        </sc:ControlExample>

        <sc:ControlExample HeaderText="API in action"
                           VerticalAlignment="Top" 
                           HorizontalContentAlignment="Stretch">
            <sc:ControlExample.Options>
                <StackPanel>
                    <CheckBox x:Name="settingsCheck" Content="Settings item visible" IsChecked="True" Click="settingsCheck_Click"/>
                    <CheckBox x:Name="visibleCheck" Content="Back button visible" IsChecked="True" Click="visibleCheck_Click"/>
                    <CheckBox x:Name="enableCheck" Content="Back button enabled" IsChecked="False" Click="enableCheck_Click"/>
                    <CheckBox x:Name="autoSuggestCheck" Content="AutoSuggestBox visible" IsChecked="True" Click="autoSuggestCheck_Click"/>

                    <TextBlock Text="Header:" Margin="0,12,0,0"/>
                    <TextBox x:Name="headerText" Text="Header" AutomationProperties.Name="Header property"/>
                    <CheckBox x:Name="headerCheck" Content="Always show header" IsChecked="True" Click="headerCheck_Click"/>
                    <TextBlock Text="PaneTitle:" Margin="0,12,0,0"/>
                    <TextBox x:Name="paneText" Text="Pane Title" AutomationProperties.Name="PaneTitle property"/>
                    <CheckBox x:Name="panemc_Check" Content="PaneCustomContent visible" IsChecked="False" Click="panemc_Check_Click"/>
                    <CheckBox x:Name="paneFooterCheck" Content="PaneFooter visible" IsChecked="False" Click="paneFooterCheck_Click"/>

                    <TextBlock Text="PanePosition:" Margin="0,12,0,0"/>
                    <RadioButton x:Name="nvSampleLeft" Content="Left" IsChecked="True" Checked="panePositionLeft_Checked"/>
                    <RadioButton x:Name="nvSampleTop" Content="Top" Checked="panePositionTop_Checked" Margin="0,0,0,12"/>

                    <CheckBox x:Name="sffCheck" Content="Keyboard SelectionFollowsFocus" IsChecked="False" Click="sffCheck_Click"/>
                    <CheckBox x:Name="suppressselectionCheck_Checked" Content="Selection of Menu Item2 suppressed" IsChecked="False" Click="suppressselectionCheck_Checked_Click"/>

                </StackPanel>

            </sc:ControlExample.Options>
            <muxc:NavigationView x:Name="nvSample" Height="540" Margin="0,12,0,0"
                                        SelectionChanged="NavigationView_SelectionChanged"
                                        Header="{Binding ElementName=headerText, Path=Text, Mode=TwoWay}"
                                        PaneTitle="{Binding ElementName=paneText, Path=Text, Mode=TwoWay}"
                                        PaneDisplayMode="Left" ExpandedModeThresholdWidth="500"
                                        IsTabStop="False">
                <muxc:NavigationView.MenuItems>
                    <muxc:NavigationViewItem Content="Menu Item1" Tag="SamplePage1" x:Name="SamplePage1Item" >
                        <muxc:NavigationViewItem.Icon>
                            <ui:SymbolIcon Symbol="Play"/>
                        </muxc:NavigationViewItem.Icon>
                    </muxc:NavigationViewItem>
                    <muxc:NavigationViewItemHeader Content="Actions"/>
                    <muxc:NavigationViewItem Content="Menu Item2" Tag="SamplePage2" x:Name="SamplePage2Item" SelectsOnInvoked="True">
                        <muxc:NavigationViewItem.Icon>
                            <ui:SymbolIcon Symbol="Save"/>
                        </muxc:NavigationViewItem.Icon>
                    </muxc:NavigationViewItem>
                    <muxc:NavigationViewItem Content="Menu Item3" Tag="SamplePage3" x:Name="SamplePage3Item">
                        <muxc:NavigationViewItem.Icon>
                            <ui:SymbolIcon Symbol="Refresh"/>
                        </muxc:NavigationViewItem.Icon>
                    </muxc:NavigationViewItem>
                </muxc:NavigationView.MenuItems>

                <muxc:NavigationView.PaneCustomContent>
                    <ui:HyperlinkButton x:Name="PaneHyperlink" Content="More info" Margin="12,0" Visibility="Collapsed" />
                </muxc:NavigationView.PaneCustomContent>

                <muxc:NavigationView.AutoSuggestBox>
                    <ui:AutoSuggestBox QueryIcon="Find" AutomationProperties.Name="Search"/>
                </muxc:NavigationView.AutoSuggestBox>

                <muxc:NavigationView.PaneFooter>
                    <StackPanel x:Name="FooterStackPanel" Orientation="Vertical" Visibility="Collapsed">
                        <muxc:NavigationViewItem Icon="Download" AutomationProperties.Name="download"/>
                        <muxc:NavigationViewItem Icon="Favorite" AutomationProperties.Name="favorite"/>
                    </StackPanel>
                </muxc:NavigationView.PaneFooter>

                <ui:Frame x:Name="contentFrame"/>
            </muxc:NavigationView>
        </sc:ControlExample>
    </StackPanel>
</ui:Page>
