2021-09-03 WPF上位机通用框架平台实战-Dashboard

微软MVP Eleven

于 2021-09-03 10:03:25 发布

阅读量3.3w

点赞数

分类专栏： # WPF上位机通用框架平台实战文章标签： wpf python pycharm

本文链接：https://blog.csdn.net/zhaoxi2020/article/details/120075456

版权

WPF上位机通用框架平台实战专栏收录该内容

7 篇文章 15 订阅

订阅专栏

在这里插入图片描述

一：Dashboard窗口布局和功能实现

<UserControl x:Class="Zhaoxi.HostComputer.Views.MonitorView"
             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:Zhaoxi.HostComputer.Views"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" Foreground="#444" UseLayoutRounding="True" TextOptions.TextRenderingMode="ClearType"
             d:DesignHeight="650" d:DesignWidth="1000">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Zhaoxi.HostComputer;component/Assets/Styles/DataGridStyle.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/Zhaoxi.HostComputer;component/Assets/Styles/ScrollViewerStyle.xaml"/>

                <ResourceDictionary>
                    <Style TargetType="RadioButton" x:Key="TimeRangeButtonStyle">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="RadioButton">
                                    <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="11"/>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter Property="Foreground" Value="#FF3269DE"/>
                                            <Setter Property="FontWeight" Value="Bold"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid Margin="30,20">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="1.5*"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Border BorderBrush="#EEE" BorderThickness="0,0,1,0"/>
            <Border BorderBrush="#EEE" BorderThickness="0,0,1,0" Grid.Column="1"/>
            <!--基本信息-->
            <Grid Margin="0,0,10,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition/>
                    <RowDefinition Height="20"/>
                    <RowDefinition Height="40"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBlock Text="设备运行工况" FontWeight="Bold" Foreground="#555" VerticalAlignment="Center" Margin="5,0"/>
                <UniformGrid Columns="3" Grid.Row="1">
                    <Border Background="White" CornerRadius="5" Margin="5">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.1"/>
                        </Border.Effect>
                        <Grid VerticalAlignment="Center" Margin="10,0">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="当前状态" FontSize="10" Foreground="#999"/>
                            <TextBlock Text="运行" Grid.Row="1" FontSize="14" Margin="0,3"/>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="5" Margin="5">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.1"/>
                        </Border.Effect>
                        <Grid VerticalAlignment="Center" Margin="10,0">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="周运行时长" FontSize="10" Foreground="#999"/>
                            <TextBlock Text="80h" Grid.Row="1" FontSize="14" Margin="0,3"/>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="5" Margin="5">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.1"/>
                        </Border.Effect>
                        <Grid VerticalAlignment="Center" Margin="10,0">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="周关机时长" FontSize="10" Foreground="#999"/>
                            <TextBlock Text="50h" Grid.Row="1" FontSize="14" Margin="0,3"/>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="5" Margin="5">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.1"/>
                        </Border.Effect>
                        <Grid VerticalAlignment="Center" Margin="10,0">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="周待机时长" FontSize="10" Foreground="#999"/>
                            <TextBlock Text="50h" Grid.Row="1" FontSize="14" Margin="0,3"/>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="5" Margin="5">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.1"/>
                        </Border.Effect>
                        <Grid VerticalAlignment="Center" Margin="10,0">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="周故障时长" FontSize="10" Foreground="#999"/>
                            <TextBlock Text="2h" Grid.Row="1" FontSize="14" Margin="0,3"/>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="5" Margin="5">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.1"/>
                        </Border.Effect>
                        <Grid VerticalAlignment="Center" Margin="10,0">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="健康状态" FontSize="10" Foreground="#999"/>
                            <TextBlock Text="良好" Grid.Row="1" FontSize="14" Margin="0,3"/>
                        </Grid>
                    </Border>
                </UniformGrid>

                <TextBlock Text="设备基本信息" Grid.Row="3" FontWeight="Bold" Foreground="#555" VerticalAlignment="Center" Margin="5,0"/>
                <UniformGrid Grid.Row="4" Columns="3">
                    <StackPanel Margin="5">
                        <TextBlock Text="1.44m" FontSize="16"/>
                        <TextBlock Text="最大工作范围" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                    <StackPanel Margin="5">
                        <TextBlock Text="20kg" FontSize="16"/>
                        <TextBlock Text="有效载荷" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                    <StackPanel Margin="5">
                        <TextBlock Text="6J" FontSize="16"/>
                        <TextBlock Text="有效轴数" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                    <StackPanel Margin="5">
                        <TextBlock Text="0.001cm" FontSize="16"/>
                        <TextBlock Text="重复定位精确度" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                    <StackPanel Margin="5">
                        <TextBlock Text="2500w" FontSize="16"/>
                        <TextBlock Text="额定功率" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                    <StackPanel Margin="5">
                        <TextBlock Text="5kg" FontSize="16"/>
                        <TextBlock Text="承重能力" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                    <StackPanel Margin="5">
                        <TextBlock Text="2.1m/s" FontSize="16"/>
                        <TextBlock Text="J6轴最大速度" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                    <StackPanel Margin="5">
                        <TextBlock Text="200-600v" FontSize="16"/>
                        <TextBlock Text="电源电压" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                    <StackPanel Margin="5">
                        <TextBlock Text="225kg" FontSize="16"/>
                        <TextBlock Text="净重" FontSize="10" Foreground="#666" Margin="0,3"/>
                    </StackPanel>
                </UniformGrid>
            </Grid>

            <!--参数分析-->
            <Grid Margin="10,0" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBlock Text="参数分析" FontWeight="Bold" Foreground="#555" VerticalAlignment="Center" Margin="5,0"/>
                <Border Background="White" Grid.Row="1" CornerRadius="5" Margin="5">
                    <Border.Effect>
                        <DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.1"/>
                    </Border.Effect>
                </Border>
                <UniformGrid Columns="2" Grid.Row="1">
                    <Grid Margin="20">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <TextBlock Text="[电压]" VerticalAlignment="Top"/>
                        <lvc:CartesianChart Grid.Row="1">
                            <lvc:CartesianChart.Series>
                                <lvc:LineSeries Stroke="#FF7261" PointGeometrySize="0" Values="156,600,70,760,320,540,880,340,500">
                                    <lvc:LineSeries.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#FFE3E0" Offset="0"/>
                                            <GradientStop Color="White" Offset="1"/>
                                        </LinearGradientBrush>
                                    </lvc:LineSeries.Fill>
                                </lvc:LineSeries>
                            </lvc:CartesianChart.Series>
                            <lvc:CartesianChart.AxisX>
                                <lvc:Axis ShowLabels="True" Labels="1:00,2:00,3:00,4:00,5:00,6:00,7:00,8:00,9:00" 
                                          LabelsRotation="0" FontSize="8">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="1" StrokeThickness="0"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisX>
                            <lvc:CartesianChart.AxisY>
                                <lvc:Axis MinValue="0" ShowLabels="True" FontSize="8">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="200"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisY>
                        </lvc:CartesianChart>
                    </Grid>
                    <Grid Margin="20">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <TextBlock Text="[电流]" VerticalAlignment="Top"/>
                        <lvc:CartesianChart Grid.Row="1">
                            <lvc:CartesianChart.Series>
                                <lvc:LineSeries Stroke="#FECC71"
                                                    PointGeometrySize="0" Values="156,600,70,760,320,540,880,340,500">
                                    <lvc:LineSeries.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#FFF2DE" Offset="0"/>
                                            <GradientStop Color="White" Offset="1"/>
                                        </LinearGradientBrush>
                                    </lvc:LineSeries.Fill>
                                </lvc:LineSeries>
                            </lvc:CartesianChart.Series>
                            <lvc:CartesianChart.AxisX>
                                <lvc:Axis ShowLabels="True" Labels="1:00,2:00,3:00,4:00,5:00,6:00,7:00,8:00,9:00" 
                                          LabelsRotation="0" FontSize="8">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="1" StrokeThickness="0"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisX>
                            <lvc:CartesianChart.AxisY>
                                <lvc:Axis MinValue="0" MaxValue="1000" ShowLabels="True" FontSize="8">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="200"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisY>
                        </lvc:CartesianChart>
                    </Grid>
                    <Grid Margin="20">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <TextBlock Text="[负荷]" VerticalAlignment="Top"/>
                        <lvc:CartesianChart Grid.Row="1">
                            <lvc:CartesianChart.Series>
                                <lvc:LineSeries Stroke="#5CD0E1" PointGeometrySize="0" Values="560,160,70,176,302,154,808,340,500">
                                    <lvc:LineSeries.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#DBF3F9" Offset="0"/>
                                            <GradientStop Color="White" Offset="1"/>
                                        </LinearGradientBrush>
                                    </lvc:LineSeries.Fill>
                                </lvc:LineSeries>
                            </lvc:CartesianChart.Series>
                            <lvc:CartesianChart.AxisX>
                                <lvc:Axis ShowLabels="True" Labels="1:00,2:00,3:00,4:00,5:00,6:00,7:00,8:00,9:00" 
                                          LabelsRotation="0" FontSize="8">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="1" StrokeThickness="0"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisX>
                            <lvc:CartesianChart.AxisY>
                                <lvc:Axis MinValue="0" MaxValue="1000" ShowLabels="True" FontSize="8">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="200"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisY>
                        </lvc:CartesianChart>
                    </Grid>
                    <Grid Margin="20">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <TextBlock Text="[温度]" VerticalAlignment="Top"/>
                        <lvc:CartesianChart Grid.Row="1">
                            <lvc:CartesianChart.Series>
                                <lvc:LineSeries Stroke="#7ADA95" PointGeometrySize="0" Values="220,300,100,500,800,400,270,600,560">
                                    <lvc:LineSeries.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#EDFAF0" Offset="0"/>
                                            <GradientStop Color="White" Offset="1"/>
                                        </LinearGradientBrush>
                                    </lvc:LineSeries.Fill>
                                </lvc:LineSeries>
                            </lvc:CartesianChart.Series>
                            <lvc:CartesianChart.AxisX>
                                <lvc:Axis ShowLabels="True" Labels="1:00,2:00,3:00,4:00,5:00,6:00,7:00,8:00,9:00" 
                                          LabelsRotation="0" FontSize="8">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="1" StrokeThickness="0"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisX>
                            <lvc:CartesianChart.AxisY>
                                <lvc:Axis MinValue="0" MaxValue="1000" ShowLabels="True" FontSize="8">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="200"/>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisY>
                        </lvc:CartesianChart>
                    </Grid>
                </UniformGrid>
            </Grid>

            <!--报警事件-->
            <Grid Grid.Column="2" Margin="10,0,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="120"/>
                    <RowDefinition/>
                    <RowDefinition Height="60"/>
                </Grid.RowDefinitions>
                <TextBlock Text="报警事件" FontWeight="Bold" Foreground="#555" VerticalAlignment="Center" Margin="5,0"/>
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right">
                    <RadioButton Content="本月" Style="{StaticResource TimeRangeButtonStyle}"/>
                    <RadioButton Content="本周" IsChecked="True" Style="{StaticResource TimeRangeButtonStyle}" Margin="10,0"/>
                    <RadioButton Content="本日" Style="{StaticResource TimeRangeButtonStyle}"/>
                </StackPanel>
                <UniformGrid Rows="1" Grid.Row="1">
                    <Border Background="#FF3269DE" Margin="5" CornerRadius="5" 
                            TextBlock.Foreground="White" TextBlock.FontSize="10">
                        <Grid>
                            <TextBlock Text="Alarm" Foreground="#11FFFFFF" FontSize="60" VerticalAlignment="Bottom" HorizontalAlignment="Right"
                                       Margin="0,0,-10,-20" FontWeight="Bold"/>
                            <Grid VerticalAlignment="Center" Margin="10,0">
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="设备二" FontSize="14"/>
                                <TextBlock Text="级别：紧急" HorizontalAlignment="Right" VerticalAlignment="Center"/>
                                <StackPanel Grid.Row="1" Margin="0,8">
                                    <TextBlock Text="设备停止运行"/>
                                    <TextBlock Text="生命值较低，建议维修。"/>
                                </StackPanel>
                                <TextBlock Text="2021/05/30 02:00:00" Grid.Row="2" HorizontalAlignment="Right" Margin="0,10,0,0"/>
                            </Grid>
                        </Grid>
                    </Border>
                    <Border Background="#FF3269DE" Margin="5" CornerRadius="5" 
                            TextBlock.Foreground="White" TextBlock.FontSize="10">
                        <Grid>
                            <TextBlock Text="Alarm" Foreground="#11FFFFFF" FontSize="60" VerticalAlignment="Bottom" HorizontalAlignment="Right"
                                       Margin="0,0,-10,-20" FontWeight="Bold"/>
                            <Grid VerticalAlignment="Center" Margin="10,0">
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="设备二" FontSize="14"/>
                                <TextBlock Text="级别：紧急" HorizontalAlignment="Right" VerticalAlignment="Center"/>
                                <StackPanel Grid.Row="1" Margin="0,8">
                                    <TextBlock Text="设备停止运行"/>
                                    <TextBlock Text="生命值较低，建议维修。"/>
                                </StackPanel>
                                <TextBlock Text="2021/05/30 02:00:00" Grid.Row="2" HorizontalAlignment="Right" Margin="0,10,0,0"/>
                            </Grid>
                        </Grid>
                    </Border>
                </UniformGrid>

                <Grid Grid.Row="2">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <TextBlock Text="产量统计" FontWeight="Bold" Foreground="#555" VerticalAlignment="Center" Margin="5,0"/>
                    <lvc:CartesianChart Grid.Row="1" Margin="10">
                        <lvc:CartesianChart.Series>
                            <lvc:ColumnSeries Values="22,30,10,50,80,40,27,60,56" Width="5" Fill="Orange" MaxColumnWidth="15"
                                              DataLabels="True" Foreground="#888">
                            </lvc:ColumnSeries>
                        </lvc:CartesianChart.Series>
                        <lvc:CartesianChart.AxisX>
                            <lvc:Axis  Labels="1/1,1/2,1/3,1/4,1/5,1/6,1/7,1/8,1/9" FontSize="8" DisableAnimations="True">
                                <lvc:Axis.Separator>
                                    <lvc:Separator Step="1" StrokeThickness="0"/>
                                </lvc:Axis.Separator>
                            </lvc:Axis>
                        </lvc:CartesianChart.AxisX>
                        <lvc:CartesianChart.AxisY>
                            <lvc:Axis x:Name="axisT" FontSize="8" >
                                <lvc:Axis.Separator>
                                    <lvc:Separator Step="20"/>
                                </lvc:Axis.Separator>
                            </lvc:Axis>
                        </lvc:CartesianChart.AxisY>
                    </lvc:CartesianChart>
                </Grid>

                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3">
                    <TextBlock Grid.Row="3">
                    <Run Text="今日计划产量"/>
                    <Run Text="100"/>
                    </TextBlock>
                    <TextBlock Grid.Row="3" Margin="20,0">
                    <Run Text="今日完成产量"/>
                    <Run Text="100"/>
                    </TextBlock>
                    <TextBlock Grid.Row="3">
                    <Run Text="今日完成率"/>
                    <Run Text="100%"/>
                    </TextBlock>
                </StackPanel>
            </Grid>
        </Grid>

        <Grid Grid.Row="1" Margin="30,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="35"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="1.5*"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Horizontal">
                <Border Height="28" Width="120"  Grid.Row="2" Background="#FF0091F0" BorderBrush="#FF0091F0" BorderThickness="1" CornerRadius="3" Margin="5,0">
                    <TextBlock Text="5号生产车间" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
                <Border Height="28" Width="120"  Grid.Row="2" Background="#FF0091F0" BorderBrush="#FF0091F0" BorderThickness="1" CornerRadius="3">
                    <TextBlock Text="本月类别统计" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
            </StackPanel>

            <UniformGrid Columns="1" Grid.Row="1">
                <Border Background="#550091F0" CornerRadius="3" Margin="5,5,10,5">
                    <Grid Margin="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="3*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" TextBlock.FontSize="10"
                                                Margin="10,0">
                            <TextBlock Foreground="White" Margin="0,4">
                                            <Run Text="生产车间："/>
                                            <Run Text="车间-12号"/>
                            </TextBlock>
                            <TextBlock Foreground="White" Margin="0,4">
                                            <Run Text="设备编号："/>
                                            <Run Text="设备-19号"/>
                            </TextBlock>
                        </StackPanel>

                        <StackPanel Grid.Column="1" VerticalAlignment="Center">
                            <ProgressBar Grid.Column="1" Minimum="0" Maximum="100" Value="76" Background="#55FFFFFF" BorderThickness="0"
                                                 Height="12" Foreground="#FF0091F0" Margin="10,3"/>
                            <Grid Margin="10,0" TextBlock.FontFamily="8" TextBlock.FontSize="10">
                                <TextBlock Text="0" HorizontalAlignment="Left" Foreground="White"/>
                                <TextBlock Text="100%" HorizontalAlignment="Right" Foreground="White"/>
                            </Grid>
                        </StackPanel>
                    </Grid>
                </Border>
                <Border Background="#550091F0" CornerRadius="3" Margin="5,5,10,5">
                    <Grid Margin="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="3*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" TextBlock.FontSize="10"
                                                Margin="10,0">
                            <TextBlock Foreground="White" Margin="0,4">
                                            <Run Text="生产车间："/>
                                            <Run Text="车间-12号"/>
                            </TextBlock>
                            <TextBlock Foreground="White" Margin="0,4">
                                            <Run Text="设备编号："/>
                                            <Run Text="设备-19号"/>
                            </TextBlock>
                        </StackPanel>

                        <StackPanel Grid.Column="1" VerticalAlignment="Center">
                            <ProgressBar Grid.Column="1" Minimum="0" Maximum="100" Value="76" Background="#55FFFFFF" BorderThickness="0"
                                                 Height="12" Foreground="#FF0091F0" Margin="10,3"/>
                            <Grid Margin="10,0" TextBlock.FontFamily="8" TextBlock.FontSize="10">
                                <TextBlock Text="0" HorizontalAlignment="Left" Foreground="White"/>
                                <TextBlock Text="100%" HorizontalAlignment="Right" Foreground="White"/>
                            </Grid>
                        </StackPanel>
                    </Grid>
                </Border>
                <Border Background="#550091F0" CornerRadius="3" Margin="5,5,10,5">
                    <Grid Margin="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="3*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" TextBlock.FontSize="10"
                                                Margin="10,0">
                            <TextBlock Foreground="White" Margin="0,4">
                                            <Run Text="生产车间："/>
                                            <Run Text="车间-12号"/>
                            </TextBlock>
                            <TextBlock Foreground="White" Margin="0,4">
                                            <Run Text="设备编号："/>
                                            <Run Text="设备-19号"/>
                            </TextBlock>
                        </StackPanel>

                        <StackPanel Grid.Column="1" VerticalAlignment="Center">
                            <ProgressBar Grid.Column="1" Minimum="0" Maximum="100" Value="76" Background="#55FFFFFF" BorderThickness="0"
                                                 Height="12" Foreground="#FF0091F0" Margin="10,3"/>
                            <Grid Margin="10,0" TextBlock.FontFamily="8" TextBlock.FontSize="10">
                                <TextBlock Text="0" HorizontalAlignment="Left" Foreground="White"/>
                                <TextBlock Text="100%" HorizontalAlignment="Right" Foreground="White"/>
                            </Grid>
                        </StackPanel>
                    </Grid>
                </Border>
            </UniformGrid>

            <TextBlock Grid.Column="1" Text="设备运行日志记录" FontWeight="Bold" Foreground="#555" VerticalAlignment="Top"
                           Margin="15,0"/>
            <DataGrid Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" ItemsSource="{Binding DataList}" Margin="15,0,5,5"
                          ScrollViewer.VerticalScrollBarVisibility="Hidden">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="序号" Width="60" Binding="{Binding Name}"/>
                    <DataGridTextColumn Header="数据类型" Width="*" Binding="{Binding Age}"/>
                    <DataGridTextColumn Header="记录日期" Width="*" Binding="{Binding Value}"/>
                    <DataGridTextColumn Header="设备名称" Width="*" Binding="{Binding Name}"/>
                    <DataGridTextColumn Header="温度值" Width="*" Binding="{Binding Age}"/>
                    <DataGridTextColumn Header="Status" Width="*" Binding="{Binding Value}"/>
                    <DataGridTemplateColumn Header="操作" Width="120">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock>
                                    <Hyperlink Command="{Binding}" CommandParameter="{Binding}">操作</Hyperlink>
                                    </TextBlock>
                                    <TextBlock Margin="5,0">
                                    <Hyperlink Command="{Binding}" CommandParameter="{Binding}">操作</Hyperlink>
                                    </TextBlock>
                                </StackPanel>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                </DataGrid.Columns>
            </DataGrid>
        </Grid>

    </Grid>
