CODEWITHSUNDEEP
uwp-xamlwinui-3
Felix
Felix

Reputation: 4081

How to make NavigationViewItem content vertical?

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

default NavigationViewItem

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

Microsoft Store NavigationViewItem

How can I do this?

Upvotes: 0

Views: 741

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32775

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>

Upvotes: 1

Related Questions