01——生产监控平台——WPF

生产监控平台——

一、介绍

VS2022   .net core(net6版本）

1、文件夹：MVVM   /静态资源（图片、字体等）   、用户空间、资源字典等。

2、图片资源库：  https://www.iconfont.cn/       ;

1.资源字典Dictionary

1、Style

风格 样式：

第二个资源字典.

2.App.xaml

代码：绑定

3. ItemsControl

绑定列表用：

第二个：ItemsControl  :

4. 项目控件

2.UserControl

UserControl：如何使用Style   以及   Polyline  和Polyon    Path  

效果图：

1.MonitorUC：

代码：

[详情]

代码：

  public partial class MonitorUC : UserControl
{
public MonitorUC()
{
InitializeComponent();
}
}

功能注释

2.WorkShopDetailUC

代码;

[详情]

代码：

 public partial class WorkShopDetailUC : UserControl
{
public WorkShopDetailUC()
{
InitializeComponent();
}
private void Hyperlink_Click(object sender, RoutedEventArgs e)
{
detail.Visibility = Visibility.Visible;
//实现渐变动画
//位移
ThicknessAnimation thicknessAnimation = new ThicknessAnimation(new Thickness(0, 50, 0, -50), new Thickness(0, 0, 0, 0), new TimeSpan(0, 0, 0, 0, 400));
//透明度
DoubleAnimation doubleAnimation = new DoubleAnimation(0, 1, new TimeSpan(0, 0, 0, 0, 400));
Storyboard.SetTarget(thicknessAnimation, detailContent);
Storyboard.SetTarget(doubleAnimation, detailContent);
Storyboard.SetTargetProperty(thicknessAnimation, new PropertyPath("Margin"));
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("Opacity"));
Storyboard storyboard = new Storyboard();
storyboard.Children.Add(thicknessAnimation);
storyboard.Children.Add(doubleAnimation);
storyboard.Begin();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
// 位移
ThicknessAnimation thicknessAnimation = new ThicknessAnimation(
new Thickness(0, 0, 0, 0), new Thickness(0, 50, 0, -50),
new TimeSpan(0, 0, 0, 0, 400));
// 透明度
DoubleAnimation doubleAnimation = new DoubleAnimation(1, 0, new TimeSpan(0, 0, 0, 0, 400));
Storyboard.SetTarget(thicknessAnimation, detailContent);
Storyboard.SetTarget(doubleAnimation, detailContent);
Storyboard.SetTargetProperty(thicknessAnimation, new PropertyPath("Margin"));
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("Opacity"));
Storyboard storyboard = new Storyboard();
storyboard.Children.Add(thicknessAnimation);
storyboard.Children.Add(doubleAnimation);
//动画效果完了才关闭
storyboard.Completed += (se, ev) =>
{
detail.Visibility = Visibility.Collapsed;
};
storyboard.Begin();
}
}

3.RaderUC

界面：

代码：

public partial class RaderUC : UserControl
{
public RaderUC()
{
InitializeComponent();
SizeChanged += OnSizeChanged;  // Alt+ Enter
}
/// 

/// 窗体大小不变
/// 
/// 
/// 
private void OnSizeChanged(object sender,SizeChangedEventArgs e)
{
Drag();
}
/// 

/// 数据源， 支持数据绑定， 依赖属性
/// 
public static readonly DependencyProperty ItemSourceProperty=
DependencyProperty.Register("ItemSource",typeof(List),typeof(RaderUC));
public List ItemSource 
{
get{return (List)GetValue(ItemSourceProperty); }
set { SetValue(ItemSourceProperty,value); }
}
public void Drag()
{
if (ItemSource == null&&ItemSource.Count==0)
{
return;
}
// 清楚之前的画
mainCanvas.Children.Clear();
P1.Points.Clear();
P2.Points.Clear();
P3.Points.Clear();
P4.Points.Clear();
P5.Points.Clear();
//  调整大小
double size = Math.Min(RenderSize.Width,RenderSize.Height);
LayGrid.Height=size;
LayGrid.Width=size;
// 半径
double raduis=size/2;
// 步子跨度
double step = 360.0 / ItemSource.Count;
for(int i = 0;i<ItemSource.Count; i++)
{
//X  Y 坐标
double x = (raduis - 20) * Math.Cos((step * i - 90) * Math.PI / 180);  //  x偏移量
double y = (raduis - 20) * Math.Sin((step * i - 90) * Math.PI / 180);  //  y偏移量
P1.Points.Add(new Point(raduis+x,raduis + y));
P2.Points.Add(new Point(raduis + x*0.75,raduis + y*0.75));
P3.Points.Add(new Point(raduis + x*0.5,raduis + y*0.5));
P4.Points.Add(new Point(raduis + x*0.25,raduis + y*0.25));
P5.Points.Add(new Point(raduis + x * ItemSource[i].Value*0.01,raduis + y * ItemSource[i].Value * 0.01));
//  文字处理
TextBlock txt = new TextBlock();
txt.Width = 60;
txt.FontSize = 12;
txt.TextAlignment = TextAlignment.Center;
txt.HorizontalAlignment = HorizontalAlignment.Center;
txt.Text = ItemSource[i].ItemName;
txt.Foreground = new SolidColorBrush(Color.FromArgb(100, 255, 255, 255));
txt.SetValue(Canvas.LeftProperty, raduis + (raduis - 10) * Math.Cos((step * i - 90) * Math.PI / 180) - 30);
txt.SetValue(Canvas.TopProperty, raduis + (raduis - 10) * Math.Cos((step * i - 90) * Math.PI / 180) - 7);
mainCanvas.Children.Add(txt); //加入子节点
}
}
}

