我试图完成一些类似于下面的图片,在紧凑模式下,您有图标和文本显示在它下面。
我不太熟悉为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="" />
</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>
发布于 2022-02-16 05:47:54
NavigationView图标+紧凑模式下的文本
很难像上面提到的屏幕截图那样制作界面,您需要编辑默认的NavigationViewItemPresenter
样式,并设置上面的图标和内容底部。
为了使导航像上面那样,我们建议您使用SplitView
自定义侧导航来替换默认的NavigationView。并将ListView
设置为窗格内容。然后,您可以通过定制ItemTemplate
灵活地设计导航项。
有关更多细节,请参阅Xaml-Controls-图库这里。
https://stackoverflow.com/questions/71130845
复制相似问题