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="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
<winui:NavigationViewItem x:Uid="Shell_WorkOrders" helpers:NavHelper.NavigateTo="views:WorkOrdersPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
<winui:NavigationViewItem x:Uid="Shell_Materials" helpers:NavHelper.NavigateTo="views:MaterialsPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
<winui:NavigationViewItem x:Uid="Shell_Documentation" helpers:NavHelper.NavigateTo="views:DocumentationPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</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>
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.