一: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>
补充:详情事件用法
最终界面效果图