C#WPF实战出真汁05--左侧导航

1、左侧导航设计要点

清晰的信息架构
确保导航结构层次分明，主分类与子分类逻辑清晰，避免过度嵌套。使用分组、缩进或分隔线区分不同层级，保持视觉可读性。

直观的图标与标签
为每个导航项搭配简洁的图标，强化视觉识别。标签文字需简短明确，避免专业术语，保证用户快速理解功能或内容。

响应式交互设计
悬停状态应有视觉反馈（如颜色变化、背景高亮）。当前选中项需突出显示（如底色、边框或文字加粗），帮助用户定位。可折叠菜单需支持平滑展开/收起动画。

视觉层次与留白
通过字体大小、颜色深浅或间距区分主次内容。保留充足留白，避免信息拥挤。暗色背景或分割线可提升导航区与主内容的区分度。

性能优化
动态加载子菜单减少初始加载时间。对于大型导航，提供搜索或快捷操作功能。确保导航在移动端可通过汉堡菜单调用，并适配触控操作。

无障碍适配
支持键盘导航（Tab键切换），提供ARIA标签说明。颜色对比度符合WCAG标准，图标需附带文字说明以兼容屏幕阅读器。

2、主窗体布局设计

主窗体布局设计需要考虑用户交互的便捷性和视觉舒适度。采用清晰的区域划分，确保功能模块易于访问。常见的布局方式包括单窗口、多文档界面（MDI）或标签式布局，具体选择取决于应用类型和功能复杂度。
保持一致的间距和对齐方式，避免元素拥挤或分散。使用网格系统辅助控件排列，确保界面整洁。重要功能或高频操作应放置在显眼位置，例如顶部工具栏或侧边栏。
常见布局模式
顶部导航+侧边栏+内容区
顶部放置应用标题和全局导航，左侧设置功能菜单或工具面板，中央区域作为主要内容展示区。这种模式适合功能较多的桌面应用，如设计软件或开发工具。
全屏内容+浮动面板
主窗口以内容展示为核心，辅助功能以可折叠面板形式出现。适合媒体编辑类软件，如视频剪辑或图像处理工具，能最大化工作区利用率。
卡片式平铺布局
将功能模块以等比例卡片形式平铺在主窗口，通过视觉层次区分优先级。适用于数据仪表盘或控制中心类应用，信息呈现直观清晰。

响应式设计要点
考虑窗口大小变化时的布局适应性。定义最小窗口尺寸限制，防止内容挤压变形。使用锚定（Anchoring）和停靠（Docking）技术确保控件随窗口缩放时保持相对位置。

为高分辨率屏幕提供多套尺寸方案，确保图标和文字在不同DPI设置下清晰可见。重要按钮和交互元素应设置在鼠标热区范围内，减少操作疲劳。

视觉层次构建
通过颜色对比、阴影效果或间距区分不同功能区块。主操作按钮使用强调色突出显示，次级功能采用中性色调。保持字体类型不超过三种，通过字号差异建立信息层级。

状态栏和提示信息使用低饱和度色彩，避免分散注意力。动态元素如进度条或通知标志需设计醒目但不过度干扰。

辅助功能考虑
为视力障碍用户提供高对比度模式选项，支持键盘快捷键操作所有功能。控件间Tab顺序需符合逻辑流，焦点状态应有明显视觉反馈。界面文字应支持动态缩放，避免固定像素单位。

布局设计如图：

左侧里面又定义了3行，每行放不同的内容，分别是图标，菜单，按钮，其中菜单通过TreeView控件实现，当点击不同treeitem时，呈现不同的内容显示在右侧，treeview控件点击事件由TvMenu_SelectionChanged事件来处理，样式由TreeView.ItemTemplate模板来定义，前面提到过国内优秀的WPF开源控件库，Panuon.UI.Silver，它能提供很好的样式，如图所示：

完整代码如下：

