时间戳

首页 > 解决方案 > 在 NavView 导航窗格 UWP 中使用命令栏

windows - 在 NavView 导航窗格 UWP 中使用命令栏

问题描述

我正在努力创建我脑海中的 UI，到目前为止还相当不成功。

我正在尝试创建一个托管我的 NavView 的主页，并且在 NavView 内部我希望有一个命令栏来控制哪些 NavViewItems 是可见的。我已经创建了我想要实现的目标的快速图像。

在我的示例中，我激活了命令栏中的主页按钮，显示

在此处输入图像描述

我希望能够单击文档并让指示器切换到文档并隐藏与 Home 对应的导航项并显示与 Documents 对应的导航项。

最后，我希望在 NavView 窗格紧凑时命令栏折叠，但用户应该能够单击命令栏按钮并展开命令栏以在主页、文档等之间进行切换。

真正寻找最佳起点的任何帮助/建议。

我还在学习 UWP 控件和 Xaml。

标签： windowsxamluwpuwp-xaml

解决方案

我认为您应该使用 aSplitView而不是NavigationView外部，然后在内部Pane使用SplitviewaNavigationView和一些技巧来实现您想要的。

要点是：

  1. 保持NavigationView'sPaneDisplayMode LeftComact
  2. 不要使用PaneToggleButton中的NavigationView来防止用户PaneDisplayMode通过单击来更改它，而是使用自定义的来打开和关闭窗格。
  3. 将 的更改为PaneDisplayMode窗格打开时，并NavigationView在窗格关闭时再次返回。TopLeftComact

这是我在NavigationViewinside中取得的成就Splitview.Pane：

在此处输入图像描述

您可以装饰它并使其在视觉上更令人满意，例如添加一个AutoSuggestBox或Setting按钮，但这是基本的。顺便说一句，不要使用NavigationView'Setting按钮，因为我在这里看到它的行为很奇怪。

XAML：

<SplitView 
    x:Name="Split"
    DisplayMode="CompactInline"
    CompactPaneLength="40">
    <SplitView.Pane>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition />
            </Grid.RowDefinitions>

            <Button
                Click="Button_Click">
                <SymbolIcon Symbol="List"/>
            </Button>

            <NavigationView 
                Grid.Row="1"
                x:Name="NavView"
                PaneDisplayMode="LeftCompact"
                CompactPaneLength="{x:Bind Split.CompactPaneLength}"
                IsBackButtonVisible="Collapsed"
                IsPaneToggleButtonVisible="False"
                IsSettingsVisible="False"
                SelectionChanged="NavView_SelectionChanged">
                <NavigationView.MenuItems>
                    <NavigationViewItem x:Name="HomeItem" Icon="Home" VerticalAlignment="Stretch"/>
                    <NavigationViewItem x:Name="DocumentItem" Icon="Document" />
                    <NavigationViewItem x:Name="PeopleItem" Icon="People" />
                </NavigationView.MenuItems>

                <ContentControl>
                    <ListView 
                        x:Name="ItemList"/>
                </ContentControl>

            </NavigationView>

        </Grid>
    </SplitView.Pane>
</SplitView>

后面的代码：

public sealed partial class MainPage : Page
{
    public List<string> HomeItemList;
    public List<string> DocumentItemList;
    public List<string> PeopleItemList;

    public MainPage()
    {
        InitializeComponent();

        HomeItemList = new List<string> { "HomeItem1", "HomeItem2", "HomeItem3" };
        DocumentItemList = new List<string> { "DocumentItem1", "DocumentItem2", "DocumentItem3" };
        PeopleItemList = new List<string> { "PeopleItem1", "PeopleItem2", "PeopleItem3" };
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        Split.IsPaneOpen = !Split.IsPaneOpen;
        if (Split.IsPaneOpen)
        {
            NavView.PaneDisplayMode = NavigationViewPaneDisplayMode.Top;
        }
        else NavView.PaneDisplayMode = NavigationViewPaneDisplayMode.LeftCompact;
    }

    private void NavView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
    {
        if (args.SelectedItem != null)
        {
            Split.IsPaneOpen = true;
            NavView.PaneDisplayMode = NavigationViewPaneDisplayMode.Top;

            if (sender.SelectedItem == HomeItem)
                ItemList.ItemsSource = HomeItemList;
            else if(sender.SelectedItem == DocumentItem)
                ItemList.ItemsSource = DocumentItemList;
            else if(sender.SelectedItem == PeopleItem)
                ItemList.ItemsSource = PeopleItemList;
        }
    }
}

希望有帮助。

推荐阅读