第三行 三列数据 设备和报警信息表格

一、背景

1、灰色外边框

　　第一种写法

<Border Background="#DDD" CornerRadius="10" />
<Border Background="#FFF" CornerRadius="10" Margin="6,3"/>

　　第二种写法
<Border Background="#FFF" CornerRadius="10" BorderBrush="#DDD" BorderThickness="6,3" />

2、内边框

<Border BorderBrush="#DDD" CornerRadius="10" Margin="15,8" BorderThickness="0,2" />

3、四个边角

Path的其他常用属性

StrokeStartLineCap：图形起始点的边缘图形，为PenLineCap枚举类型。

Flat：一个未超出直线上最后一点的线帽。 等同于无线帽。（默认）
Square：一个高度等于直线粗细、长度等于直线粗细一半的矩形。
Round：一个直径等于直线粗细的半圆形。
Triangle：一个底边长度等于直线粗细的等腰直角三角形。
StrokeEndLineCap：图形结束点的边缘图形，为PenLineCap枚举类型，用法跟StrokeStartLineCap一样。

            <!--外边框-->
            <Border Background="#FFF" CornerRadius="10" BorderBrush="#DDD" BorderThickness="6,3" />
            <!--内边框上下-->
            <Border BorderBrush="#DDD" CornerRadius="10" Margin="15,8" BorderThickness="0,2" />
            <!--四个边角-->
            <Path Data="M8 0 0 8" Stroke="#BBB" StrokeThickness="2" 
                      Margin="10,6" StrokeStartLineCap="Round" StrokeEndLineCap="Round"
                      VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Path Data="M0 0 8 8" Stroke="#BBB" StrokeThickness="2" 
                      Margin="8,6" StrokeStartLineCap="Round" StrokeEndLineCap="Round"
                      VerticalAlignment="Top" HorizontalAlignment="Right"/>
            <Path Data="M0 0 8 8" Stroke="#BBB" StrokeThickness="2" 
                      Margin="8,6" StrokeStartLineCap="Round" StrokeEndLineCap="Round"
                      VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
            <Path Data="M8 0 0 8" Stroke="#BBB" StrokeThickness="2" 
                      Margin="8,6" StrokeStartLineCap="Round" StrokeEndLineCap="Round"
                      VerticalAlignment="Bottom" HorizontalAlignment="Right"/>

 

二、三列内容

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition />
                    <ColumnDefinition Width="0.8*"/>
                </Grid.ColumnDefinitions>

auto内容多宽显示多宽

<ColumnDefinition />默认显示1倍

<ColumnDefinition Width="0.8*"/>

 

1、第一列

一列四行都是相同的

使用UniformGrid

两个StackPanel嵌套

左右，上下

                <UniformGrid Columns="1" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="25,0">
                    <StackPanel Orientation="Horizontal">
                        <Border Background="#EEE" Width="35" Height="35" Margin="20,5"/>
                        <StackPanel VerticalAlignment="Center">
                            <TextBlock Text="{Binding DeviceList[0].VarList[0].VarName}" Foreground="#999"/>
                            <TextBlock>
                                <Run Text="{Binding DeviceList[0].VarList[0].Value}" Foreground="#729BDF" FontSize="16" FontWeight="ExtraBold"/>
                                <Run Text="台" Foreground="#AAA"/>
                            </TextBlock>
                        </StackPanel>
                    </StackPanel>

后面三个一样，只是名字、颜色不一样

 

两列两条右侧虚线

                <!--数据列的间隔-->
                <Line X1="0" X2="0" Y1="0" Y2="180" HorizontalAlignment="Right" VerticalAlignment="Center"
                      Stroke="#DDD" StrokeThickness="2" StrokeDashArray="3,3"/>
                <Line X1="0" X2="0" Y1="0" Y2="180" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center"
                      Stroke="#DDD" StrokeThickness="2" StrokeDashArray="3,3"/>

Y2结束坐标180，竖向虚线

虚线

StrokeDashArray，可以传两个值=》第一个值是：实线占比，第二值是虚线占比。

 

 

第二列：报警列表

不用datagrid，是固定样式

使用listbox+表头

 

四行

                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="28"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>

1、标题

                    <!--标题-->
                    <TextBlock Text="设备报警清单" VerticalAlignment="Center"  HorizontalAlignment="Center"
                                   FontFamily="FZYaoTi" FontSize="14" FontWeight="ExtraBold" FontStyle="Italic"/>

                    <!--装饰-->
                    <Border Height="2">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                <GradientStop Color="Transparent" Offset="0"/>
                                <GradientStop Color="Gray" Offset="0.2"/>
                                <GradientStop Color="Transparent" Offset="0.5"/>
                                <GradientStop Color="Gray" Offset="0.8"/>
                                <GradientStop Color="Transparent" Offset="1"/>
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>

                    <Ellipse Height="5" Width="200">
                        <Ellipse.Fill>
                            <VisualBrush TileMode="Tile" Viewport="0,0,10,10" ViewportUnits="Absolute">
                                <VisualBrush.Visual>
                                    <Path Data="M10,0,0,10" Stroke="Orange" StrokeThickness="3"/>
                                </VisualBrush.Visual>
                            </VisualBrush>
                        </Ellipse.Fill>
                    </Ellipse>

