如何实现NavigationViewItem内容的垂直排列？

实现方案 #

直接重写NavigationView的MenuItemTemplate模板，把内部布局改为垂直排列即可，以下是可直接复用的XAML代码：

<NavigationView>
    <!-- 自定义菜单项模板 -->
    <NavigationView.MenuItemTemplate>
        <DataTemplate>
            <StackPanel 
                Orientation="Vertical" 
                Spacing="6" 
                Padding="0,10,0,8"
                HorizontalAlignment="Center">
                <!-- 图标部分 -->
                <ContentPresenter 
                    Content="{Binding Icon}"
                    HorizontalAlignment="Center"/>
                <!-- 文本部分 -->
                <TextBlock 
                    Text="{Binding Content}"
                    FontSize="12"
                    HorizontalAlignment="Center"/>
            </StackPanel>
        </DataTemplate>
    </NavigationView.MenuItemTemplate>

    <!-- 你的菜单项 -->
    <NavigationView.MenuItems>
        <NavigationViewItem Content="首页" Icon="Home"/>
        <NavigationViewItem Content="应用商店" Icon="Shop"/>
        <NavigationViewItem Content="下载库" Icon="Download"/>
    </NavigationView.MenuItems>
</NavigationView>

补充说明 #

• 如果需要同时适配导航栏展开/折叠状态，可新增可视化状态判断NavigationView.PaneOpen属性，展开时自动切换为水平布局即可
• 调整StackPanel的Spacing、Padding参数和文本字号，就能完全对齐微软商店的视觉效果
• 模板中使用ContentPresenter绑定Icon属性，可兼容FontIcon、BitmapIcon、PathIcon等所有图标类型

内容的提问来源于stack exchange，提问作者Felix