You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何配置NavigationView始终保持Minimal模式,禁用仅图标侧边栏

解决方案:强制NavigationView保持Minimal模式并自定义菜单项

没问题,完全可以实现你要的效果!下面是具体的配置步骤和代码示例,帮你达成需求:

1. 基础XAML配置

首先在XAML中设置核心属性,确保默认进入Minimal模式,同时让汉堡按钮始终可见:

<NavigationView x:Name="NavView"
                DisplayMode="Minimal"
                IsPaneToggleButtonVisible="True"
                PaneDisplayMode="LeftMinimal"
                ItemInvoked="NavView_ItemInvoked"
                DisplayModeChanged="NavView_DisplayModeChanged">
    <NavigationView.MenuItems>
        <!-- 使用统一的项目符号图标替代系统图标 -->
        <NavigationViewItem Content="MenuItem1">
            <NavigationViewItem.Icon>
                <SymbolIcon Symbol="Bullets"/>
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItem Content="MenuItem2">
            <NavigationViewItem.Icon>
                <SymbolIcon Symbol="Bullets"/>
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <NavigationViewItem Content="MenuItem3">
            <NavigationViewItem.Icon>
                <SymbolIcon Symbol="Bullets"/>
            </NavigationViewItem.Icon>
        </NavigationViewItem>
        <!-- 其他菜单项重复上述结构即可 -->
    </NavigationView.MenuItems>
    <Frame Name="A1Frame" />
</NavigationView>

2. 阻止自动切换DisplayMode

NavigationView默认会根据窗口宽度自动切换到Compact或Expanded模式,我们需要通过事件强制锁定为Minimal:

private void NavView_DisplayModeChanged(NavigationView sender, NavigationViewDisplayModeChangedEventArgs args)
{
    // 强制保持Minimal模式,无视窗口大小变化
    sender.DisplayMode = NavigationViewDisplayMode.Minimal;
}

3. 点击菜单项后自动收起面板

要实现选中菜单项后面板自动收起的效果,在ItemInvoked事件中添加关闭逻辑:

private void NavView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{
    // 这里可以添加你的页面导航逻辑,比如根据菜单项切换Frame内容
    if (args.InvokedItemContainer is NavigationViewItem selectedItem)
    {
        // 示例:根据菜单项Content导航到对应页面
        // A1Frame.Navigate(typeof(YourTargetPage), selectedItem.Content);
    }

    // 收起导航面板,回到汉堡按钮状态
    sender.IsPaneOpen = false;
}

额外优化(可选)

如果想彻底杜绝任何图标栏显示的可能,可以添加以下属性进一步限制:

<NavigationView x:Name="NavView"
                ...
                CompactPaneLength="0"
                ExpandedModeThresholdWidth="2147483647">
    <!-- 其余内容不变 -->
</NavigationView>
  • CompactPaneLength="0":即使意外触发Compact模式,也不会显示侧边图标栏
  • ExpandedModeThresholdWidth="2147483647":设置一个极大值,让窗口永远达不到触发Expanded模式的宽度阈值

这样配置后,你的NavigationView就会完全符合需求:永远只显示汉堡按钮,点击展开带统一项目符号的菜单面板,选中项后自动收起,全程不会切换到侧边图标栏模式。

内容的提问来源于stack exchange,提问作者Bimo

火山引擎 最新活动