Using a Command Bar inside of the NavView Navigation Pane UWP

Question

I'm struggling to create the UI I have in my head and to date have been fairly unsuccessful.

I'm trying to create a Main Page which hosts my NavView and inside of by NavView I wish to have a command bar which will control which NavViewItems are visible. I have created a quick image of what I'm trying to achieve.

In my example I have the home button in the command bar activated which displays

Nav Item Header
Navigation Item 1
etc...

I want to be able to click documents and have the indicator switch to documents and hide the navigation items corresponding to Home and show the navigation items corresponding to Documents.

Finally, I want the command bar to collapse when the NavView pane is compact but the user should be able to click the Command bar button and expand the command bar to change between Home, Documents etc.

Really looking for any help/advice for the best places to start.

I'm still learning the UWP controls and Xaml.

Muzib Muzib · Accepted Answer · 2019-02-24T07:29:46

I think you should use a SplitView instead of NavigationView outside, and then, inside the Pane of the Splitview, use a NavigationView with some trick to achieve what you desired.

Key points are:

Keep the NavigationView's PaneDisplayMode LeftComact
don't use the PaneToggleButton in the NavigationView to prevent user from changing PaneDisplayMode by clicking it, use a custom one instead to open and close pane.
Change the PaneDisplayMode of the NavigationView to Top when pane opens, and backt to LeftComact again when pane closes.

Here is what I have achieved with NavigationView inside Splitview.Pane:

You can decorate it and make it more visually satisfying, like adding an AutoSuggestBox or Setting button, but that's the basic. Btw, don't use the NavigationView's Setting button, as I have seen it behaving strangely here.

XAML:

<SplitView 
    x:Name="Split"
    DisplayMode="CompactInline"
    CompactPaneLength="40">
    <SplitView.Pane>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition />
            </Grid.RowDefinitions>

            <Button
                Click="Button_Click">
                <SymbolIcon Symbol="List"/>
            </Button>

            <NavigationView 
                Grid.Row="1"
                x:Name="NavView"
                PaneDisplayMode="LeftCompact"
                CompactPaneLength="{x:Bind Split.CompactPaneLength}"
                IsBackButtonVisible="Collapsed"
                IsPaneToggleButtonVisible="False"
                IsSettingsVisible="False"
                SelectionChanged="NavView_SelectionChanged">
                <NavigationView.MenuItems>
                    <NavigationViewItem x:Name="HomeItem" Icon="Home" VerticalAlignment="Stretch"/>
                    <NavigationViewItem x:Name="DocumentItem" Icon="Document" />
                    <NavigationViewItem x:Name="PeopleItem" Icon="People" />
                </NavigationView.MenuItems>

                <ContentControl>
                    <ListView 
                        x:Name="ItemList"/>
                </ContentControl>

            </NavigationView>

        </Grid>
    </SplitView.Pane>
</SplitView>

Code behind:

public sealed partial class MainPage : Page
{
    public List<string> HomeItemList;
    public List<string> DocumentItemList;
    public List<string> PeopleItemList;

    public MainPage()
    {
        InitializeComponent();

        HomeItemList = new List<string> { "HomeItem1", "HomeItem2", "HomeItem3" };
        DocumentItemList = new List<string> { "DocumentItem1", "DocumentItem2", "DocumentItem3" };
        PeopleItemList = new List<string> { "PeopleItem1", "PeopleItem2", "PeopleItem3" };
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        Split.IsPaneOpen = !Split.IsPaneOpen;
        if (Split.IsPaneOpen)
        {
            NavView.PaneDisplayMode = NavigationViewPaneDisplayMode.Top;
        }
        else NavView.PaneDisplayMode = NavigationViewPaneDisplayMode.LeftCompact;
    }

    private void NavView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
    {
        if (args.SelectedItem != null)
        {
            Split.IsPaneOpen = true;
            NavView.PaneDisplayMode = NavigationViewPaneDisplayMode.Top;

            if (sender.SelectedItem == HomeItem)
                ItemList.ItemsSource = HomeItemList;
            else if(sender.SelectedItem == DocumentItem)
                ItemList.ItemsSource = DocumentItemList;
            else if(sender.SelectedItem == PeopleItem)
                ItemList.ItemsSource = PeopleItemList;
        }
    }
}

Hope that helps.

Using a Command Bar inside of the NavView Navigation Pane UWP

3 Answers