首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >NavigationView图标+紧凑模式下的文本

NavigationView图标+紧凑模式下的文本
EN

Stack Overflow用户
提问于 2022-02-15 17:31:04
回答 1查看 121关注 0票数 0

我试图完成一些类似于下面的图片,在紧凑模式下,您有图标和文本显示在它下面。

我不太熟悉为NavigationView修改底层模板来完成这项工作。你能给我一个怎么做的建议吗?

NavigationView的代码基本上是默认的:

代码语言:javascript
运行
复制
<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>
EN

Stack Overflow用户

发布于 2022-02-16 05:47:54

NavigationView图标+紧凑模式下的文本

很难像上面提到的屏幕截图那样制作界面,您需要编辑默认的NavigationViewItemPresenter样式,并设置上面的图标和内容底部。

为了使导航像上面那样,我们建议您使用SplitView自定义侧导航来替换默认的NavigationView。并将ListView设置为窗格内容。然后,您可以通过定制ItemTemplate灵活地设计导航项。

有关更多细节,请参阅Xaml-Controls-图库这里

票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71130845

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档