</UserControl>

/// <summary>
/// MonitorView.xaml 的交互逻辑
/// </summary>
public partial class MonitorView : UserControl
{
    public MonitorView()
    {
        InitializeComponent();

        this.DataContext = new MonitorViewModel();
    }
}

public class MonitorViewModel
{
    public ObservableCollection<DataGridItemModel> DataList { get; set; } = new ObservableCollection<DataGridItemModel>();

    public MonitorViewModel()
    {
        Random random = new Random();
        for (int i = 0; i < 20; i++)
        {
            DataList.Add(new DataGridItemModel { Name = "测试-" + i.ToString("00"), Age = random.Next(18, 90), Value = random.Next(30, 120).ToString() });
        }
    }
}

数据绑定样式

public class DataGridItemModel
{
    public string Name
    {
        get;
        set;
    }

    public int Age
    {
        get;
        set;
    }

    public string Value
    {
        get;
        set;
    }
}

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <Style TargetType="DataGridCell" x:Key="DataGridCellStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridCell">
                    <Grid Background="Transparent">
                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="FontWeight" Value="Normal"/>
                <Setter Property="Foreground" Value="#444"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style TargetType="DataGridColumnHeader" x:Key="DataGridColumnHeaderfStyle">
        <Setter Property="Background" Value="White"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="BorderBrush" Value="#DDD"/>
        <Setter Property="BorderThickness" Value="0,0,0,1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridColumnHeader">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"
                                   Foreground="#565656" FontWeight="Bold"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="DataGridRow" x:Key="DataGridRowStyle">
        <Setter Property="Height" Value="40"/>
        <!--行头样式-->
        <Setter Property="HeaderStyle">
            <Setter.Value>
                <Style TargetType="DataGridRowHeader">
                    <Setter Property="Width" Value="0"/>
                    <Setter Property="Background" Value="Red"/>
                </Style>
            </Setter.Value>
        </Setter>
        <!--行头模版-->
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid Margin="5,0">
                        <TextBlock Text="{Binding Item.Age,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=DataGridRow}}"
                                   Foreground="#888"/>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <!--行右键菜单-->
        <Setter Property="ContextMenu">
            <Setter.Value>
                <ContextMenu>
                    <MenuItem Header="复制" Command="{Binding MenuItemCommand}" CommandParameter="{Binding}"/>
                    <MenuItem Header="剪切" Command="{Binding MenuItemCommand}" CommandParameter="{Binding}"/>
                    <MenuItem Header="粘贴" Command="{Binding MenuItemCommand}" CommandParameter="{Binding}"/>
                </ContextMenu>
            </Setter.Value>
        </Setter>


        <Style.Triggers>
            <!--条纹间隔，需要配合DataGrid.AlternationCount属性-->
            <Trigger Property="AlternationIndex" Value="-1" >
                <Setter Property="Background" Value="#EEE" />
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="#F7F9FA"/>
            </Trigger>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="#F7F9FA"/>
            </Trigger>
        </Style.Triggers>
    </Style>
    <!--控件模板、容器模板、数据模板   （触发器、视觉状态管理器）-->

    <!--DataGrid样式-->
    <Style TargetType="{x:Type DataGrid}">
        <!--网格线颜色-->
        <Setter Property="CanUserResizeColumns" Value="True"/>
        <Setter Property="Foreground" Value="#444" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="HorizontalGridLinesBrush" Value="#EEE"/>
        <Setter Property="VerticalGridLinesBrush" Value="Transparent"/>
        <Setter Property="CanUserAddRows" Value="False"/>
        <Setter Property="AutoGenerateColumns" Value="False"/>

        <Setter Property="CellStyle" Value="{StaticResource DataGridCellStyle}"/>
        <Setter Property="ColumnHeaderStyle" Value="{StaticResource DataGridColumnHeaderfStyle}"/>
        <Setter Property="RowStyle" Value="{StaticResource DataGridRowStyle}"/>
    </Style>

