如何使 NavigationViewItem 内容垂直？

Question

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

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

我该怎么做？

Answer 1

How to make NavigationViewItem content vertical?

Windows Store 应用的导航视图是基于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>

如何使 NavigationViewItem 内容垂直？

How to make NavigationViewItem content vertical?

uwp-xaml

winui-3