UWP NavigationView 在特定的“全屏”页面上隐藏 NavPane答案

【问题标题】：UWP NavigationView hide NavPane on specific "fullscreen" PageUWP NavigationView 在特定的“全屏”页面上隐藏 NavPane
【发布时间】：2018-07-18 05:22:59
【问题描述】：

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

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

还有最简单的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);
    }

当您导航到“正在播放”时，我希望获得与 Groove 音乐 中相同的效果 - 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 “崩溃”时，会有一些敏捷的冻结。也许有更好的解决方案？

【问题讨论】：

哦，另一种解决方案是在 NavigationPage (Shell) 中使用 UserControl。将 FullscreenControl（设置更高的 z-index）和 NavigationView 与一个 Grid（在同一行和同一列中）包装起来，并将 FullscreenControl.Visibility 设置为 Collapsed。然后，在需要时，将 Visibillity 更改为 Visible with Animation。我尝试使用多个框架（核心应用框架内的导航框架）但 appbackbutton 崩溃了。
嗨@telepzk，下面的答案对你有用吗？
你好，@nico-zhu-msft，是的，这很好用，但我不能使用这个解决方案，因为我使用的是 Prism MVVM，它用自己的 Facade 包装了 frame.Navige - NavigationService（解决依赖关系等）。 Prism.WPF中有RegionAdapter，处理多帧，但UWP没有这个功能。

标签： xaml uwp uwp-xaml

【解决方案1】：

当您导航到“正在播放”时，我希望获得与 Groove Music 中相同的效果

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。

【讨论】：