003011001_WPF 布局實例摘要本文面向 WPF 開發者系統梳理從入門到工業級的四大布局實戰案例——設備登錄界面Grid StackPanel、設備列表界面DockPanel 數據綁定、工業設備操作面板Canvas 動態交互以及生產監控主界面虛擬化 多區域布局。每個實例均包含 XAML 代碼、后臺 C# 代碼及關鍵知識點解析并深入講解 VirtualizingStackPanel 的 UI 虛擬化與容器回收原理幫助讀者循序漸進掌握 WPF 布局核心技能與性能優化技巧。難度等級? 入門級基礎布局組合實例 1設備登錄界面學習目標掌握Grid行列劃分、StackPanel垂直/水平排列、Border裝飾器的基礎用法。功能包含用戶名輸入、密碼輸入、登錄/取消按鈕居中布局。XAMLWindow x:ClassWpfLayoutDemo.LoginWindow xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml Title設備登錄 Width400 Height300 WindowStartupLocationCenterScreen ResizeModeNoResize !-- 外層Border添加圓角和陰影 -- Border Background#F5F5F5 CornerRadius10 Margin10 !-- 3行1列Grid劃分標題區、輸入區、按鈕區 -- Grid Margin20 Grid.RowDefinitions RowDefinition HeightAuto/ RowDefinition Height*/ RowDefinition HeightAuto/ /Grid.RowDefinitions !-- 1. 標題區 -- TextBlock Grid.Row0 Text工業設備管理系統 FontSize22 FontWeightBold HorizontalAlignmentCenter Margin0,0,0,20/ !-- 2. 輸入區垂直StackPanel -- StackPanel Grid.Row1 !-- 用戶名行水平StackPanel -- StackPanel OrientationHorizontal VerticalAlignmentCenter TextBlock Text用戶名 Width60 FontSize14/ TextBox Width200 Height30 FontSize14/ /StackPanel !-- 密碼行 -- StackPanel OrientationHorizontal VerticalAlignmentCenter TextBlock Text密 碼 Width60 FontSize14/ PasswordBox Width200 Height30 FontSize14/ /StackPanel /StackPanel !-- 3. 按鈕區水平StackPanel右對齊 -- StackPanel Grid.Row2 OrientationHorizontal HorizontalAlignmentRight Margin0,20,0,0 Button Content登錄 Width80 Height35 Background#2196F3 ForegroundWhite/ Button Content取消 Width80 Height35/ /StackPanel /Grid /Border /Window關鍵知識點Grid.RowDefinitions定義行高Auto 自適應內容* 占滿剩余空間StackPanel.Orientation控制排列方向垂直/水平Border為整個窗口添加圓角和背景提升視覺效果難度等級?? 進階級嵌套布局 數據綁定實例 2設備列表界面學習目標掌握DockPanel停靠布局、ListView數據綁定、DataTemplate自定義列表項、嵌套Grid布局。功能包含頂部標題欄、左側設備分類、右側設備列表列表項顯示設備 ID、狀態、運行時間。XAMLWindow x:ClassWpfLayoutDemo.DeviceListWindow xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml Title設備列表 Width800 Height600 !-- DockPanel頂部停靠標題欄左側停靠分類欄剩余空間給列表 -- DockPanel !-- 1. 頂部標題欄停靠頂部 -- Border DockPanel.DockTop Background#2196F3 Height50 TextBlock Text設備管理系統 FontSize18 ForegroundWhite HorizontalAlignmentCenter VerticalAlignmentCenter/ /Border !-- 2. 左側分類欄停靠左側 -- Border DockPanel.DockLeft Background#F0F0F0 Width150 Margin0,0,1,0 StackPanel Margin10 Button Content全部設備 Height35 Background#E3F2FD/ Button ContentCNC設備 Height35/ Button ContentAOI設備 Height35/ Button Content輸送線 Height35/ /StackPanel /Border !-- 3. 右側設備列表占滿剩余空間 -- ListView x:NameDeviceListView Margin10 ListView.ItemTemplate DataTemplate !-- 列表項嵌套Grid布局 -- Border BorderBrush#E0E0E0 BorderThickness1 CornerRadius5 Padding10 Margin0,5 Grid Grid.ColumnDefinitions ColumnDefinition WidthAuto/ ColumnDefinition Width*/ ColumnDefinition WidthAuto/ /Grid.ColumnDefinitions !-- 狀態指示燈 -- Ellipse Grid.Column0 Width15 Height15 Fill{Binding StatusColor} Margin0,0,10,0/ !-- 設備信息 -- StackPanel Grid.Column1 TextBlock Text{Binding DeviceId} FontSize14 FontWeightBold/ TextBlock Text{Binding DeviceName} FontSize12 ForegroundGray/ /StackPanel !-- 運行時間 -- TextBlock Grid.Column2 Text{Binding RunTime} FontSize12 VerticalAlignmentCenter/ /Grid /Border /DataTemplate /ListView.ItemTemplate /ListView /DockPanel /Window后臺綁定代碼C#public partial class DeviceListWindow : Window { public class DeviceInfo { public string DeviceId { get; set; } public string DeviceName { get; set; } public SolidColorBrush StatusColor { get; set; } public string RunTime { get; set; } } public DeviceListWindow() { InitializeComponent(); LoadDeviceData(); } private void LoadDeviceData() { var devices new ListDeviceInfo { new DeviceInfo { DeviceId CNC_001, DeviceName 數控車床1號, StatusColor Brushes.Green, RunTime 123小時 }, new DeviceInfo { DeviceId AOI_002, DeviceName 光學檢測2號, StatusColor Brushes.Red, RunTime 89小時 }, new DeviceInfo { DeviceId CNC_003, DeviceName 數控車床3號, StatusColor Brushes.Yellow, RunTime 256小時 } }; DeviceListView.ItemsSource devices; } }關鍵知識點DockPanel.Dock控制子元素停靠位置Top/Left/Right/BottomDataTemplate自定義列表項的外觀簡單數據綁定將后臺集合綁定到ListView.ItemsSource難度等級??? 高級Canvas 絕對布局 動態交互實例 3工業設備操作面板學習目標掌握Canvas絕對定位、ZIndex層級控制、動態修改控件屬性、定時器實時更新。功能固定尺寸的設備操作面板包含狀態指示燈、實時數據顯示、操作按鈕支持狀態切換。XAMLWindow x:ClassT007003_WPFLayoutDemo.MainWindow xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml xmlns:dhttp://schemas.microsoft.com/expression/blend/2008 xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:localclr-namespace:T007003_WPFLayoutDemo mc:Ignorabled Title設備操作面板 Width800 Height600 ResizeModeNoResize WindowStartupLocationCenterScreen Canvas Width800 Height600 Background#F0F0F0 !-- 1. 背景圖底層ZIndex0 -- Rectangle Canvas.Left0 Canvas.Top0 Width800 Height600 Fill#ECEFF1 / !-- 2. 狀態指示燈區 -- Border Canvas.Left50 Canvas.Top50 Width300 Height100 BackgroundWhite CornerRadius5 Padding15 StackPanel OrientationHorizontal StackPanel Ellipse x:NameRunStatusLight Width40 Height40 FillRed / TextBlock Text運行狀態 HorizontalAlignmentCenter / /StackPanel StackPanel Ellipse x:NameAlarmStatusLight Width40 Height40 FillGray / TextBlock Text報警狀態 HorizontalAlignmentCenter / /StackPanel /StackPanel /Border !-- 3. 實時數據區 -- Border Canvas.Left50 Canvas.Top180 Width300 Height200 BackgroundWhite CornerRadius5 Padding15 StackPanel TextBlock Text實時數據 FontSize16 FontWeightBold / StackPanel StackPanel OrientationHorizontal TextBlock Text當前溫度 Width80 / TextBlock x:NameTxtTemperature Text25.5℃ ForegroundBlue / /StackPanel StackPanel OrientationHorizontal TextBlock Text當前轉速 Width80 / TextBlock x:NameTxtSpeed Text1500 rpm ForegroundBlue / /StackPanel StackPanel OrientationHorizontal TextBlock Text產量 Width80 / TextBlock x:NameTxtOutput Text1234 件 ForegroundBlue / /StackPanel /StackPanel /StackPanel /Border !-- 4. 操作按鈕區 -- Border Canvas.Left50 Canvas.Top410 Width700 Height120 BackgroundWhite CornerRadius5 Padding15 StackPanel OrientationHorizontal HorizontalAlignmentCenter Button x:NameBtnStart Content啟動 Width120 Height50 BackgroundGreen ForegroundWhite FontSize16 ClickBtnStart_Click / Button x:NameBtnStop Content停止 Width120 Height50 BackgroundRed ForegroundWhite FontSize16 ClickBtnStop_Click / Button x:NameBtnReset Content復位 Width120 Height50 BackgroundGray ForegroundWhite FontSize16 ClickBtnReset_Click / Button x:NameBtnAlarm Content模擬報警 Width120 Height50 BackgroundOrange ForegroundWhite FontSize16 ClickBtnAlarm_Click / /StackPanel /Border /Canvas /Window后臺交互代碼C#public partial class DevicePanelWindow : Window { private DispatcherTimer _timer; private Random _random new Random(); public DevicePanelWindow() { InitializeComponent(); _timer new DispatcherTimer { Interval TimeSpan.FromSeconds(1) }; _timer.Tick Timer_Tick; _timer.Start(); } private void Timer_Tick(object sender, EventArgs e) { // 模擬實時數據更新 TxtTemperature.Text ${25 _random.NextDouble() * 10:F1}℃; TxtSpeed.Text ${1500 _random.Next(-100, 100)} rpm; } private void BtnStart_Click(object sender, RoutedEventArgs e) { RunStatusLight.Fill Brushes.Green; MessageBox.Show(設備已啟動); } private void BtnStop_Click(object sender, RoutedEventArgs e) { RunStatusLight.Fill Brushes.Red; MessageBox.Show(設備已停止); } private void BtnReset_Click(object sender, RoutedEventArgs e) { RunStatusLight.Fill Brushes.Gray; AlarmStatusLight.Fill Brushes.Gray; TxtOutput.Text 0 件; MessageBox.Show(設備已復位); } private void BtnAlarm_Click(object sender, RoutedEventArgs e) { AlarmStatusLight.Fill Brushes.Red; MessageBox.Show(模擬報警觸發); } }關鍵知識點Canvas.Left/Canvas.Top精確控制控件位置DispatcherTimer實現 UI 線程的定時更新動態修改控件的Fill、Text等屬性實現狀態切換難度等級???? 工業級虛擬化 多區域 性能優化實例 4生產監控主界面學習目標掌握Grid復雜嵌套、VirtualizingStackPanel虛擬化、UniformGrid均勻布局、樣式復用、多區域布局。功能完整的工業上位機主界面包含頂部導航欄、左側菜單、主內容區4 個產能卡片 數據表格、底部狀態欄。XAMLWindow x:ClassWpfLayoutDemo.MonitorWindow xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml Title生產監控系統 Width1200 Height800 WindowStartupLocationCenterScreen !-- 整體3行1列Grid頂部導航、中間內容、底部狀態欄 -- Grid Grid.RowDefinitions RowDefinition Height50/ RowDefinition Height*/ RowDefinition Height30/ /Grid.RowDefinitions !-- 1. 頂部導航欄 -- Border Grid.Row0 Background#1976D2 Grid Grid.ColumnDefinitions ColumnDefinition WidthAuto/ ColumnDefinition Width*/ ColumnDefinition WidthAuto/ /Grid.ColumnDefinitions TextBlock Grid.Column0 Text生產監控系統 FontSize18 ForegroundWhite VerticalAlignmentCenter Margin20,0/ TextBlock Grid.Column2 Text當前用戶管理員 ForegroundWhite VerticalAlignmentCenter Margin0,0,20,0/ /Grid /Border !-- 2. 中間內容區2列Grid左側菜單右側主內容 -- Grid Grid.Row1 Grid.ColumnDefinitions ColumnDefinition Width180/ ColumnDefinition Width*/ /Grid.ColumnDefinitions !-- 左側菜單 -- Border Grid.Column0 Background#F5F5F5 BorderThickness0,0,1,0 BorderBrush#E0E0E0 StackPanel Margin0,10 Spacing2 Button Content生產監控 Height40 Background#E3F2FD HorizontalContentAlignmentLeft Padding20,0/ Button Content設備管理 Height40 HorizontalContentAlignmentLeft Padding20,0/ Button Content產量統計 Height40 HorizontalContentAlignmentLeft Padding20,0/ Button Content系統設置 Height40 HorizontalContentAlignmentLeft Padding20,0/ /StackPanel /Border !-- 右側主內容區2行1列Grid產能卡片數據表格 -- Grid Grid.Column1 Margin10 Grid.RowDefinitions RowDefinition HeightAuto/ RowDefinition Height*/ /Grid.RowDefinitions !-- 產能卡片區UniformGrid 2行2列均勻布局 -- UniformGrid Grid.Row0 Rows2 Columns2 Spacing10 Margin0,0,0,10 !-- 卡片1總產量 -- Border Background#E3F2FD CornerRadius5 Padding15 StackPanel TextBlock Text總產量 FontSize14 Foreground#1976D2/ TextBlock Text12345 FontSize32 FontWeightBold Margin0,10,0,0/ TextBlock Text較昨日 5% FontSize12 ForegroundGreen/ /StackPanel /Border !-- 卡片2良品數 -- Border Background#E8F5E9 CornerRadius5 Padding15 StackPanel TextBlock Text良品數 FontSize14 Foreground#388E3C/ TextBlock Text12000 FontSize32 FontWeightBold Margin0,10,0,0/ TextBlock Text良率 97.2% FontSize12 ForegroundGreen/ /StackPanel /Border !-- 卡片3不良數 -- Border Background#FFEBEE CornerRadius5 Padding15 StackPanel TextBlock Text不良數 FontSize14 Foreground#D32F2F/ TextBlock Text345 FontSize32 FontWeightBold Margin0,10,0,0/ TextBlock Text不良率 2.8% FontSize12 ForegroundRed/ /StackPanel /Border !-- 卡片4運行時間 -- Border Background#FFF8E1 CornerRadius5 Padding15 StackPanel TextBlock Text運行時間 FontSize14 Foreground#F57C00/ TextBlock Text89.5h FontSize32 FontWeightBold Margin0,10,0,0/ TextBlock Text稼動率 92% FontSize12 ForegroundGreen/ /StackPanel /Border /UniformGrid !-- 數據表格區開啟虛擬化的DataGrid -- DataGrid Grid.Row1 AutoGenerateColumnsFalse VirtualizingStackPanel.IsVirtualizingTrue VirtualizingStackPanel.VirtualizationModeRecycling ScrollViewer.CanContentScrollTrue RowHeight30 DataGrid.Columns DataGridTextColumn Header序號 Binding{Binding Index} Width60/ DataGridTextColumn Header產品編號 Binding{Binding ProductNo} Width120/ DataGridTextColumn Header生產時間 Binding{Binding ProduceTime} Width150/ DataGridTextColumn Header狀態 Binding{Binding Status} Width80/ DataGridTextColumn Header操作員 Binding{Binding Operator} Width100/ /DataGrid.Columns /DataGrid /Grid /Grid !-- 3. 底部狀態欄 -- Border Grid.Row2 Background#F5F5F5 BorderThickness0,1,0,0 BorderBrush#E0E0E0 Grid Grid.ColumnDefinitions ColumnDefinition Width*/ ColumnDefinition WidthAuto/ /Grid.ColumnDefinitions TextBlock Grid.Column0 Text系統運行正常 VerticalAlignmentCenter Margin10,0/ TextBlock Grid.Column1 Text{Binding Source{x:Static sys:DateTime.Now}, StringFormatyyyy-MM-dd HH:mm:ss} VerticalAlignmentCenter Margin0,0,10,0/ /Grid /Border /Grid /Window關鍵知識點UniformGrid實現均勻分布的卡片布局VirtualizingStackPanel開啟虛擬化支持 10 萬 行數據流暢滾動多層Grid嵌套實現復雜的多區域布局樣式復用和性能優化技巧VirtualizingStackPanel 虛擬化原理詳解UI 虛擬化UI Virtualization是 WPF 提供的一種性能優化機制核心思想是按需創建即時回收。當ItemsControl如DataGrid、ListBox包含大量數據項時如果一次性為所有數據項創建對應的可視化元素如DataGridRow將消耗大量內存和 CPU 資源導致界面卡頓甚至崩潰。虛擬化技術僅創建當前可視區域內的少量元素當用戶滾動時離開可視區域的元素會被回收并重新填充新進入可視區域的數據從而大幅降低內存占用和 UI 線程壓力。容器回收Container Recycling是VirtualizationModeRecycling的進一步優化。默認的VirtualizationModeStandard在回收容器時會丟棄舊容器并重新創建新容器而Recycling模式會復用已有的容器對象僅刷新其DataContext避免了頻繁創建/銷毀對象的開銷是工業級大數據表格的首選配置。C# 示例為 DataGrid 綁定 10,000 條數據publicpartialclassMonitorWindow:Window{publicMonitorWindow(){InitializeComponent();LoadLargeData();}privatevoidLoadLargeData(){// 生成 10000 條模擬生產數據vardatanewListProductRecord();varrandomnewRandom();varstatusesnew[]{合格,不合格,待檢測};varoperatorsnew[]{張三,李四,王五,趙六};for(inti1;i10000;i){data.Add(newProductRecord{Indexi,ProductNo$P{DateTime.Now:yyyyMMdd}-{i:D4},ProduceTimeDateTime.Now.AddMinutes(-random.Next(0,1440)).ToString(yyyy-MM-dd HH:mm:ss),Statusstatuses[random.Next(statuses.Length)],Operatoroperators[random.Next(operators.Length)]});}// 綁定到 DataGrid需在 XAML 中給 DataGrid 設置 x:NameProductDataGridProductDataGrid.ItemsSourcedata;}}publicclassProductRecord{publicintIndex{get;set;}publicstringProductNo{get;set;}publicstringProduceTime{get;set;}publicstringStatus{get;set;}publicstringOperator{get;set;}}配合 XAML 中DataGrid的虛擬化設置VirtualizingStackPanel.IsVirtualizingTrue和VirtualizationModeRecycling即使綁定 10,000 條數據滾動依然流暢內存占用僅維持在可視區域的幾十行左右。學習路徑建議先完成入門級實例掌握Grid、StackPanel、Border的基礎用法再做進階級實例學習數據綁定和自定義列表項然后挑戰高級實例練習 Canvas 絕對布局和動態交互最后研究工業級實例掌握復雜界面的組織和性能優化 003011001_WPF布局實例
003011001_WPF 布局實例摘要本文面向 WPF 開發者系統梳理從入門到工業級的四大布局實戰案例——設備登錄界面Grid StackPanel、設備列表界面DockPanel 數據綁定、工業設備操作面板Canvas 動態交互以及生產監控主界面虛擬化 多區域布局。每個實例均包含 XAML 代碼、后臺 C# 代碼及關鍵知識點解析并深入講解 VirtualizingStackPanel 的 UI 虛擬化與容器回收原理幫助讀者循序漸進掌握 WPF 布局核心技能與性能優化技巧。難度等級? 入門級基礎布局組合實例 1設備登錄界面學習目標掌握Grid行列劃分、StackPanel垂直/水平排列、Border裝飾器的基礎用法。功能包含用戶名輸入、密碼輸入、登錄/取消按鈕居中布局。XAMLWindow x:ClassWpfLayoutDemo.LoginWindow xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml Title設備登錄 Width400 Height300 WindowStartupLocationCenterScreen ResizeModeNoResize !-- 外層Border添加圓角和陰影 -- Border Background#F5F5F5 CornerRadius10 Margin10 !-- 3行1列Grid劃分標題區、輸入區、按鈕區 -- Grid Margin20 Grid.RowDefinitions RowDefinition HeightAuto/ RowDefinition Height*/ RowDefinition HeightAuto/ /Grid.RowDefinitions !-- 1. 標題區 -- TextBlock Grid.Row0 Text工業設備管理系統 FontSize22 FontWeightBold HorizontalAlignmentCenter Margin0,0,0,20/ !-- 2. 輸入區垂直StackPanel -- StackPanel Grid.Row1 !-- 用戶名行水平StackPanel -- StackPanel OrientationHorizontal VerticalAlignmentCenter TextBlock Text用戶名 Width60 FontSize14/ TextBox Width200 Height30 FontSize14/ /StackPanel !-- 密碼行 -- StackPanel OrientationHorizontal VerticalAlignmentCenter TextBlock Text密 碼 Width60 FontSize14/ PasswordBox Width200 Height30 FontSize14/ /StackPanel /StackPanel !-- 3. 按鈕區水平StackPanel右對齊 -- StackPanel Grid.Row2 OrientationHorizontal HorizontalAlignmentRight Margin0,20,0,0 Button Content登錄 Width80 Height35 Background#2196F3 ForegroundWhite/ Button Content取消 Width80 Height35/ /StackPanel /Grid /Border /Window關鍵知識點Grid.RowDefinitions定義行高Auto 自適應內容* 占滿剩余空間StackPanel.Orientation控制排列方向垂直/水平Border為整個窗口添加圓角和背景提升視覺效果難度等級?? 進階級嵌套布局 數據綁定實例 2設備列表界面學習目標掌握DockPanel停靠布局、ListView數據綁定、DataTemplate自定義列表項、嵌套Grid布局。功能包含頂部標題欄、左側設備分類、右側設備列表列表項顯示設備 ID、狀態、運行時間。XAMLWindow x:ClassWpfLayoutDemo.DeviceListWindow xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml Title設備列表 Width800 Height600 !-- DockPanel頂部停靠標題欄左側停靠分類欄剩余空間給列表 -- DockPanel !-- 1. 頂部標題欄停靠頂部 -- Border DockPanel.DockTop Background#2196F3 Height50 TextBlock Text設備管理系統 FontSize18 ForegroundWhite HorizontalAlignmentCenter VerticalAlignmentCenter/ /Border !-- 2. 左側分類欄停靠左側 -- Border DockPanel.DockLeft Background#F0F0F0 Width150 Margin0,0,1,0 StackPanel Margin10 Button Content全部設備 Height35 Background#E3F2FD/ Button ContentCNC設備 Height35/ Button ContentAOI設備 Height35/ Button Content輸送線 Height35/ /StackPanel /Border !-- 3. 右側設備列表占滿剩余空間 -- ListView x:NameDeviceListView Margin10 ListView.ItemTemplate DataTemplate !-- 列表項嵌套Grid布局 -- Border BorderBrush#E0E0E0 BorderThickness1 CornerRadius5 Padding10 Margin0,5 Grid Grid.ColumnDefinitions ColumnDefinition WidthAuto/ ColumnDefinition Width*/ ColumnDefinition WidthAuto/ /Grid.ColumnDefinitions !-- 狀態指示燈 -- Ellipse Grid.Column0 Width15 Height15 Fill{Binding StatusColor} Margin0,0,10,0/ !-- 設備信息 -- StackPanel Grid.Column1 TextBlock Text{Binding DeviceId} FontSize14 FontWeightBold/ TextBlock Text{Binding DeviceName} FontSize12 ForegroundGray/ /StackPanel !-- 運行時間 -- TextBlock Grid.Column2 Text{Binding RunTime} FontSize12 VerticalAlignmentCenter/ /Grid /Border /DataTemplate /ListView.ItemTemplate /ListView /DockPanel /Window后臺綁定代碼C#public partial class DeviceListWindow : Window { public class DeviceInfo { public string DeviceId { get; set; } public string DeviceName { get; set; } public SolidColorBrush StatusColor { get; set; } public string RunTime { get; set; } } public DeviceListWindow() { InitializeComponent(); LoadDeviceData(); } private void LoadDeviceData() { var devices new ListDeviceInfo { new DeviceInfo { DeviceId CNC_001, DeviceName 數控車床1號, StatusColor Brushes.Green, RunTime 123小時 }, new DeviceInfo { DeviceId AOI_002, DeviceName 光學檢測2號, StatusColor Brushes.Red, RunTime 89小時 }, new DeviceInfo { DeviceId CNC_003, DeviceName 數控車床3號, StatusColor Brushes.Yellow, RunTime 256小時 } }; DeviceListView.ItemsSource devices; } }關鍵知識點DockPanel.Dock控制子元素停靠位置Top/Left/Right/BottomDataTemplate自定義列表項的外觀簡單數據綁定將后臺集合綁定到ListView.ItemsSource難度等級??? 高級Canvas 絕對布局 動態交互實例 3工業設備操作面板學習目標掌握Canvas絕對定位、ZIndex層級控制、動態修改控件屬性、定時器實時更新。功能固定尺寸的設備操作面板包含狀態指示燈、實時數據顯示、操作按鈕支持狀態切換。XAMLWindow x:ClassT007003_WPFLayoutDemo.MainWindow xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml xmlns:dhttp://schemas.microsoft.com/expression/blend/2008 xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:localclr-namespace:T007003_WPFLayoutDemo mc:Ignorabled Title設備操作面板 Width800 Height600 ResizeModeNoResize WindowStartupLocationCenterScreen Canvas Width800 Height600 Background#F0F0F0 !-- 1. 背景圖底層ZIndex0 -- Rectangle Canvas.Left0 Canvas.Top0 Width800 Height600 Fill#ECEFF1 / !-- 2. 狀態指示燈區 -- Border Canvas.Left50 Canvas.Top50 Width300 Height100 BackgroundWhite CornerRadius5 Padding15 StackPanel OrientationHorizontal StackPanel Ellipse x:NameRunStatusLight Width40 Height40 FillRed / TextBlock Text運行狀態 HorizontalAlignmentCenter / /StackPanel StackPanel Ellipse x:NameAlarmStatusLight Width40 Height40 FillGray / TextBlock Text報警狀態 HorizontalAlignmentCenter / /StackPanel /StackPanel /Border !-- 3. 實時數據區 -- Border Canvas.Left50 Canvas.Top180 Width300 Height200 BackgroundWhite CornerRadius5 Padding15 StackPanel TextBlock Text實時數據 FontSize16 FontWeightBold / StackPanel StackPanel OrientationHorizontal TextBlock Text當前溫度 Width80 / TextBlock x:NameTxtTemperature Text25.5℃ ForegroundBlue / /StackPanel StackPanel OrientationHorizontal TextBlock Text當前轉速 Width80 / TextBlock x:NameTxtSpeed Text1500 rpm ForegroundBlue / /StackPanel StackPanel OrientationHorizontal TextBlock Text產量 Width80 / TextBlock x:NameTxtOutput Text1234 件 ForegroundBlue / /StackPanel /StackPanel /StackPanel /Border !-- 4. 操作按鈕區 -- Border Canvas.Left50 Canvas.Top410 Width700 Height120 BackgroundWhite CornerRadius5 Padding15 StackPanel OrientationHorizontal HorizontalAlignmentCenter Button x:NameBtnStart Content啟動 Width120 Height50 BackgroundGreen ForegroundWhite FontSize16 ClickBtnStart_Click / Button x:NameBtnStop Content停止 Width120 Height50 BackgroundRed ForegroundWhite FontSize16 ClickBtnStop_Click / Button x:NameBtnReset Content復位 Width120 Height50 BackgroundGray ForegroundWhite FontSize16 ClickBtnReset_Click / Button x:NameBtnAlarm Content模擬報警 Width120 Height50 BackgroundOrange ForegroundWhite FontSize16 ClickBtnAlarm_Click / /StackPanel /Border /Canvas /Window后臺交互代碼C#public partial class DevicePanelWindow : Window { private DispatcherTimer _timer; private Random _random new Random(); public DevicePanelWindow() { InitializeComponent(); _timer new DispatcherTimer { Interval TimeSpan.FromSeconds(1) }; _timer.Tick Timer_Tick; _timer.Start(); } private void Timer_Tick(object sender, EventArgs e) { // 模擬實時數據更新 TxtTemperature.Text ${25 _random.NextDouble() * 10:F1}℃; TxtSpeed.Text ${1500 _random.Next(-100, 100)} rpm; } private void BtnStart_Click(object sender, RoutedEventArgs e) { RunStatusLight.Fill Brushes.Green; MessageBox.Show(設備已啟動); } private void BtnStop_Click(object sender, RoutedEventArgs e) { RunStatusLight.Fill Brushes.Red; MessageBox.Show(設備已停止); } private void BtnReset_Click(object sender, RoutedEventArgs e) { RunStatusLight.Fill Brushes.Gray; AlarmStatusLight.Fill Brushes.Gray; TxtOutput.Text 0 件; MessageBox.Show(設備已復位); } private void BtnAlarm_Click(object sender, RoutedEventArgs e) { AlarmStatusLight.Fill Brushes.Red; MessageBox.Show(模擬報警觸發); } }關鍵知識點Canvas.Left/Canvas.Top精確控制控件位置DispatcherTimer實現 UI 線程的定時更新動態修改控件的Fill、Text等屬性實現狀態切換難度等級???? 工業級虛擬化 多區域 性能優化實例 4生產監控主界面學習目標掌握Grid復雜嵌套、VirtualizingStackPanel虛擬化、UniformGrid均勻布局、樣式復用、多區域布局。功能完整的工業上位機主界面包含頂部導航欄、左側菜單、主內容區4 個產能卡片 數據表格、底部狀態欄。XAMLWindow x:ClassWpfLayoutDemo.MonitorWindow xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml Title生產監控系統 Width1200 Height800 WindowStartupLocationCenterScreen !-- 整體3行1列Grid頂部導航、中間內容、底部狀態欄 -- Grid Grid.RowDefinitions RowDefinition Height50/ RowDefinition Height*/ RowDefinition Height30/ /Grid.RowDefinitions !-- 1. 頂部導航欄 -- Border Grid.Row0 Background#1976D2 Grid Grid.ColumnDefinitions ColumnDefinition WidthAuto/ ColumnDefinition Width*/ ColumnDefinition WidthAuto/ /Grid.ColumnDefinitions TextBlock Grid.Column0 Text生產監控系統 FontSize18 ForegroundWhite VerticalAlignmentCenter Margin20,0/ TextBlock Grid.Column2 Text當前用戶管理員 ForegroundWhite VerticalAlignmentCenter Margin0,0,20,0/ /Grid /Border !-- 2. 中間內容區2列Grid左側菜單右側主內容 -- Grid Grid.Row1 Grid.ColumnDefinitions ColumnDefinition Width180/ ColumnDefinition Width*/ /Grid.ColumnDefinitions !-- 左側菜單 -- Border Grid.Column0 Background#F5F5F5 BorderThickness0,0,1,0 BorderBrush#E0E0E0 StackPanel Margin0,10 Spacing2 Button Content生產監控 Height40 Background#E3F2FD HorizontalContentAlignmentLeft Padding20,0/ Button Content設備管理 Height40 HorizontalContentAlignmentLeft Padding20,0/ Button Content產量統計 Height40 HorizontalContentAlignmentLeft Padding20,0/ Button Content系統設置 Height40 HorizontalContentAlignmentLeft Padding20,0/ /StackPanel /Border !-- 右側主內容區2行1列Grid產能卡片數據表格 -- Grid Grid.Column1 Margin10 Grid.RowDefinitions RowDefinition HeightAuto/ RowDefinition Height*/ /Grid.RowDefinitions !-- 產能卡片區UniformGrid 2行2列均勻布局 -- UniformGrid Grid.Row0 Rows2 Columns2 Spacing10 Margin0,0,0,10 !-- 卡片1總產量 -- Border Background#E3F2FD CornerRadius5 Padding15 StackPanel TextBlock Text總產量 FontSize14 Foreground#1976D2/ TextBlock Text12345 FontSize32 FontWeightBold Margin0,10,0,0/ TextBlock Text較昨日 5% FontSize12 ForegroundGreen/ /StackPanel /Border !-- 卡片2良品數 -- Border Background#E8F5E9 CornerRadius5 Padding15 StackPanel TextBlock Text良品數 FontSize14 Foreground#388E3C/ TextBlock Text12000 FontSize32 FontWeightBold Margin0,10,0,0/ TextBlock Text良率 97.2% FontSize12 ForegroundGreen/ /StackPanel /Border !-- 卡片3不良數 -- Border Background#FFEBEE CornerRadius5 Padding15 StackPanel TextBlock Text不良數 FontSize14 Foreground#D32F2F/ TextBlock Text345 FontSize32 FontWeightBold Margin0,10,0,0/ TextBlock Text不良率 2.8% FontSize12 ForegroundRed/ /StackPanel /Border !-- 卡片4運行時間 -- Border Background#FFF8E1 CornerRadius5 Padding15 StackPanel TextBlock Text運行時間 FontSize14 Foreground#F57C00/ TextBlock Text89.5h FontSize32 FontWeightBold Margin0,10,0,0/ TextBlock Text稼動率 92% FontSize12 ForegroundGreen/ /StackPanel /Border /UniformGrid !-- 數據表格區開啟虛擬化的DataGrid -- DataGrid Grid.Row1 AutoGenerateColumnsFalse VirtualizingStackPanel.IsVirtualizingTrue VirtualizingStackPanel.VirtualizationModeRecycling ScrollViewer.CanContentScrollTrue RowHeight30 DataGrid.Columns DataGridTextColumn Header序號 Binding{Binding Index} Width60/ DataGridTextColumn Header產品編號 Binding{Binding ProductNo} Width120/ DataGridTextColumn Header生產時間 Binding{Binding ProduceTime} Width150/ DataGridTextColumn Header狀態 Binding{Binding Status} Width80/ DataGridTextColumn Header操作員 Binding{Binding Operator} Width100/ /DataGrid.Columns /DataGrid /Grid /Grid !-- 3. 底部狀態欄 -- Border Grid.Row2 Background#F5F5F5 BorderThickness0,1,0,0 BorderBrush#E0E0E0 Grid Grid.ColumnDefinitions ColumnDefinition Width*/ ColumnDefinition WidthAuto/ /Grid.ColumnDefinitions TextBlock Grid.Column0 Text系統運行正常 VerticalAlignmentCenter Margin10,0/ TextBlock Grid.Column1 Text{Binding Source{x:Static sys:DateTime.Now}, StringFormatyyyy-MM-dd HH:mm:ss} VerticalAlignmentCenter Margin0,0,10,0/ /Grid /Border /Grid /Window關鍵知識點UniformGrid實現均勻分布的卡片布局VirtualizingStackPanel開啟虛擬化支持 10 萬 行數據流暢滾動多層Grid嵌套實現復雜的多區域布局樣式復用和性能優化技巧VirtualizingStackPanel 虛擬化原理詳解UI 虛擬化UI Virtualization是 WPF 提供的一種性能優化機制核心思想是按需創建即時回收。當ItemsControl如DataGrid、ListBox包含大量數據項時如果一次性為所有數據項創建對應的可視化元素如DataGridRow將消耗大量內存和 CPU 資源導致界面卡頓甚至崩潰。虛擬化技術僅創建當前可視區域內的少量元素當用戶滾動時離開可視區域的元素會被回收并重新填充新進入可視區域的數據從而大幅降低內存占用和 UI 線程壓力。容器回收Container Recycling是VirtualizationModeRecycling的進一步優化。默認的VirtualizationModeStandard在回收容器時會丟棄舊容器并重新創建新容器而Recycling模式會復用已有的容器對象僅刷新其DataContext避免了頻繁創建/銷毀對象的開銷是工業級大數據表格的首選配置。C# 示例為 DataGrid 綁定 10,000 條數據publicpartialclassMonitorWindow:Window{publicMonitorWindow(){InitializeComponent();LoadLargeData();}privatevoidLoadLargeData(){// 生成 10000 條模擬生產數據vardatanewListProductRecord();varrandomnewRandom();varstatusesnew[]{合格,不合格,待檢測};varoperatorsnew[]{張三,李四,王五,趙六};for(inti1;i10000;i){data.Add(newProductRecord{Indexi,ProductNo$P{DateTime.Now:yyyyMMdd}-{i:D4},ProduceTimeDateTime.Now.AddMinutes(-random.Next(0,1440)).ToString(yyyy-MM-dd HH:mm:ss),Statusstatuses[random.Next(statuses.Length)],Operatoroperators[random.Next(operators.Length)]});}// 綁定到 DataGrid需在 XAML 中給 DataGrid 設置 x:NameProductDataGridProductDataGrid.ItemsSourcedata;}}publicclassProductRecord{publicintIndex{get;set;}publicstringProductNo{get;set;}publicstringProduceTime{get;set;}publicstringStatus{get;set;}publicstringOperator{get;set;}}配合 XAML 中DataGrid的虛擬化設置VirtualizingStackPanel.IsVirtualizingTrue和VirtualizationModeRecycling即使綁定 10,000 條數據滾動依然流暢內存占用僅維持在可視區域的幾十行左右。學習路徑建議先完成入門級實例掌握Grid、StackPanel、Border的基礎用法再做進階級實例學習數據綁定和自定義列表項然后挑戰高級實例練習 Canvas 絕對布局和動態交互最后研究工業級實例掌握復雜界面的組織和性能優化