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。