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}
}