NavigationView 图标 + 紧凑模式下的文本

Question

我正在尝试完成类似于下图的操作，在紧凑模式下，您可以在其下方显示图标和文本。

我不太熟悉修改NavigationView的基础模板来完成这项工作。 你能给我一个如何做到这一点的建议吗？

NavigationView的代码几乎是默认代码：

<winui:NavigationView
    x:Name="navigationView"
    Background="{ThemeResource SystemControlBackgroundAltHighBrush}"
    IsBackButtonVisible="Collapsed"
    IsBackEnabled="False"
    IsPaneToggleButtonVisible="False"
    IsSettingsVisible="False"
    PaneDisplayMode="LeftCompact"
    SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}">
    <winui:NavigationView.MenuItems>
        <winui:NavigationViewItem x:Uid="Shell_Main" helpers:NavHelper.NavigateTo="views:MainPage">
            <winui:NavigationViewItem.Icon>
                <FontIcon Glyph="&#xE80F;" />
            </winui:NavigationViewItem.Icon>
        </winui:NavigationViewItem>
        <winui:NavigationViewItem x:Uid="Shell_WorkOrders" helpers:NavHelper.NavigateTo="views:WorkOrdersPage">
            <winui:NavigationViewItem.Icon>
                <FontIcon Glyph="&#xE9D5;" />
            </winui:NavigationViewItem.Icon>
        </winui:NavigationViewItem>
        <winui:NavigationViewItem x:Uid="Shell_Materials" helpers:NavHelper.NavigateTo="views:MaterialsPage">
            <winui:NavigationViewItem.Icon>
                <FontIcon Glyph="&#xE950;" />
            </winui:NavigationViewItem.Icon>
        </winui:NavigationViewItem>
        <winui:NavigationViewItem x:Uid="Shell_Documentation" helpers:NavHelper.NavigateTo="views:DocumentationPage">
            <winui:NavigationViewItem.Icon>
                <FontIcon Glyph="&#xE946;" />
            </winui:NavigationViewItem.Icon>
        </winui:NavigationViewItem>
    </winui:NavigationView.MenuItems>
    <i:Interaction.Behaviors>
        <ic:EventTriggerBehavior EventName="ItemInvoked">
            <ic:InvokeCommandAction Command="{x:Bind ViewModel.ItemInvokedCommand}" />
        </ic:EventTriggerBehavior>
    </i:Interaction.Behaviors>
    <Grid>
        <Frame x:Name="shellFrame" />
    </Grid>
</winui:NavigationView>

Answer 1

NavigationView 图标 + 紧凑模式下的文本

很难像你上面提到的屏幕截图那样制作界面，你需要编辑默认的NavigationViewItemPresenter样式，并将图标设置在上方和内容底部。

为了像上面那样制作导航，我们建议您使用SplitView自定义侧边导航来替换默认的 NavigationView。 并将ListView设置为窗格内容。 然后就可以通过自定义ItemTemplate来灵活设计导航项了。

有关详细信息，请参阅此处的 Xaml-Controls-Gallery。