<pu:WindowXx:Class="HQ.fResApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:local="clr-namespace:HQ.fResApp"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:pu="clr-namespace:Panuon.UI.Silver;assembly=Panuon.UI.Silver"Width="1000"Height="500"pu:WindowXCaption.HideBasicButtons="True"BorderThickness="0" WindowStartupLocation="CenterScreen"WindowState="Maximized"xmlns:vm="clr-namespace:HQ.fResApp.ViewModel"  mc:Ignorable="d"><Window.DataContext><vm:MainVModel/></Window.DataContext><Grid><Grid x:Name="HasDataBlock"><Grid.ColumnDefinitions><ColumnDefinition Width="140" /><ColumnDefinition /></Grid.ColumnDefinitions><!--  左侧菜单栏  --><GridGrid.Column="0"Margin="0,-35,0,0"Background="#394050"><Grid.RowDefinitions><RowDefinition Height="80" /><RowDefinition /><RowDefinition Height="80" /></Grid.RowDefinitions><!--  系统Logo  --><TextBlockGrid.Row="0"Padding="50,30,50,30"HorizontalAlignment="Center"VerticalAlignment="Center"Background="#282e3a"FontFamily="Segoe UI"FontSize="23"FontWeight="Bold"Foreground="White"><Run>蜀 味</Run><Run Foreground="#FF67DA82">正 道</Run><TextBlock.Effect><DropShadowEffectBlurRadius="10"Opacity="0.5"ShadowDepth="0"Color="White" /></TextBlock.Effect></TextBlock><!--  菜单列表    --><TreeViewx:Name="trMenu"Grid.Row="1"pu:TreeViewHelper.ItemHeight="100"pu:TreeViewHelper.SelectedBackground="#AA3366"pu:TreeViewHelper.SelectedForeground="#ffffff"pu:TreeViewHelper.TreeViewStyle="Classic"Background="Transparent"BorderBrush="White"Foreground="#efefef"ItemsSource="{Binding MenuItems}"SelectedItemChanged="TvMenu_SelectionChanged"><TreeView.ItemContainerStyle><Style BasedOn="{StaticResource {x:Type TreeViewItem}}" TargetType="{x:Type TreeViewItem}"><Setter Property="IsSelected" Value="{Binding IsSelect}" /></Style></TreeView.ItemContainerStyle><TreeView.ItemTemplate><HierarchicalDataTemplate ItemsSource="{Binding Path=TreeViewItemModel}"><Grid><Grid.RowDefinitions><RowDefinition /><RowDefinition /></Grid.RowDefinitions><ImageMargin="-15,-5,0,0"Source="{Binding Path=Icon}"Stretch="None" /><TextBlockGrid.Row="1"Margin="-15,10,0,0"HorizontalAlignment="Center"VerticalAlignment="Center"FontSize="16"FontWeight="Bold"Text="{Binding Path=Header}" /></Grid></HierarchicalDataTemplate></TreeView.ItemTemplate></TreeView><!--  退出系统  --><StackPanelGrid.Row="2"HorizontalAlignment="Center"VerticalAlignment="Center"Cursor="Hand"Orientation="Horizontal"ToolTip="退出系统前，请确保当前操作已经无误！"><ButtonHorizontalAlignment="Center"VerticalAlignment="Center"pu:ButtonHelper.ButtonStyle="Link"pu:ButtonHelper.HoverBrush="White"pu:ButtonHelper.Icon="/HQ.fResApp;component/Resources/icon/out.png"pu:IconHelper.Width="45"Click="WindowX_Closing"Content="退出"FontFamily="Segoe UI"FontSize="17"FontWeight="ExtraBold"Foreground="White" /></StackPanel></Grid><!--  右侧内容栏  --><Grid Grid.Column="1" Margin="0,-35,0,0"><Grid><Grid.RowDefinitions><RowDefinition Height="80" /><RowDefinition /></Grid.RowDefinitions><Grid><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions><StackPanel VerticalAlignment="Center" Orientation="Horizontal"><TextBlockx:Name="txtStoreName1"Margin="20,0,0,0"FontFamily="Champagne &amp; Limousines"FontSize="23"FontWeight="Bold"Foreground="#5f5f5f"Text="牛牪犇火锅店"Visibility="Collapsed" /></StackPanel><StackPanelGrid.Column="1"Margin="0,0,20,0"HorizontalAlignment="Right"VerticalAlignment="Center"Orientation="Horizontal"><pu:DropDownHorizontalAlignment="Left"VerticalAlignment="Top"Cursor="Hand"><StackPanel VerticalAlignment="Center" Orientation="Horizontal"><TextBlockx:Name="txtStoreName"Margin="0,10,5,0"VerticalAlignment="Center"FontSize="16"FontWeight="DemiBold"Foreground="#909399"Text="牛牪犇火锅（安南旗舰店）" /><Borderx:Name="uheadimg"Width="45"Height="45"Margin="0,5,20,0"BorderBrush="#F0F0F0"BorderThickness="1"CornerRadius="30"><Border.Background><ImageBrush ImageSource="/HQ.fResApp;component/Resources/icon/logo.png" /></Border.Background></Border></StackPanel><pu:DropDown.Child><Grid Width="100"><Grid.RowDefinitions><RowDefinition Height="55" /><RowDefinition Height="55" /></Grid.RowDefinitions><Grid Margin="15,0" Cursor="Hand"><ButtonHeight="30"VerticalAlignment="Center"pu:ButtonHelper.HoverBrush="Transparent"Background="Transparent"Click="ToUInfo_Click"Content="个人中心"FontFamily="/Panuon.UI.Silver;component/Resources/#fontawesome"Foreground="#909399" /></Grid><BorderWidth="80"VerticalAlignment="Bottom"BorderBrush="#EEEEEE"BorderThickness="0,0,0,1" /><GridGrid.Row="1"Margin="15,0"Cursor="Hand"><ButtonHeight="30"VerticalAlignment="Center"pu:ButtonHelper.HoverBrush="Transparent"Background="Transparent"Click="WindowX_Closing"Content="退出登录"FontFamily="/Panuon.UI.Silver;component/Resources/#fontawesome"Foreground="#909399" /></Grid></Grid></pu:DropDown.Child></pu:DropDown></StackPanel></Grid><ContentControl x:Name="ContentControl" Grid.Row="1" /></Grid></Grid></Grid>        </Grid>
</pu:WindowX>

