张德长

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

基于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();
        }
    }
}

 

posted on   张德长  阅读(1374)  评论(7)  编辑  收藏  举报

相关博文：
· Revit二次开发 知识点总结（表格）
· CAD二次开发 学习笔记（3）
· WPF TreeView HierarchicalDataTemplate
· WPF复习知识点记录
· WPF DataGrid ItemsSource StaticResource
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示