NavigationView icons + text in compact mode

Question

I'm trying to accomplish something similar to the image below where in compact mode you have the icon and the text displayed under it.

I'm not that familiar with modifying the underlying template for the NavigationView to make this work. Can you give me an advice on how to do this?

The code for the NavigationView is pretty much the default one:

<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>

score 0 · Answer 1 · edited Feb 23 '22 at 19:15

NavigationView icons + text in compact mode

it's hard to make interface like the screenshot that you mentioned above, you need to edit the default NavigationViewItemPresenter style, and set icon above and content bottom.

For making navigation like above, we suggest you custom side navigation with SplitView to replace default NavigationView. and set ListView as pane content. Then you could design the nav item flexibly by customizing ItemTemplate .

For more detail please refer to Xaml-Controls-Gallery here.

NavigationView icons + text in compact mode

1 Answers1