基于WPF的 自动化设备数字看板
技术要点：
XAML的UI编程；
数据绑定（事件驱动→数据驱动）；
自定义组件；
MVVM分层架构；
liveChart等第三方组件；
Meter.xaml
<UserControl x:Class="DashBoard.Components.Meter"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:DashBoard.Components"
mc:Ignorable="d"
d:DesignHeight="50" d:DesignWidth="50">
<Grid>
<Canvas Name="canvas"/>
<Path Name="path_back" StrokeThickness="5"
Stroke="#32FFFFFF"/>
<Path Name="path_value" StrokeThickness="5"
Stroke="#1FDCF5"/>
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,10">
<TextBlock
Text="{Binding Value,RelativeSource={RelativeSource AncestorType=UserControl}}"
Foreground="#1FDCF5" FontSize="26"
HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Unit,RelativeSource={RelativeSource AncestorType=UserControl}}"
Foreground="#3FFF"
HorizontalAlignment="Center"/>
</StackPanel>
</Grid>
</UserControl>Meter.xaml.cs
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.Navigation;
using System.Windows.Shapes;
namespace DashBoard.Components
{
/// <summary>
/// Meter.xaml 的交互逻辑
/// </summary>
public partial class Meter : UserControl
{
public string Unit
{
get { return (string)GetValue(UnitProperty); }
set { SetValue(UnitProperty, value); }
}
// Using a DependencyProperty as the backing store for Unit. This enables animation, styling, binding, etc...
public static readonly DependencyProperty UnitProperty =
DependencyProperty.Register("Unit", typeof(string), typeof(Meter), new PropertyMetadata(""));
public double Value
{
get { return (double)GetValue(ValueProperty); }
set { SetValue(ValueProperty, value); }
}
// Using a DependencyProperty as the backing store for Value. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ValueProperty =
DependencyProperty.Register("Value", typeof(double), typeof(Meter),
new PropertyMetadata(0.0,new PropertyChangedCallback(OnValueChanged)));
private static void OnValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
(d as Meter).Update();
}
private void Update()
{
double current = Value / 100 * sum;
double px1 = r + r * 0.6 * Math.Cos((start) * toRadian);
double py1 = r + r * 0.6 * Math.Sin((start) * toRadian);
double px2 = r + r * 0.6 * Math.Cos((start + current) * toRadian);
double py2 = r + r * 0.6 * Math.Sin((start + current) * toRadian);
int flag = Value > 80 ? 1 : 0;
string pData1 = $"M{px1} {py1}A{r * 0.6} {r * 0.6} 0 {flag} 1 {px2} {py2}";
this.path_value.Data = PathGeometry.Parse(pData1);
}
public Meter()
{
InitializeComponent();
this.SizeChanged += Meter_SizeChanged;
}
double r;
double toRadian = Math.PI / 180;
double start = 160.0;
double sum = 220.0;
private void Meter_SizeChanged(object sender, SizeChangedEventArgs e)
{
this.canvas.Children.Clear();
r = e.NewSize.Width / 2.0;
double step = sum / 50;
double len1 = 5.0;
double len2 = 10.0;
double len3 = 15.0;
Color c = Color.FromArgb(40, 255, 255, 255);
Brush brush = new SolidColorBrush(c);
for (int i = 0; i <= 50; i++)
{
Line line = new Line()
{
X1 = r + r * Math.Cos((start + i * step) * toRadian),
Y1 = r + r * Math.Sin((start + i * step) * toRadian),
X2 = i % 5 == 0 ? r + (r - len2) * Math.Cos((start + i * step) * toRadian) :
r + (r - len1) * Math.Cos((start + i * step) * toRadian),
Y2 = i % 5 == 0 ? r + (r - len2) * Math.Sin((start + i * step) * toRadian) :
r + (r - len1) * Math.Sin((start + i * step) * toRadian),
Stroke = brush,
StrokeThickness = 1,
};
canvas.Children.Add(line);
if (i % 5 == 0)
{
TextBlock textBlock = new TextBlock()
{
Width = 30,
FontSize = 9,
TextAlignment = TextAlignment.Center,
Text = (i*2).ToString(),
Foreground = brush,
};
Canvas.SetLeft(textBlock, r - 15 + (r - len3) * Math.Cos((start + i * step) * toRadian));
Canvas.SetTop(textBlock, r - 5 + (r - len3) * Math.Sin((start + i * step) * toRadian));
canvas.Children.Add(textBlock);
}
}
double px1 = r + r*0.6 * Math.Cos((start) * toRadian);
double py1 = r + r*0.6 * Math.Sin((start) * toRadian);
double px2 = r + r*0.6 * Math.Cos((start+ sum) * toRadian);
double py2 = r + r*0.6 * Math.Sin((start+ sum) * toRadian);
string pData1 = $"M{px1} {py1}A{r * 0.6} {r * 0.6} 0 1 1 {px2} {py2}";
this.path_back.Data = PathGeometry.Parse(pData1);
this.path_back.Stroke = brush;
double current = Value / 100 * sum;
double px3 = r + r * 0.6 * Math.Cos((start + current) * toRadian);
double py3 = r + r * 0.6 * Math.Sin((start + current) * toRadian);
int flag = Value > 80 ? 1 : 0;
string pData2 = $"M{px1} {py1}A{r * 0.6} {r * 0.6} 0 {flag} 1 {px3} {py3}";
this.path_value.Data = PathGeometry.Parse(pData2);
}
}
}
WaterProgress.xaml
<UserControl x:Class="DashBoard.Components.WaterProgress"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:DashBoard.Components"
mc:Ignorable="d"
d:DesignHeight="200" d:DesignWidth="200">
<UserControl.Triggers>
<EventTrigger RoutedEvent="UserControl.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:4"
From="0" To="-166"
Storyboard.TargetName="tt1"
Storyboard.TargetProperty="X"
RepeatBehavior="Forever"/>
<DoubleAnimation Duration="0:0:3"
From="0" To="-166"
Storyboard.TargetName="tt2"
Storyboard.TargetProperty="X"
RepeatBehavior="Forever"/>
<DoubleAnimation Duration="0:0:5"
From="0" To="-166"
Storyboard.TargetName="tt3"
Storyboard.TargetProperty="X"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</UserControl.Triggers>
<Viewbox>
<Grid>
<Border Width="166" Height="166" CornerRadius="90">
<Border.Clip>
<EllipseGeometry Center="83,83" RadiusX="83" RadiusY="83"/>
</Border.Clip>
<Canvas>
<Canvas.RenderTransform>
<TranslateTransform Y="70" x:Name="tth"/>
</Canvas.RenderTransform>
<Path Data="M0 10A80 80 0 0 1 83 10A80 80 0 0 0 166 10A80 80 0 0 1 249 10A80 80 0 0 0 332 10L332 182 0 182Z"
Fill="#4C0B3D90" >
<Path.RenderTransform>
<TranslateTransform X="-10" x:Name="tt1"/>
</Path.RenderTransform>
</Path>
<Path Data="M0 50A90 90 0 0 1 99 50A80 80 0 0 0 196 50A80 80 0 0 1 299 50A80 80 0 0 0 332 50L332 182 0 182Z"
Fill="#7F0B3D90">
<Path.RenderTransform>
<TranslateTransform X="-90" x:Name="tt2"/>
</Path.RenderTransform>
</Path>
<Path Data="M0 20A80 80 0 0 1 63 20A80 80 0 0 0 146 30A80 80 0 0 1 229 20A80 80 0 0 0 332 20L332 182 0 182Z"
Fill="#0B3D90" >
<Path.RenderTransform>
<TranslateTransform X="-60" x:Name="tt3"/>
</Path.RenderTransform>
</Path>
</Canvas>
</Border>
<Border Width="166" Height="166" CornerRadius="90"
BorderThickness="5" BorderBrush="#1FDCF5">
<Border.Background>
<RadialGradientBrush>
<GradientStop Color="#33FFFFFF" Offset="1"/>
<GradientStop Color="#22FFFFFF" Offset="0.528"/>
<GradientStop Color="#11FFFFFF" />
</RadialGradientBrush>
</Border.Background>
</Border>
</Grid>
</Viewbox>
</UserControl>WaterProgress.xaml.cs
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.Navigation;
using System.Windows.Shapes;
namespace DashBoard.Components
{
/// <summary>
/// WaterProgress.xaml 的交互逻辑
/// </summary>
public partial class WaterProgress : UserControl
{
public double Value
{
get { return (double)GetValue(ValueProperty); }
set { SetValue(ValueProperty, value); }
}
// Using a DependencyProperty as the backing store for Value. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ValueProperty =
DependencyProperty.Register("Value", typeof(double), typeof(WaterProgress),
new PropertyMetadata(0.0,new PropertyChangedCallback(OnValueChanged)));
public static void OnValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
double newValue = (double)e.NewValue;
(d as WaterProgress).tth.Y = 160 - newValue * 1.6;
}
public WaterProgress()
{
InitializeComponent();
}
}
}
MainWindow.xaml
<Window x:Class="DashBoard.Views.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:DashBoard"
xmlns:c="clr-namespace:DashBoard.Components"
xmlns:lc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
mc:Ignorable="d"
WindowStartupLocation="CenterScreen"
FontFamily="Microsoft YaHei"
FontWeight="ExtraLight"
Title="MainWindow" Height="700" Width="1300">
<WindowChrome.WindowChrome>
<WindowChrome NonClientFrameEdges="None"
GlassFrameThickness="15"
UseAeroCaptionButtons="True"
CaptionHeight="60"/>
</WindowChrome.WindowChrome>
<Window.Background>
<RadialGradientBrush Center="1,0.1" GradientOrigin="1,0.1"
RadiusX="0.9" RadiusY="0.5"
>
<GradientStop Color="#FF0F4D86" Offset="-1"/>
<GradientStop Color="#010C1D" Offset="2"/>
</RadialGradientBrush>
</Window.Background>
<Window.Resources>
<ResourceDictionary Source="../Assets/Styles/AppStyles.xaml"/>
</Window.Resources>
<Grid ClipToBounds="True">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="350"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--第一行-->
<Grid VerticalAlignment="Center" HorizontalAlignment="Left" >
<Grid.RenderTransform>
<SkewTransform AngleX="-30"/>
</Grid.RenderTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Height="30" Width="345" >
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#FF1E3A69" Offset="0"/>
<GradientStop Color="#0C192A" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Width="13" Background="#101E34" Grid.Column="1" Margin="3,2"/>
<Border Width="13" Background="#101E34" Grid.Column="2" Margin="3,2"/>
<Border Width="13" Background="#101E34" Grid.Column="3" Margin="3,2"/>
</Grid>
<Ellipse Width="40" Height="40"
VerticalAlignment="Center" Fill="#FF1F3A69"
HorizontalAlignment="Left" Margin="10,0">
</Ellipse>
<Image Width="30" Height="30" Source="../Assets/Images/logo.png"
HorizontalAlignment="Left" Margin="15,0" Panel.ZIndex="10"/>
<TextBox Text="自动化生产车间设备监测中心" VerticalAlignment="Center"
HorizontalAlignment="Left" Margin="60,5,60,5" FontSize="18"
Foreground="#1FDCF5" FontWeight="Normal" Background="Transparent"
FontFamily="{StaticResource Dingding}"
BorderThickness="0">
</TextBox>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center"
HorizontalAlignment="Left" Margin="395,0,0,0">
<RadioButton Content="加工中心" IsChecked="True" Style="{StaticResource NavButtonStyle}" />
<RadioButton Content="电火花" IsChecked="False" Style="{StaticResource NavButtonStyle}"/>
<RadioButton Content="机械臂" IsChecked="False" Style="{StaticResource NavButtonStyle}"/>
<RadioButton Content="三坐标" IsChecked="False" Style="{StaticResource NavButtonStyle}"/>
<RadioButton Content="线切割" IsChecked="False" Style="{StaticResource NavButtonStyle}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center"
HorizontalAlignment="Right">
<TextBlock Text="正常设备" Margin="-20,0" VerticalAlignment="Center"
FontSize="12" Foreground="#661FDCF5"
FontFamily="{StaticResource Dingding}"/>
<Border Height="24" Width="70" BorderThickness="0,1" Margin="10,0">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Transparent" Offset="0"/>
<GradientStop Color="#331FDCF5" Offset="0.5"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<RadialGradientBrush GradientOrigin="0.5,1" Center="0.5,1" RadiusX="0.8">
<GradientStop Color="#1FDCF5" Offset="0"/>
<GradientStop Color="Transparent" Offset="0.5"/>
</RadialGradientBrush>
</Border.BorderBrush>
<TextBlock Text="128" Margin="25,0" VerticalAlignment="Center"
FontSize="12" Foreground="#661FDCF5" HorizontalAlignment="Center"
FontFamily="{StaticResource Dingding}"/>
</Border>
<TextBlock Text="告警设备" Margin="-20,0" VerticalAlignment="Center"
FontSize="12" Foreground="#661FDCF5"
FontFamily="{StaticResource Dingding}"/>
<Border Height="24" Width="70" BorderThickness="0,1" Margin="10,0">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Transparent" Offset="0"/>
<GradientStop Color="#8ea286" Offset="0.5"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<RadialGradientBrush GradientOrigin="0.5,1" Center="0.5,1" RadiusX="0.8">
<GradientStop Color="#1FDCF5" Offset="0"/>
<GradientStop Color="Transparent" Offset="0.5"/>
</RadialGradientBrush>
</Border.BorderBrush>
<TextBlock Text="10" Margin="25,0" VerticalAlignment="Center"
FontSize="12" Foreground="Yellow" HorizontalAlignment="Center"
FontFamily="{StaticResource Dingding}"/>
</Border>
<TextBlock Text="故障设备" Margin="-20,0" VerticalAlignment="Center"
FontSize="12" Foreground="#661FDCF5"
FontFamily="{StaticResource Dingding}"/>
<Border Height="24" Width="70" BorderThickness="0,1" Margin="10,0">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Transparent" Offset="0"/>
<GradientStop Color="#9b829f" Offset="0.5"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<RadialGradientBrush GradientOrigin="0.5,1" Center="0.5,1" RadiusX="0.8">
<GradientStop Color="#1FDCF5" Offset="0"/>
<GradientStop Color="Transparent" Offset="0.5"/>
</RadialGradientBrush>
</Border.BorderBrush>
<TextBlock Text="3" Margin="25,0" VerticalAlignment="Center"
FontSize="12" Foreground="HotPink" HorizontalAlignment="Center"
FontFamily="{StaticResource Dingding}"/>
</Border>
</StackPanel>
<!--第二行-->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="700"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!--第一列-->
<c:DeviceBackground Source="../Assets/Images/Devices/d_2.png"/>
<!--第二列-->
<Border Grid.Column="1" Margin="0,10" BorderThickness="0,1">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#98BEE4" Offset="-3"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ItemsControl ItemsSource="{Binding ItemList}" Foreground="white">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Margin="10">
<TextBlock Foreground="Orange"
VerticalAlignment="Bottom" HorizontalAlignment="Left"
FontFamily="{StaticResource Dingding }">
<Run Text="NO-" />
<Run Text="{Binding Index,StringFormat={}{0:00}}" FontSize="22"/>
</TextBlock>
<TextBlock FontSize="18" Foreground="#991FDCF5"
VerticalAlignment="Center" HorizontalAlignment="Left"
FontFamily="{StaticResource Dingding }">
<Run Text="设备正常运行"/>
<Ellipse Width="8" Height="8" Fill="#1FDCF5"/>
</TextBlock>
</StackPanel>
<Grid Grid.Row="1" Margin="10">
<Border BorderThickness="0,2">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Transparent" Offset="0"/>
<GradientStop Color="Transparent" Offset="0.3"/>
<GradientStop Color="AliceBlue" Offset="0.7"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="工作模式" VerticalAlignment="Center"
HorizontalAlignment="Center"
Foreground="#1FDCF5"
FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="AUTO" VerticalAlignment="Center"
HorizontalAlignment="Center" Grid.Column="1"
Foreground="#1FDCF5"
FontFamily="{StaticResource Dingding}"
FontWeight="Bold"/>
<TextBlock Text="进给速率" VerticalAlignment="Center"
HorizontalAlignment="Center"
Grid.Row="1"
Foreground="#1FDCF5"
FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="8" VerticalAlignment="Center"
HorizontalAlignment="Center" Grid.Column="1"
Grid.Row="1" Foreground="#1FDCF5"
FontFamily="{StaticResource Dingding}"
FontWeight="Bold"/>
<TextBlock Text="主轴转速" VerticalAlignment="Center"
HorizontalAlignment="Center" Grid.Row="2"
Foreground="#1FDCF5"
FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="1200" VerticalAlignment="Center"
HorizontalAlignment="Center" Grid.Row="2"
Grid.Column="1"
Foreground="#1FDCF5"
FontFamily="{StaticResource Dingding}"
FontWeight="Bold"/>
<TextBlock Text="r/m" VerticalAlignment="Center"
HorizontalAlignment="Center" Grid.Row="2"
Grid.Column="2"
Foreground="#1FDCF5"
FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="主轴负载" VerticalAlignment="Center"
HorizontalAlignment="Center" Grid.Row="3"
Foreground="#1FDCF5"
FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="0" VerticalAlignment="Center"
HorizontalAlignment="Center" Grid.Row="3"
Grid.Column="1"
Foreground="#1FDCF5"
FontFamily="{StaticResource Dingding}"
FontWeight="Bold"/>
<TextBlock Text="程序编号" VerticalAlignment="Center"
HorizontalAlignment="Center" Grid.Row="4"
Foreground="#1FDCF5"
FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="7014" VerticalAlignment="Center"
HorizontalAlignment="Center" Grid.Row="4"
Grid.Column="1"
Foreground="#1FDCF5"
FontFamily="{StaticResource Dingding}"
FontWeight="Bold"/>
<TextBlock Text="工序编号" VerticalAlignment="Center"
HorizontalAlignment="Center" Grid.Row="5"
Foreground="#1FDCF5"
FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="56" VerticalAlignment="Center"
HorizontalAlignment="Center" Grid.Row="5"
Grid.Column="1"
Foreground="#1FDCF5"
FontFamily="{StaticResource Dingding}"
FontWeight="Bold"/>
</Grid>
</Border>
</Grid>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
<!--第三列-->
<Grid Grid.Column="2" Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border BorderThickness="1" CornerRadius="40">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Transparent" Offset="0"/>
<GradientStop Color="#1fDCF5" Offset="0.5"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<c:WaterProgress Value="54" HorizontalAlignment="Left" Margin="5"/>
</Border>
<StackPanel Orientation="Vertical" HorizontalAlignment="Right"
VerticalAlignment="Center" Margin="30,0">
<StackPanel Orientation="Horizontal" Margin="0,5">
<TextBlock Text="任务数量" Margin="5,0" Foreground="#999AC7DA"
VerticalAlignment="Center"/>
<TextBlock Text="478" Margin="5,0" Foreground="#1FDCF5"
VerticalAlignment="Center" FontSize="14"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5">
<TextBlock Text="任务占比" Margin="5,0" Foreground="#999AC7DA"
VerticalAlignment="Center"/>
<TextBlock Text="54%" Margin="5,0" Foreground="#1FDCF5"
VerticalAlignment="Center" FontSize="14"/>
</StackPanel>
</StackPanel>
<UniformGrid Grid.Row="1">
<Border BorderBrush="#2FFF" BorderThickness="1,1,1,1">
<StackPanel VerticalAlignment="Center" Margin="3,0">
<TextBlock Text="运行时长" Foreground="#559AC7DA"
FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="1234.567" Margin="0,5" FontSize="16" FontWeight="Bold"
Foreground="#1FDCF5" FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="+12.00%" Foreground="#999AC7DA" FontSize="10"/>
</StackPanel>
</Border>
<Border BorderBrush="#2FFF" BorderThickness="1,1,1,1">
<StackPanel VerticalAlignment="Center" Margin="3,0">
<TextBlock Text="故障停机" Foreground="#559AC7DA"
FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="20min" Margin="0,5" FontSize="16" FontWeight="Bold"
Foreground="#1FDCF5" FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="-5.2%" Foreground="#999AC7DA" FontSize="10"/>
</StackPanel>
</Border>
<Border BorderBrush="#2FFF" BorderThickness="1,1,1,1">
<StackPanel VerticalAlignment="Center" Margin="3,0">
<TextBlock Text="电量消耗" Foreground="#559AC7DA"
FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="8759kWh" Margin="0,5" FontSize="16" FontWeight="Bold"
Foreground="#1FDCF5" FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="+7.56%" Foreground="#999AC7DA" FontSize="10"/>
</StackPanel>
</Border>
<Border BorderBrush="#2FFF" BorderThickness="1,1,1,1">
<StackPanel VerticalAlignment="Center" Margin="3,0">
<TextBlock Text="用水量" Foreground="#559AC7DA"
FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="366T" Margin="0,5" FontSize="16" FontWeight="Bold"
Foreground="#1FDCF5" FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="+8.05%" Foreground="#999AC7DA" FontSize="10"/>
</StackPanel>
</Border>
</UniformGrid>
</Grid>
</Grid>
<!--第三行-->
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<GroupBox Grid.Column="0" Style="{StaticResource GroupBoxStyle}"
Header="异常报警">
<ItemsControl ItemsSource="{Binding AlarmList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Height="30" Background="Transparent" Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition />
<ColumnDefinition/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Index,StringFormat={}{0:00}}"
HorizontalAlignment="Center" Foreground="#1FDCF5"
VerticalAlignment="Center" FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="{Binding Time}" Grid.Column="1"
HorizontalAlignment="Center" Foreground="#1FDCF5"
VerticalAlignment="Center" FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="{Binding Message}" Grid.Column="2"
HorizontalAlignment="Center" Foreground="#1FDCF5"
VerticalAlignment="Center" FontFamily="{StaticResource Dingding}"/>
<TextBlock Text="{Binding Status}" Grid.Column="3"
HorizontalAlignment="Center" Foreground="Red"
VerticalAlignment="Center" FontFamily="{StaticResource Dingding}"/>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="grid" Property="Background" Value="#999AC7DA"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</GroupBox>
<GroupBox Grid.Column="1" Style="{StaticResource GroupBoxStyle}"
Header="能效数据">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="1.5*"/>
<RowDefinition />
</Grid.RowDefinitions>
<UniformGrid Rows="1">
<StackPanel Margin="0,5">
<TextBlock Text="68" Foreground="IndianRed" HorizontalAlignment="Center"/>
<TextBlock Text="能效指数" Foreground="#AFFF" HorizontalAlignment="Center"/>
</StackPanel>
<StackPanel Margin="0,5">
<TextBlock Text="15.3%" Foreground="OrangeRed" HorizontalAlignment="Center"/>
<TextBlock Text="水" Foreground="#5FFF" HorizontalAlignment="Center"/>
</StackPanel>
<StackPanel Margin="0,5">
<TextBlock Text="44.7%" Foreground="LightSteelBlue" HorizontalAlignment="Center"/>
<TextBlock Text="电" Foreground="#5FFF" HorizontalAlignment="Center"/>
</StackPanel>
<StackPanel Margin="0,5">
<TextBlock Text="30%" Foreground="LightSeaGreen" HorizontalAlignment="Center"/>
<TextBlock Text="气" Foreground="#5FFF" HorizontalAlignment="Center"/>
</StackPanel>
</UniformGrid>
<lc:PieChart Grid.Row="1" Margin="10" InnerRadius="30">
<lc:PieChart.Series >
<lc:PieSeries Values="0.18" StrokeThickness="1" Fill="#2195F2"/>
<lc:PieSeries Values="0.17" StrokeThickness="1" Fill="#F34336"/>
<lc:PieSeries Values="0.04" StrokeThickness="1" Fill="#FEC007"/>
<lc:PieSeries Values="0.26" StrokeThickness="1" Fill="#607D8A"/>
<lc:PieSeries Values="0.08" StrokeThickness="1" Fill="#01A4BC"/>
<lc:PieSeries Values="0.27" StrokeThickness="1" Fill="#5EC1A6"/>
</lc:PieChart.Series>
</lc:PieChart>
<TextBlock Text="能耗占比" FontSize="12" Grid.Row="1"
VerticalAlignment="Center" HorizontalAlignment="Center"
Foreground="#1EDCF5" FontFamily="{StaticResource Dingding}"/>
<UniformGrid Rows="2" Grid.Row="2">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
<Ellipse Width="8" Height=" 8" Fill="#2195F2"/>
<Run Text="车间设备11" Foreground="#5FFF"/>
</TextBlock>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
<Ellipse Width="8" Height=" 8" Fill="#F34336"/>
<Run Text="车间设备12" Foreground="#5FFF"/>
</TextBlock>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
<Ellipse Width="8" Height=" 8" Fill="#FEC007"/>
<Run Text="车间设备13" Foreground="#5FFF"/>
</TextBlock>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
<Ellipse Width="8" Height=" 8" Fill="#607D8A"/>
<Run Text="车间设备14" Foreground="#5FFF"/>
</TextBlock>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
<Ellipse Width="8" Height=" 8" Fill="#01A4BC"/>
<Run Text="车间设备15" Foreground="#5FFF"/>
</TextBlock>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
<Ellipse Width="8" Height=" 8" Fill="#5EC1A6"/>
<Run Text="车间设备16" Foreground="#5FFF"/>
</TextBlock>
</UniformGrid>
</Grid>
</GroupBox>
<GroupBox Grid.Column="2" Style="{StaticResource GroupBoxStyle}"
Header="生产效率">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<c:Meter Value="45" Unit="件/分钟" Margin="50,10"/>
<c:Meter Grid.Row="1" Unit="件/分钟" Value="88" Margin="50,10"/>
</Grid>
</GroupBox>
<GroupBox Grid.Column="3" Style="{StaticResource GroupBoxStyle}"
Header="产量统计">
<UniformGrid Columns="1">
<lc:CartesianChart Margin="20">
<lc:CartesianChart.Series>
<lc:LineSeries Values="46,20,30,56,57,34,76,54,75,65,44,45,52,73,58,34,76,54,75,65"
PointGeometrySize="0" Stroke="#1FDCF5"
StrokeThickness="1">
<lc:LineSeries.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#331FDCF5" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</lc:LineSeries.Fill>
</lc:LineSeries>
</lc:CartesianChart.Series>
<lc:CartesianChart.AxisX>
<lc:Axis Labels="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20">
<lc:Axis.Separator>
<lc:Separator Step="1" StrokeThickness="0"/>
</lc:Axis.Separator>
</lc:Axis>
</lc:CartesianChart.AxisX>
<lc:CartesianChart.AxisY>
<lc:Axis MinValue="0" MaxValue="100">
<lc:Axis.Separator>
<lc:Separator Step="20" Stroke="#2FFF"/>
</lc:Axis.Separator>
</lc:Axis>
</lc:CartesianChart.AxisY>
</lc:CartesianChart>
<lc:CartesianChart Margin="20">
<lc:CartesianChart.Series>
<lc:LineSeries Values="34,76,54,75,65,56,57,34,46,20,30,58,76,54,75,65,44,45,52,73"
PointGeometrySize="0" Stroke="#ffa500"
StrokeThickness="1">
<lc:LineSeries.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#a38b53" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</lc:LineSeries.Fill>
</lc:LineSeries>
</lc:CartesianChart.Series>
<lc:CartesianChart.AxisX>
<lc:Axis Labels="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20">
<lc:Axis.Separator>
<lc:Separator Step="1" StrokeThickness="0"/>
</lc:Axis.Separator>
</lc:Axis>
</lc:CartesianChart.AxisX>
<lc:CartesianChart.AxisY>
<lc:Axis MinValue="0" MaxValue="100">
<lc:Axis.Separator>
<lc:Separator Step="20" Stroke="#2FFF"/>
</lc:Axis.Separator>
</lc:Axis>
</lc:CartesianChart.AxisY>
</lc:CartesianChart>
</UniformGrid>
</GroupBox>
</Grid>
</Grid>
</Window>MainWindow.xaml.cs
using DashBoard.ViewModels;
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.Navigation;
using System.Windows.Shapes;
namespace DashBoard.Views
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainViewModel();
}
}
}