</ResourceDictionary>

补充：集合绑定用法
在这里插入图片描述

补充：滚动条用法

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <SolidColorBrush x:Key="ScrollBar.Static.Background" Color="#F0F0F0"/>
    <SolidColorBrush x:Key="ScrollBar.Static.Border" Color="#F0F0F0"/>
    <SolidColorBrush x:Key="ScrollBar.Static.Thumb" Color="#CDCDCD"/>
    <SolidColorBrush x:Key="ScrollBar.MouseOver.Thumb" Color="#A6A6A6"/>
    <SolidColorBrush x:Key="ScrollBar.Pressed.Thumb" Color="#606060"/>

    <Style TargetType="ScrollViewer">
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                        <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" 
                                        CanHorizontallyScroll="False" CanVerticallyScroll="False" 
                                        ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" 
                                        Margin="{TemplateBinding Padding}"/>
                        <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" 
                           Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" 
                           Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
                           Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                           ViewportSize="{TemplateBinding ViewportHeight}"
                           HorizontalAlignment="Right" Style="{DynamicResource ScrollBarStyle}"
                           Opacity="0"/>
                        <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" 
                           Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal"
                           Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                           Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" 
                           ViewportSize="{TemplateBinding ViewportWidth}"
                           VerticalAlignment="Bottom"
                           Opacity="0" Style="{DynamicResource ScrollBarStyle}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.3" To="0.7" 
                                                 Storyboard.TargetName="PART_VerticalScrollBar"
                                                 Storyboard.TargetProperty="Opacity"/>
                                        <DoubleAnimation Duration="0:0:0.3" To="0.7" 
                                                 Storyboard.TargetName="PART_HorizontalScrollBar"
                                                 Storyboard.TargetProperty="Opacity"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                 Storyboard.TargetName="PART_VerticalScrollBar"
                                                 Storyboard.TargetProperty="Opacity"/>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                 Storyboard.TargetName="PART_HorizontalScrollBar"
                                                 Storyboard.TargetProperty="Opacity"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarStyle" TargetType="{x:Type ScrollBar}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
        <Setter Property="Background" Value="{StaticResource ScrollBar.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ScrollBar.Static.Border}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="BorderThickness" Value="1,0"/>
        <Setter Property="Width" Value="12"/>
        <Setter Property="MinWidth" Value="12"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <Grid x:Name="Bg" SnapsToDevicePixels="true">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0"
                                    Background="Transparent" Grid.Row="1"/>
                        <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{DynamicResource RepeatButtonTransparent}"/>
                            </Track.DecreaseRepeatButton>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{DynamicResource RepeatButtonTransparent}"/>
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{DynamicResource ScrollBarThumbVertical}"/>
                            </Track.Thumb>
                        </Track>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto"/>
                <Setter Property="MinWidth" Value="0"/>
                <Setter Property="Height" Value="12"/>
                <Setter Property="MinHeight" Value="12"/>
                <Setter Property="BorderThickness" Value="0,1"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid x:Name="Bg" SnapsToDevicePixels="true">
                                <Border BorderBrush="{TemplateBinding BorderBrush}" 
                                            BorderThickness="0" 
                                            Background="Transparent" Grid.Column="1"/>
                                <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{DynamicResource RepeatButtonTransparent}"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{DynamicResource RepeatButtonTransparent}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{DynamicResource ScrollBarThumbHorizontal}"/>
                                    </Track.Thumb>
                                </Track>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="RepeatButtonTransparent" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="#11FFFFFF" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarThumbVertical" TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Rectangle x:Name="rectangle" Fill="{StaticResource ScrollBar.Static.Thumb}" Height="{TemplateBinding Height}" 
                                   SnapsToDevicePixels="True" Width="12" RadiusX="6" RadiusY="6"/>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.MouseOver.Thumb}"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="true">
                            <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.Pressed.Thumb}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarThumbHorizontal" TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Rectangle x:Name="rectangle" Fill="{StaticResource ScrollBar.Static.Thumb}" 
                                   Height="{TemplateBinding Height}" SnapsToDevicePixels="True" 
                                   Width="{TemplateBinding Width}"
                                   RadiusX="6" RadiusY="6"/>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.MouseOver.Thumb}"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="true">
                            <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.Pressed.Thumb}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

补充：详情事件用法
在这里插入图片描述

在这里插入图片描述
最终界面效果图

微软MVP Eleven

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
2021-09-03 WPF上位机通用框架平台实战-Dashboard

一：Dashboard窗口布局和功能实现<UserControl x:Class="Zhaoxi.HostComputer.Views.MonitorView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc=".
复制链接

扫一扫

专栏目录