我正在努力创建我脑海中的 UI，到目前为止还相当不成功。
我正在尝试创建一个托管我的 NavView 的主页，并且在 NavView 内部我希望有一个命令栏来控制哪些 NavViewItems 是可见的。我已经创建了我想要实现的目标的快速图像。
在我的示例中，我激活了命令栏中的主页按钮，该按钮显示
我希望能够单击文档并让指示器切换到文档并隐藏与 Home 对应的导航项并显示与 Documents 对应的导航项。
最后，我希望命令栏在 NavView 窗格紧凑时折叠，但用户应该能够单击命令栏按钮并展开命令栏以在主页、文档等之间切换。
真的在寻找任何帮助/建议以找到最佳起点。
我仍在学习 UWP 控件和 Xaml。
【问题讨论】：
我认为你应该在外面使用SplitView 而不是NavigationView，然后，
在Splitview 的Pane 内，使用NavigationView 和一些技巧来实现您想要的。
重点是：
NavigationView 的PaneDisplayMode LeftComact
NavigationView中使用PaneToggleButton来防止
用户通过单击更改PaneDisplayMode，改为使用自定义的来打开和关闭窗格。NavigationView的PaneDisplayMode改为Top时
窗格打开，并在窗格关闭时再次返回到 LeftComact。这是我在Splitview.Pane 中使用NavigationView 所取得的成果：
您可以装饰它并使其在视觉上更令人满意，例如添加一个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;
}
}
}
希望对您有所帮助。
【讨论】：
首先要决定是否要使用NavigationView。在 XAML 中，控件由它们的行为（它们实现的属性和方法）定义，而视觉外观无关紧要，可以完全改变。如果NavigationView 适合您的任务，那么您可以部分或完全更改其样式 - 在 XAML 编辑器中右键单击它，然后单击编辑模板 > 编辑副本。现在您将获得定义 NavigationView 外观的 XAML 样式定义，这是开始的地方。
但是你不能使用NavigationView 可能很好，而且正如@Muzib 所说，以SplitView 开头可能是一个更好的主意。
不确定这是否是学习 XAML 的一个好主意，但您会学到一件事 - XAML 可以在很大程度上进行自定义，但这样做也可能是一项非常复杂的任务。
【讨论】：
我认为从用户体验的角度来看存在一些问题。
我想知道是否有一个固定的侧窗格，其中包含您想要的控件布局并且没有汉堡按钮等。这并不罕见，设置应用程序可以做到。
如果您使用固定宽度的窗格，我建议您查看定义 NavigationView 控件的 XAML，该控件可以在 C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.17763.0\Generic\generic.xaml 中找到
（根据您的 SDK 版本）。然后，您可以确保使用 Windows 使用的主题资源，以便您的自定义控件具有相似的外观。
【讨论】：