UWP NavigationView 在特定 "fullscreen" 页面上隐藏 NavPane

Question

我有非常基本的带框架的 NavigationView：

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

最简单的事件处理器：

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);
    }

我想获得与 Groove Music 中相同的效果，当您导航至“正在播放”时 - NavPane 处于隐藏状态，并且只有 appbackbutton 可用。我当前的解决方案是在我的 FullscreenPage 上捕获 OnNavigatedTo 和 OnNavigatedFrom 事件并更改 NavigationView.CompactPaneLength 和 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;
    }

它按预期工作，但当 NavigationView 为 "collapsing" 时，会出现一些敏捷的冻结。也许有更好的解决方案？

Answer 1

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

NavigationView 显示在 MainPage 的框架中，它包含用于显示 FirstPage 和 SecondPage 的 ContentFrame。如果要显示PlayPage隐藏NavigationView，比较好的方法是在MainPageFrame中显示PlayPage，如下图

当您从PlayPage返回MainPage时，NavigationView会自动显示，您无需处理NavigationView的复杂动画。请参考以下代码。

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>

这是code sample。

UWP NavigationView 在特定 "fullscreen" 页面上隐藏 NavPane

UWP NavigationView hide NavPane on specific "fullscreen" Page

xaml

uwp

uwp-xaml