NavigationView and additional settings button

Question

I would like to add new item right before settings item (button) in NavigationView (https://learn.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:

Heya, your question is a little broad. Perhaps attach some code samples and show us what you have tried thus far. — Spook Kruger, Feb 20 '18 at 12:27
I've added some additional info. and graph what i would like to achieve — Artur Siwiak, Feb 20 '18 at 13:30

score 12 · Answer 1 · answered Feb 20 '18 at 16:32

12

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.

answered Feb 20 '18 at 16:32

Martin Zikmund

38,440
7
70
91

This partially solves what i want to achieve. Still, like you mentioned, is not selectable :( – Artur Siwiak Feb 20 '18 at 20:22
@ArturSiwiak I suspect you may have to cutomize your own navigation control if you need this feature.Just like what we did before for humberger menu. Do you mean you have too many settings that one page is not enough? Maybe you can set some navigation directly on your setting page instead. – Barry Wang Feb 21 '18 at 08:10
I think the use case here is rather having a "secondary" navigation menu item area. Many apps use this area to display the logged-in user information for example. – Martin Zikmund Feb 21 '18 at 08:12
@BarryWang-MSFT: Martin gave a great example why I need such functionality. I don't want to add some items in main navigation list because need for those are to be always visible for user. Number of items in main menu can be long (user decides how many items will be there) – Artur Siwiak Feb 21 '18 at 14:14

score 3 · Answer 2 · answered Sep 10 '19 at 09:27

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.

score 1 · Answer 3 · answered Jun 27 '18 at 12:34

I found a glitchy work-around, which is using a

<NavigationViewItemSeparator Height="{x:Bind Monitor.Spacer, Mode=OneWay}"/> between your top and bottom items,

where the bound variable will change whenever a SizeChanged event of the view is fired. The concrete value depends upon your other elements. Minus them from the view height and you are good to go.

I say it's glitchy because when resizing the transition is not smooth.

NavigationView and additional settings button

3 Answers3

Linked