CODEWITHSUNDEEP
c#uwpuwp-xaml
Artur Siwiak
Artur Siwiak

Reputation: 442

NavigationView and additional settings button

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:

enter image description here

Upvotes: 5

Views: 6960

Answers (3)

kine
kine

Reputation: 1537

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.

Upvotes: 3

Xinpeng
Xinpeng

Reputation: 75

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.

Upvotes: 1

Martin Zikmund
Martin Zikmund

Reputation: 39082

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.

Selection

Upvotes: 12

Related Questions