CODEWITHSUNDEEP
xamluwpuwp-xaml
telepzk
telepzk

Reputation: 25

UWP NavigationView hide NavPane on specific "fullscreen" Page

I have very basic NavigationView with frame:

<NavigationView
    x:Name="navigationView"
    AlwaysShowHeader="False"
    SelectionChanged="{x:Bind ViewModel.OnSelectionChanged}">
    <Grid>
        <Frame x:Name="shellFrame" />
    </Grid>
</NavigationView>

And simplest EventHandler:

public async void OnSelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
    {
        var item = args.SelectedItem as NavigationViewItem;

        // I'm using Prism framework, by the way...
        navigationService.Navigate(item.Tag.ToString(), null);
    }

I want to get the same as done in Groove Music, when you navigating to Now Playing - NavPane is hiding, and only appbackbutton is available. My current solution is to catch OnNavigatedTo and OnNavigatedFrom events on my FullscreenPage and change NavigationView.CompactPaneLength and NavigationView.OpenPaneLength:

public override void OnNavigatedTo(NavigatedToEventArgs e, Dictionary<string, object> viewModelState)
    {
        // private field
        // navigationPage = Window.Current.Content as NavigationPage;
        navigationPage.NavigationView.IsPaneToggleButtonVisible = false;
        navigationPage.NavigationView.CompactPaneLength = 0;
        navigationPage.NavigationView.OpenPaneLength = 0;
    }

    public override void OnNavigatingFrom(NavigatingFromEventArgs e, Dictionary<string, object> viewModelState, bool suspending)
    {
        navigationPage.NavigationView.IsPaneToggleButtonVisible = true;
        navigationPage.NavigationView.CompactPaneLength = 64;
        navigationPage.NavigationView.OpenPaneLength = 320;
    }

It's works as expected, but there is some agly freezes, when NavigationView is "collapsing". Maybe there is a better solution?

Upvotes: 2

Views: 1056

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32775

I want to get the same as done in Groove Music, when you navigating to Now Playing

The NavigationView was displayed in the MainPage's Frame and it contained ContentFrame that used to display FirstPage and SecondPage. If you want to display PlayPage and hide NavigationView, the better way is that displayed PlayPage in the MainPageFrame just like the following picture.

enter image description here

When you back from PlayPage to MainPage, the NavigationView will display automatically, and you need not handle the complex animation for NavigationView. Please refer the following code.

public MainPage()
{
    this.InitializeComponent();

}     
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    if (e.NavigationMode == NavigationMode.Back)
    {

        foreach(NavigationViewItemBase item in NvTest.MenuItems)
        {
          if((string) item.Tag == contentFrame.CurrentSourcePageType.Name)
            {
                SelectItem = item;
            }
        }
    }
    Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed;
    base.OnNavigatedTo(e);
}

private NavigationViewItemBase selectItem;

public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged([CallerMemberName] string propertyName = null)
{      
    this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}

public NavigationViewItemBase SelectItem
{
    get
    {
        return selectItem;
    }
    set
    {
        selectItem = value;
        OnPropertyChanged();
    }
}


private void NvTest_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
{
    var selectedItem = (NavigationViewItem)args.SelectedItem;
    string pageName = "App14." + ((string)selectedItem.Tag);
    if ((string)selectedItem.Tag == "PlayPage")
    {
        this.Frame.Navigate(Type.GetType(pageName));

    }
    else
    {
        sender.Header = pageName;
        Type pageType = Type.GetType(pageName);
        contentFrame.Navigate(pageType);              
    }

}

MainPage.xaml

<Grid>
    <NavigationView x:Name="NvTest" SelectionChanged="NvTest_SelectionChanged" SelectedItem="{x:Bind SelectItem,Mode=TwoWay}">
        <NavigationView.MenuItems>
            <NavigationViewItem Icon="Play" Content="Menu Item1" Tag="SamplePage1" />
            <NavigationViewItemSeparator/>
            <NavigationViewItem Icon="Save" Content="Menu Item2" Tag="PlayPage" />
            <NavigationViewItem Icon="Save" Content="Menu Item3" Tag="SamplePage2" />

        </NavigationView.MenuItems>
        <Frame x:Name="contentFrame"/>
    </NavigationView>
</Grid>

This is code sample.

Upvotes: 1

Related Questions