NavigationView and additional settings button

Question

I would like to add new item right before settings item (button) in NavigationView (https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/navigationview). I have no idea how to add such functionality

I've tried to modify style of control but after adding button is style i had no behavior as expected. There was no navigation for that element. What I want to achieve:

Answer 1

You can use PaneFooter to place additional content to above the Settings button:

<NavigationView>
    <NavigationView.PaneFooter>
        <StackPanel Orientation="Vertical">
            <NavigationViewItem Icon="SelectAll" Content="Select all" />
            <NavigationViewItem Icon="Help" Content="Help" />
        </StackPanel>
    </NavigationView.PaneFooter>
</NavigationView>

Unfortunately the control will not handle the selection of menu items in this area automatically so the "selected item highlight" (sliding rectangle on the left) will not move to the items in PaneFooter, because the control "doesn't know" about them.

Answer 2

Add a secondary NavigationView into the PaneFooter of the main NavigationView. Then update the selection manually in the Tapped event handlers. Sample code:

<NavigationView x:Name="MainNavigationView"
                IsBackButtonVisible="Collapsed"
                IsPaneToggleButtonVisible="true"
                OpenPaneLength="220"
                CompactModeThresholdWidth="0"
                ExpandedModeThresholdWidth="0"
                MenuItemsSource="{x:Bind PrimaryButtons}"
                IsSettingsVisible="False"
                IsPaneOpen="true">
    <NavigationView.MenuItemTemplate>
        <DataTemplate x:DataType="local:HamburgerMenuButtonInfo">
            <NavigationViewItem Tapped="MainMenuButton_Tapped">
                <ContentPresenter Content="{x:Bind Content}" />
            </NavigationViewItem>
        </DataTemplate>
    </NavigationView.MenuItemTemplate>

    <NavigationView.PaneFooter>
        <NavigationView x:Name="FooterNavigationView"
                        IsBackButtonVisible="Collapsed"
                        IsPaneToggleButtonVisible="False"
                        OpenPaneLength="220"
                        CompactModeThresholdWidth="0"
                        ExpandedModeThresholdWidth="0"
                        IsSettingsVisible="False"
                        MenuItemsSource="{x:Bind SecondaryButtons}"
                        IsPaneOpen="true">
            <NavigationView.MenuItemTemplate>
                <DataTemplate x:DataType="local:HamburgerMenuButtonInfo">
                    <NavigationViewItem Tapped="FooterMenuButton_Tapped">
                        <ContentPresenter Content="{x:Bind Content}" />
                    </NavigationViewItem>
                </DataTemplate>
            </NavigationView.MenuItemTemplate>
        </NavigationView>
    </NavigationView.PaneFooter>
</NavigationView>

Clear selection from the other NavigationView in the Tapped event handlers:

    private void MainMenuButton_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
    {
        FooterNavigationView.SelectedItem = null;
    }

    private void FooterMenuButton_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
    {
        MainNavigationView.SelectedItem = null;
    }

Tapped event handler is not called for the settings item. The easiest workaround is to add your own settings menu item instead of setting IsSettingsVisible to true.