WPF+MVVM案例实战（四）- 自定义GroupBox边框样式实现

---

1、项目准备

打开项目 Wpf_Examples，新建 GroubBoxWindow.xaml 界面、GroubBoxViewModel.cs 和 EnviromentModel.cs 文件。如下所示：

没有这个项目的小伙伴可以看文章 WPF+MVVM案例实战（三）- 动态数字卡片效果实现 ，这里面详细说明了项目创建过程。

2、功能实现

1、EnviromentModel.cs 代码

using CommunityToolkit.Mvvm.ComponentModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;namespace Wpf_Examples.Models
{public class EnviromentModel:ObservableObject{/// <summary>/// 环境指标项名称/// </summary>private string _EnItemName;public string EnItemName{get => _EnItemName;set{SetProperty(ref _EnItemName, value);}}/// <summary>/// 环境指标项值/// </summary>private int _EnItemValue;public int EnItemValue{get => _EnItemValue;set{SetProperty(ref _EnItemValue, value);}}}
}

2、GroubBoxViewModel.cs 代码实现

using CommunityToolkit.Mvvm.ComponentModel;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Threading;
using Wpf_Examples.Models;namespace Wpf_Examples.ViewModels
{public class GroubBoxViewModel:ObservableObject{#region 监控数据public ObservableCollection<EnviromentModel> EnviromentList { get; set; }#endregionpublic GroubBoxViewModel(){#region 数据初始化EnviromentList = new ObservableCollection<EnviromentModel>();EnviromentList.Add(new EnviromentModel { EnItemName = "光照(Lux)", EnItemValue = 123 });EnviromentList.Add(new EnviromentModel { EnItemName = "噪音(db)", EnItemValue = 55 });EnviromentList.Add(new EnviromentModel { EnItemName = "温度(℃)", EnItemValue = 80 });EnviromentList.Add(new EnviromentModel { EnItemName = "湿度(%)", EnItemValue = 44 });EnviromentList.Add(new EnviromentModel { EnItemName = "PM2.5(m³)", EnItemValue = 20 });EnviromentList.Add(new EnviromentModel { EnItemName = "硫化氢(PPM)", EnItemValue = 15 });EnviromentList.Add(new EnviromentModel { EnItemName = "氮气(PPM)", EnItemValue = 18 });#endregionCreateTimer(); //创建定时器动态改变数据}private void CreateTimer(){#region 每秒定时器服务DispatcherTimer cpuTimer = new DispatcherTimer{Interval = new TimeSpan(0, 0, 0, 3, 0)};cpuTimer.Tick += DispatcherTimer_Tick;cpuTimer.Start();#endregion}private void DispatcherTimer_Tick(object sender, EventArgs e){Random random = new Random();foreach (var item in EnviromentList){item.EnItemValue = random.Next(10,100);}        }}
}

3、ViewModelLocator.cs 依赖注入

using Microsoft.Extensions.DependencyInjection;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Controls;namespace Wpf_Examples.ViewModels
{public class ViewModelLocator{public IServiceProvider Services { get; }public ViewModelLocator(){Services = ConfigureServices();}private static IServiceProvider ConfigureServices(){var services = new ServiceCollection();//这里实现所有viewModel的容器注入services.AddSingleton<MainViewModel>();services.AddScoped<LEDStatusViewModel>();services.AddScoped<ImageButtonViewModel>();services.AddScoped<DataCardViewModel>();services.AddScoped<GroubBoxViewModel>();//添加其他 viewModelreturn services.BuildServiceProvider();}public MainViewModel Main => Services.GetService<MainViewModel>();public LEDStatusViewModel LedStatus => Services.GetService<LEDStatusViewModel>();public ImageButtonViewModel ImageButton => Services.GetService<ImageButtonViewModel>();public DataCardViewModel DataCard => Services.GetService<DataCardViewModel>();public GroubBoxViewModel GroupBox => Services.GetService<GroubBoxViewModel>();}
}

4、GroubBoxWindow.xaml 样式布局

<Window x:Class="Wpf_Examples.Views.GroubBoxWindow"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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:Wpf_Examples.Views"DataContext="{Binding Source={StaticResource Locator},Path=GroupBox}"mc:Ignorable="d"Title="GroubBoxWindow" Height="450" Width="800" Background="#2B2B2B"><Window.Resources><Style TargetType="GroupBox"><Setter Property="Margin" Value="10,3"></Setter><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="GroupBox"><Grid><!--左上角的线条--><Polyline Points="0 30,0 10,10 0,30 0" Stroke="#9918aabd" StrokeThickness="1" VerticalAlignment="Top" HorizontalAlignment="Left"></Polyline><!--左上 横的点  小圆--><Ellipse Width="4" Height="4" HorizontalAlignment="Left" Fill="#9918aabd" VerticalAlignment="Top" Margin="24,-2,0,0"></Ellipse><!--左侧的点  小圆--><Ellipse Width="4" Height="4" HorizontalAlignment="Left" Fill="#9918aabd" VerticalAlignment="Top" Margin="-2,24,0,0"></Ellipse><!--Moveto--><Path Data="M0 0,3 3,30 3,33 0,68 0,73 7,78 7,78,10M8 0,25 0" Stroke="#9918aabd" VerticalAlignment="Top" HorizontalAlignment="Right"></Path><!--左下角的线条--><Polyline Points="0 0,0 15,10 15" Stroke="#9918aabd" StrokeThickness="1" VerticalAlignment="Bottom"  HorizontalAlignment="Left"></Polyline><!--右下角的线--><Polyline Points="10 0,0,10" Stroke="#9918aabd" StrokeThickness="1" HorizontalAlignment="Right" VerticalAlignment="Bottom"></Polyline><!--右下角的三角形--><Polygon Points="0 7,7 7,7 0" Fill="#9918aabd" HorizontalAlignment="Right" VerticalAlignment="Bottom"></Polygon><!--上面的线--><Border BorderThickness="0,1,0,0" BorderBrush="#9918aabd" VerticalAlignment="top" Margin="30,-0.5,78,0"></Border><!--右边的线--><Border BorderThickness="0,0,1,0" BorderBrush="#9918aabd"  HorizontalAlignment="Right" Margin="0,10"></Border><!--下面的线--><Border BorderThickness="0,0,0,1" BorderBrush="#9918aabd" VerticalAlignment="Bottom" Margin="10,0"></Border><!--左边的线--><Border BorderThickness="1,0,0,0" BorderBrush="#9918aabd"  HorizontalAlignment="Left" Margin="-0.5,15"></Border><!--文字前的装饰--><Path Data="M0 0,3 0,5 4,3 8,0 8,3 4"   Fill="#9918aabd" Margin="10,13"></Path><Path Data="M0 0,3 0,5 4,3 8,0 8,3 4"   Fill="#5518aabd" Margin="16,13"></Path><TextBlock Text="{TemplateBinding Header}" Foreground="White" FontWeight="Bold" Margin="25,8" HorizontalAlignment="Left" VerticalAlignment="Top"></TextBlock><!--显示内容--><ContentPresenter></ContentPresenter></Grid></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><Grid><GroupBox Header="监控指标" Margin="20"><ItemsControl ItemsSource="{Binding EnviromentList}" VerticalAlignment="Center"><ItemsControl.ItemsPanel><ItemsPanelTemplate><UniformGrid Columns="4"/></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemTemplate><DataTemplate><StackPanel Orientation="Vertical" HorizontalAlignment="Center" Margin="0 5"><TextBlock Text="{Binding EnItemValue}" FontSize="16" Foreground="#ff2bedf1" Margin="0 5"/><TextBlock Text="{Binding EnItemName}" FontSize="10" Foreground="White" Margin="0 5"/></StackPanel></DataTemplate></ItemsControl.ItemTemplate></ItemsControl></GroupBox></Grid>
</Window>

5、数据绑定

 DataContext="{Binding Source={StaticResource Locator},Path=GroupBox}"

3、效果展示

4、资源获取

CSDN 下载链接：WPF+MVVM案例实战（四）- 自定义GroupBox边框样式实现