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

Question

我正在努力创建自己脑海中的用户界面，到目前为止，该用户界面还很不成功。

我正在尝试创建一个宿主我的NavView的主页，并由NavView嵌入其中。我希望有一个命令栏，它将控制可见的NavViewItems。我已经创建了一个简短的图像以说明我要实现的目标。

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

• 导航项目标题
• 导航项目1
• 等...

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

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

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

我仍在学习UWP控件和Xaml。

Answer 1

我认为您应该在外部使用SplitView而不是NavigationView，然后， 在Pane的{​​{1}}中，使用Splitview并获得一些技巧，以实现所需的目的。

关键点是：

1. 保留NavigationView的{​​{1}} NavigationView
2. 请勿使用PaneDisplayMode中的LeftComact来防止 用户可以通过单击来更改PaneToggleButton，而改用自定义按钮来打开和关闭窗格。
3. 在以下情况下，将NavigationView中的PaneDisplayMode更改为PaneDisplayMode 窗格打开，并在窗格关闭时再次返回到NavigationView。

这是我在Top中使用LeftComact所获得的成就：

您可以装饰它并使它在视觉上更令人满意，例如添加一个NavigationView或Splitview.Pane按钮，但这是基本操作。顺便说一句，不要使用AutoSuggestBox的{​​{1}}按钮，因为我在这里看到它的表现很奇怪。

XAML：

Setting

代码背后：

NavigationView

希望有帮助。

Answer 2

第一件事是确定您是否要使用NavigationView。在XAML中，控件是由其行为（它们实现的属性和方法）定义的，而视觉外观无关紧要，并且可以完全更改。如果NavigationView适合您的任务，则可以部分或完全更改其样式-在XAML编辑器中右键单击它，然后单击“编辑模板”>“编辑副本”。现在，您将获得XAML样式定义，该样式定义了NavigationView的外观，这是开始的地方。

但是最好不要使用NavigationView，而以SplitView开头可能是更好的主意，如@Muzib所说。

不确定这对于学习XAML是否是一个好主意，但是您会学到一件事-XAML可以在很大程度上进行自定义，但是这样做可能也是一项非常复杂的任务。

Answer 3

我认为从UX角度来看，存在一些问题。

1. 并非所有导航项都立即显示，并且使用人必须展开菜单才能在各组项之间进行切换。
2. 展开导航窗格时，导航项目的位置会更改。当前，控件的工作方式是通过窗格扩展来显示按钮的文本。使用您建议的方法，希望这些项目在打开时就跳下来。

我想知道是否有一个固定的侧窗格，其中的控件如您所愿地布置并且没有汉堡包按钮等会更容易。这不是很不寻常，Settings应用程序就可以了。

如果您使用固定宽度的窗格，则建议您查看定义了NavigationView控件的XAML，可以在C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.17763.0\Generic\generic.xaml中找到 （根据您的SDK版本）。然后，您可以确保使用Windows使用的主题资源，以便自定义控件具有相似的外观。