Search code examples
uwpwindows-10win-universal-appwindows-10-universaluwp-xaml

Hiding the NavigationViewItemHeader based on NavigationView Mode in UWP

I'm using NavigationView component for UWP which introduced with Windows 10 Fall Creators Update Version 1709 (OS build 16299).You can add some headers to nav area written as in the document:

The NavigationView pane can contain:

  • Headers, in the form of NavigationViewItemHeader, for labeling groups of items

I added two header like this:

enter image description here

However, I cannot hide the headers if app view state is changed and NavigationView display mode settled as "Compact". Also, NavigationView have not events like paneClosed or PaneOpened which are included in the SplitPane component.

enter image description here

I tried this code block, however it is not the complete solution:

private void Navigator_DisplayModeChanged(NavigationView sender, NavigationViewDisplayModeChangedEventArgs args)
    {

        if (args.DisplayMode == NavigationViewDisplayMode.Compact && Navigator.IsPaneOpen)
        {
            Other.Visibility = Visibility.Collapsed;
            Main_Operations.Visibility = Visibility.Collapsed;
        }

        else
        {
            Other.Visibility = Visibility.Visible;
            Main_Operations.Visibility = Visibility.Visible;
        }
    }

If you can suggest a solution in this matter, I am delighted. Thank you.

Solution

  • What about old good visibility binding? Something like that (given the fact Navigator is the name of NavigationView itself):

    <NavigationViewItemHeader Content="Header here" Visibility="{Binding ElementName=Navigator,Path=IsPaneOpen}"/>

    Also, you may find this discussion useful: UWP - Prevent NavigationViewItemHeader from being clipped