3、主窗体业务逻辑

这块业务是指当登录成功后，必须将用户拥有的菜单显示出来，所以涉及到后台的用户，角色，菜单多个表的关联，因此必须从dal到bll的代码。

4、主窗体视图模型

后台逻辑代码

using HQ.COMM;
using HQ.fResApp.BaseModel;
using HQ.fResApp.ViewModel;
using Panuon.UI.Silver;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;namespace HQ.fResApp
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : WindowX{private static IDictionary<string, Type> _partialViewDic; static MainWindow(){_partialViewDic = new Dictionary<string, Type>();var assembly = AppDomain.CurrentDomain.GetAssemblies().FirstOrDefault(x => x.FullName.StartsWith("HQ.fResApp"));assembly.GetTypes().Where(x => x.Namespace.StartsWith("HQ.fResApp.UControls") && x.IsSubclassOf(typeof(UserControl))).ToList().ForEach(x => _partialViewDic.Add(x.Name, x));}public MainWindow(){InitializeComponent();}#region EventHandlerprivate void TvMenu_SelectionChanged(object sender, RoutedPropertyChangedEventArgs<object> e){try{//系统首次加载if (!IsLoaded){var _tag = _partialViewDic["CanTaiGuanLi"];ContentControl.Content = Activator.CreateInstance(_tag);}//选择不同菜单项var selectedItem = trMenu.SelectedItem as TreeViewItemModel;var curTag = selectedItem.Tag;if (curTag.IsNullOrEmpty()) return;if (_partialViewDic.ContainsKey(curTag)){var _tag = _partialViewDic[curTag];ContentControl.Content = Activator.CreateInstance(_tag);}else{ContentControl.Content = null;}}catch (Exception ex){ContentControl.Content = null;Logger.Default.Error("切换系统菜单异常", ex);}}private void WindowX_Closing(object sender, RoutedEventArgs e){var result = MessageBoxX.Show("退出系统前，请确认当前操作处理完结？", "提示", this, MessageBoxButton.OKCancel);if (result == MessageBoxResult.OK){Application.Current.Shutdown();}}private void ToUInfo_Click(object sender, RoutedEventArgs e){}#endregion}
}

5、测试效果

点击左侧不同菜单呈现不同内容

原创不易，打字截图不易，走过路过，不要错过，欢迎点赞，收藏，转载，复制，抄袭，留言，动动你的金手指，早日实现财务自由！