2、第二行

                    <!--样例与查询-->
                    <StackPanel Orientation="Horizontal" Grid.Row="1" VerticalAlignment="Center" 
                                HorizontalAlignment="Left" TextBlock.FontWeight="ExtraBold">
                        <TextBlock Text="一般" Foreground="#729BDF" Margin="20,0"/>
                        <TextBlock Text="严重" Foreground="Orange" Margin="20,0"/>
                        <TextBlock Text="紧急" Foreground="#FE644A" Margin="20,0"/>
                    </StackPanel>

查询日期

                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right"
                                    Grid.Row="1">
                        <TextBlock Text="查询" VerticalAlignment="Center" Foreground="#999"/>
                        <DatePicker Text="2023-08-23" Margin="10,0" BorderThickness="1" BorderBrush="#EEE"/>
                    </StackPanel>

3、第三行：列头

                    <!--列头-->
                    <Grid Grid.Row="2" TextBlock.Foreground="#555" TextBlock.FontWeight="Bold">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="70"/>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="100"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="设备编号" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        <TextBlock Text="设备名称" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        <TextBlock Text="报警级别" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        <TextBlock Text="报警信息" Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        <TextBlock Text="报警时间" Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        <TextBlock Text="恢复时间" Grid.Column="5" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Grid>

4、第四行：表体

 

                    <!--表体-->
                    <ItemsControl Grid.Row="3" ItemsSource="{Binding AlarmList}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Grid Grid.Row="2" TextBlock.Foreground="#666" Height="30">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition/>
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="70"/>
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="100"/>
                                        <ColumnDefinition Width="100"/>
                                    </Grid.ColumnDefinitions>
                                    <Border Height="22" Background="#EEE" Grid.ColumnSpan="6"/>

                                    <TextBlock Text="{Binding DeviceNum}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                    <TextBlock Text="{Binding DeviceName}" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                    <TextBlock Text="{Binding AlarmLevel}" Grid.Column="2" Foreground="{Binding LevelColor}"
                                               VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                    <TextBlock Text="{Binding AlarmMessage}" Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center"
                                               TextTrimming="WordEllipsis"/>
                                    <TextBlock Text="{Binding AlarmTime}" Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                    <TextBlock Text="{Binding ResumeTime}" Grid.Column="5" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                </Grid>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>

绑定数据源

 

添加模型AlarmModel

    public class AlarmModel
    {
        public string DeviceNum { get; set; }
        public string DeviceName { get; set; }
        public string AlarmLevel { get; set; }
        public string LevelColor { get; set; }
        public string AlarmMessage { get; set; }
        public string AlarmTime { get; set; }
        public string ResumeTime { get; set; }
    }

创建文件 MainViewModel

public ObservableCollection<AlarmModel> AlarmList { get; set; }

ctor构造函数增加测试数据

            #region 报警测试数据
            AlarmList = new ObservableCollection<AlarmModel>();
            AlarmList.Add(new AlarmModel()
            {
                DeviceNum = "000-0000",
                DeviceName = "焊接法兰机器人",
                AlarmLevel = "严重",
                LevelColor = "Orange",
                AlarmMessage = "信息信息信息信息信息信息信息信息",
                AlarmTime = "20:00",
                ResumeTime = "20:00",
            });
            AlarmList.Add(new AlarmModel()
            {
                DeviceNum = "000-0000",
                DeviceName = "焊接法兰机器人",
                AlarmLevel = "一般",
                LevelColor = "#729BDF",
                AlarmMessage = "信息信息信息信息信息信息信息信息",
                AlarmTime = "20:00",
                ResumeTime = "20:00",
            });
            AlarmList.Add(new AlarmModel()
            {
                DeviceNum = "000-0000",
                DeviceName = "焊接法兰机器人",
                AlarmLevel = "紧急",
                LevelColor = "#FE644A",
                AlarmMessage = "信息信息信息信息信息信息信息信息",
                AlarmTime = "20:00",
                ResumeTime = "20:00",
            });
            AlarmList.Add(new AlarmModel()
            {
                DeviceNum = "000-0000",
                DeviceName = "焊接法兰机器人",
                AlarmLevel = "严重",
                LevelColor = "Orange",
                AlarmMessage = "信息信息信息信息信息信息信息信息",
                AlarmTime = "20:00",
                ResumeTime = "20:00",
            });
            #endregion

在MainWindow.xaml.cs指定

this.DataContext = new MainViewModel();

 

表体内容绑定

设置DataTemplate数据模板

复制列头的格式，修改绑定的Text

绑定内容：Text="{Binding DeviceNum}"

绑定前景色：Foreground="{Binding LevelColor}"

信息长度截取：TextTrimming="WordEllipsis"

跨6列显示背景色;<Border Height="22" Background="#EEE" Grid.ColumnSpan="6"/>

整体边距<Grid Grid.Column="1" Margin="20,10">

 

数据绑定过程

1、Model对象字段实体

2、ViewModel 添加数据

4、MainWindowxaml.c指定 ViewModel

5、View {Binding }