How to make NavigationViewItem content vertical?

Question

By default the NavigationViewItem content (icon and text) is arranged horizontally:

I would like to arrange the icon and text vertically like the Windows Store does:

How can I do this?

Answer 1

How to make NavigationViewItem content vertical?

Windows Store app's navigationview is custom navigationview base on SplitView . And the items part rendered with listview. you could custom the item content layout as requirement.

And if you do want to implement it base on WinUI NavigationView, we suggest your use DataTemplate to replace the default NavigationViewItem .

For example

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