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

问题描述

我有非常基本的带框架的 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 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“崩溃”时，会有一些敏捷的冻结。也许有更好的解决方案？

标签： xamluwpuwp-xaml

解决方案

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

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

当您从回到时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);              
    }

}

主页.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>

这是代码示例。

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

问题描述

解决方案

推荐阅读