4.RingUC

界面：

代码：

 public partial class RingUC : UserControl
{
public RingUC()
{
InitializeComponent();
SizeChanged += OnSizeChanged;//界面大小改变 重新画
}
private void OnSizeChanged(object sender, SizeChangedEventArgs e)
{
Drug();
}
/// 

/// 百分比 比如70
/// 
public double PercentValue
{
get { return (double)GetValue(PercentValueProperty); }
set { SetValue(PercentValueProperty, value); }
}
// Using a DependencyProperty as the backing store for PercentValue.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty PercentValueProperty =
DependencyProperty.Register("PercentValue", typeof(double), typeof(RingUC));
/// 

/// 画圆环方法
/// 
private void Drug()
{
LayOutGrid.Width = Math.Min(RenderSize.Width, RenderSize.Height);
double raduis = LayOutGrid.Width / 2;
double x = raduis + (raduis - 3) * Math.Cos((PercentValue % 100 * 3.6 - 90) * Math.PI / 180);
double y = raduis + (raduis - 3) * Math.Sin((PercentValue % 100 * 3.6 - 90) * Math.PI / 180);
int Is50 = PercentValue < 50 ? 0 : 1;
//M:移动  A:画弧
string pathStr = $"M{raduis+0.01} 3A{raduis-3} {raduis - 3} 0 {Is50} 1 {x} {y}";//移动路径
//几何图形对象
var converter = TypeDescriptor.GetConverter(typeof(Geometry));
path.Data = (Geometry)converter.ConvertFrom(pathStr);
}
}

3.VIewsModel

属性：MonitorUC为属性

XAML：

3.1.ViewModel

using ProductMonitor.OpCommand;
using ProductMonitor.UserControls;
using ProductMonitor.ViewModels;
using ProductMonitor.Views;
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.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace ProductMonitor
{
/// 

/// Interaction logic for MainWindow.xaml
/// 
public partial class MainWindow : Window
{
/// 

/// 视图模型
/// 
MainViewVM mainViewVM = new MainViewVM();
public MainWindow()
{
InitializeComponent();
this.DataContext = mainViewVM;
}
/// 

/// 显示车间详情页
/// 
private void ShowDetailUC()
{
WorkShopDetailUC workShopDetailUC = new WorkShopDetailUC();
mainViewVM.MonitorUC = workShopDetailUC;
//动画效果(由下而上)
//位移 移动时间
ThicknessAnimation thicknessAnimation = new ThicknessAnimation(new Thickness(0, 50, 0, -50), new Thickness(0, 0, 0, 0), new TimeSpan(0, 0, 0, 0, 400));
//透明度
DoubleAnimation doubleAnimation = new DoubleAnimation(0, 1, new TimeSpan(0, 0, 0, 0, 400));
Storyboard.SetTarget(thicknessAnimation, workShopDetailUC);
Storyboard.SetTarget(doubleAnimation, workShopDetailUC);
Storyboard.SetTargetProperty(thicknessAnimation, new PropertyPath("Margin"));
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("Opacity"));
Storyboard storyboard = new Storyboard();
storyboard.Children.Add(thicknessAnimation);
storyboard.Children.Add(doubleAnimation);
storyboard.Begin();
}
/// 

/// 返回到监控
/// 
private void GoBackMonitor()
{
MonitorUC monitorUC = new MonitorUC();
mainViewVM.MonitorUC = monitorUC;
}
/// 

/// 展示详情命令
/// 
public Command ShowDetailCmm
{
get
{
return new Command(ShowDetailUC);
}
}
/// 

/// 返回监控界面命令
/// 
public Command GoBackCmm
{
get
{
return new Command(GoBackMonitor);
}
}
/// 

/// 最小化
/// 
/// 
/// 
private void BtnMin(object sender, RoutedEventArgs e)
{
//最小化
this.WindowState = WindowState.Minimized;
//this.WindowState = WindowState.Maximized;//最大化
}
/// 

/// 关闭
/// 
/// 
/// 
private void BtnClose(object sender, RoutedEventArgs e)
{
//this.Close();
Environment.Exit(0);
}
/// 

/// 弹出配置窗口
/// 
private void ShowSettingWin()
{
//父子关系
SettingsWin settingsWin = new SettingsWin() { Owner = this };
settingsWin.ShowDialog();
}
public Command ShowSettingaCmm
{
get { return new Command(ShowSettingWin); }
}
}
}

4.属性定义

4.1.依赖属性

5、Views

5.1.SettingsWin窗口

代码：

含有URL导航

  public partial class SettingsWin : Window
{
public SettingsWin()
{
InitializeComponent();
}
/// 

/// 定位到配置页面相应标题位置
/// 
/// 
/// 
private void RadioButton_Click(object sender, RoutedEventArgs e)
{
//程序集(授权)  路径
string tag = "";
var btn = sender as RadioButton;
if (btn != null)
{
tag = btn.Tag.ToString();
}
//frame.Navigate(new Uri("pack://application:,,,/ProductMonitor;component/Views/SettingsPage.xaml#" + tag, UriKind.RelativeOrAbsolute));
//# 片段
//程序集(授权)  路径  都在一起
//frame.Navigate(new Uri("pack://application:,,,/Views/SettingsPage.xaml", UriKind.RelativeOrAbsolute));
}
}

5.2 .页面控件Page

xaml:

点位表
删除
删除

：。cs: