如何使 NavigationViewItem 内容垂直？答案

【问题标题】：How to make NavigationViewItem content vertical?如何使 NavigationViewItem 内容垂直？
【发布时间】：2021-12-16 12:25:45
【问题描述】：

默认情况下，NavigationViewItem 内容（图标和文本）是水平排列的：

我想像 Windows 应用商店那样垂直排列图标和文本：

我该怎么做？

【问题讨论】：

标签： uwp-xaml winui-3

【解决方案1】：

如何让 NavigationViewItem 内容垂直？

Windows 应用商店应用的导航视图是基于SplitView 的自定义导航视图。以及使用列表视图呈现的项目部分。您可以根据需要自定义项目内容布局。

如果您确实想基于 WinUI NavigationView 实现它，我们建议您使用 DataTemplate 替换默认的NavigationViewItem。

例如

<NavigationView
    x:Name="Nav"
    CompactPaneLength="60"
    Loaded="NavigationView_Loaded">
    <NavigationView.MenuItemContainerStyle>
        <Style TargetType="NavigationViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="Margin" Value="0,5,0,0" />
        </Style>
    </NavigationView.MenuItemContainerStyle>
    <NavigationView.MenuItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <SymbolIcon HorizontalAlignment="Center" Symbol="Send" />
                <TextBlock HorizontalAlignment="Center" Text="Send" />
            </StackPanel>
        </DataTemplate>
    </NavigationView.MenuItemTemplate>
</NavigationView>

【讨论】：

太好了，这行得通。谢谢妮可朱！