如何配置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




