文章目录
- 1、项目准备
- 2、功能实现
- 1、EnviromentModel.cs 代码
- 2、GroubBoxViewModel.cs 代码实现
- 3、ViewModelLocator.cs 依赖注入
- 4、GroubBoxWindow.xaml 样式布局
- 5、数据绑定
- 3、效果展示
- 4、资源获取
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; }
#endregion
public 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 });
#endregion
CreateTimer(); //创建定时器动态改变数据
}
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>();
//添加其他 viewModel
return 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边框样式实现
