NavigationView and additional settings button

问题

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:

回答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.

回答2:

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.

回答3:

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.

来源：https://stackoverflow.com/questions/48885189/navigationview-and-additional-settings-button

标签

uwp

uwp-xaml