【C#】学习WPF的生产管理平台回顾与总结

目的

花了一周时间跟着B站的教学视频学习了如何用WPF制作一个生产管理平台上位机软件，学习完了，在此总结涉及到的相关知识.

MVVM工程模板

如何寻找图标这种资源

原来我以为的图标资源只有ico,png这种，但是教程告诉我，还可以通过字体实现，它提供了一个找图标的网站，阿里巴巴图标库，在里面注册好，便可以将希望使用的图标打包成一个字体文件，通过特殊的字体代码来调用，而且图标是可以放大不失真的，这就很方便了。

如何使用字体文件中的图标资源

例如某个TextBlock，希望使用某个字体图标,使用字体代码设置好内容，还需要设置FontFamily
并且要将字体文件设置为资源

<TextBlock Foreground="#55FFFFFF" Text="" FontFamily="../Assets/Fonts/#iconfont" FontSize="30">TextBlock>
1

如何将原生的窗口标题栏隐藏，并自己重新绘制按钮

首先在窗体xaml设置

    
    <WindowChrome.WindowChrome>
        <WindowChrome GlassFrameThickness="-1">WindowChrome>
    WindowChrome.WindowChrome>
1
2
3
4

如果还需要窗体居中，可以设置

WindowStartupLocation="CenterScreen"
1

之后，摆好Grid,在右上角的位置放一个透明的border把原来的按钮那部分区域遮挡住，之后再在透明的border上放好需要的按钮

                    
                    <Border HorizontalAlignment="Right" WindowChrome.IsHitTestVisibleInChrome="True" Background="Transparent" Width="200">
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
                            <Button Content="" Style="{StaticResource ControlButtonStyle}" />
                            <Button Content="" Style="{StaticResource ControlButtonStyle}"/>
                            <Button Content="" Style="{StaticResource ControlButtonStyle}" Background="DarkRed" Click="Button_Click"/>
                        StackPanel>
                    Border>
1
2
3
4
5
6
7
8

分割线的绘制

就是这种似乎是一条条斜线绘制出来的分割线，教程里使用的visualbrush画出来的
用一个border承载这个分割线

                
                <Border Margin="0,0,0,0">
                    <Border.Background>
                        
                        <VisualBrush TileMode="Tile" Viewport="0,0,5,5" ViewportUnits="Absolute">
                            <VisualBrush.Visual>
                                <Grid Width="20" Height="20">
                                    <Line X1="0" Y1="10" X2="10" Y2="0" Stroke="Gray" StrokeThickness="1"/>
                                Grid>
                            VisualBrush.Visual>
                        VisualBrush>
                    Border.Background>
                Border>
1
2
3
4
5
6
7
8
9
10
11
12
13

为按钮添加样式模板并实现触发器功能，滑过按钮，触发阴影效果

例如定义一个button的模板

        <Style TargetType="Button" x:Key="ControlButtonStyle">
            "Width" Value="40"/>
            "Background" Value="#11FFFFFF"/>
            "Foreground" Value="White"/>
            "FontFamily" Value="Assets/Fonts/#iconfont"/>
            "FontSize" Value="20"/>
            "Template">
                
                    "Button">
                        
                        "{TemplateBinding Background}">
                            
                            "root">
                                "Center" HorizontalAlignment="Center"/>
                            

                        
                        
                        
                            "IsMouseOver" Value="True">
                                "root" Property="Background" Value="#33FFFFFF"/>
                            
                        
                    
                
            
        Style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

界面xaml中只要设置了这个style的就可以使用定义好的样式了

<Button Content="" Style="{StaticResource ControlButtonStyle}" />
1

如何设置Grid的背景色为中间淡，边缘深的那种

        <Grid.Background>
            
            <RadialGradientBrush>
                <GradientStop Color="#FF1EC0E9" Offset="0"/>
                <GradientStop Color="#FF1EC0E9" Offset="0.3"/>
                <GradientStop Color="#FF1EC0E9" Offset="1"/>
            RadialGradientBrush>
        Grid.Background>
1
2
3
4
5
6
7
8

指定当前元素和绑定源的位置关系

通过RelativeSource 和 AncestorType来告诉编译器要去哪里找绑定资源
例如下面的例子是让TextBlock的文字绑定窗口的标题，让绑定源去窗体找

                    
                    <TextBlock 
                        Foreground="White" 
                        Text="{Binding Title,RelativeSource={RelativeSource AncestorType=Window}}">
                    TextBlock>
1
2
3
4
5
6

或者通过希望绑定的元素的名字来告诉编译器去哪里找

                    <TextBlock 
                        Foreground="White" 
                        Text="{Binding Title,ElementName=Window}">
                    TextBlock>
1
2
3
4

或者希望绑定自身的其他属性的值

<TextBox Text="{Binding Path=Background, Mode=TwoWay,RelativeSource={RelativeSource Self}}"  />  
1

绑定文字的时候希望做些格式处理

StringFormat这个属性可以对绑定的属性做些格式上的处理

 <TextBlock FontSize="10" Text="{Binding Len,StringFormat=时长{0}秒}"  Grid.Column="5" VerticalAlignment="Center" Foreground="White" HorizontalAlignment="Center"/>
1

Model/ViewModel/View的互通

教程中介绍了

1. 继承INotifyPropertyChanged实现的通知接口类，实现了一个设置属性的泛型接口SetProperty
2. 继承ICommand实现的动作执行类，实现了对触发动作和其传递参数的封装

继承INotifyPropertyChanged实现的通知接口类

    /// 

    /// 通知接口类
    /// 
    internal class NotifyBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler? PropertyChanged;

        /// 

        /// 设置属性，并且触发事件
        /// 
        /// 
        /// 
        /// 
        /// 
        public void SetProperty<T>(ref T field,T value, [CallerMemberName] string propName="")
        {
            field = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

用法是在希望实现这种通知式传递数据的Model中对应的属性的set方法中调用SetProperty

        private string _badCount;
        public string BadCount
        {
            get { return _badCount; }
            set { SetProperty(ref _badCount, value); }
        }
1
2
3
4
5
6

继承ICommand实现的动作执行类

    public class Command : ICommand
    {
        public event EventHandler? CanExecuteChanged;

        public bool CanExecute(object? parameter)
        {
            return true;
        }

        public void Execute(object? parameter)
        { 
             DoExexcute?.Invoke(parameter);   
        }

        //使用委托传递外部希望执行的动作
        public Action<object> DoExexcute { get; set; }
        public Command(Action<object> action)
        {
            DoExexcute = action;
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

用法是定义对应的Command类变量属性字段

public Command DetailCommand { get; set; }

//然后初始化它，传递需要执行的回调和参数
 DetailCommand = new Command(DoDetailCommand);
1
2
3
4

之后对应要使用的xaml使用command属性设置好对应的Command名字

                            
                            <Button Grid.Row="0" 
                                    Margin="10,-20,-17,0" 
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Center"
                                    Content="[ 详情 ]" 
                                    Style="{StaticResource DetailButton}"
                                    BorderThickness="0" Width="80" Height="30" FontSize="15"
                                    Command="{Binding DetailCommand,RelativeSource={RelativeSource AncestorType=Window}}" 
                                    CommandParameter="{Binding}"
                                    >
                            Button>
1
2
3
4
5
6
7
8
9
10
11
12

Itemcontrol集合的使用

                    <ItemsControl ItemsSource="{Binding Enviroment}" Margin="5">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                
                                <UniformGrid Columns="4"/>
                            ItemsPanelTemplate>
                        ItemsControl.ItemsPanel>

                        
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                                    <TextBlock Margin="0,10,0,0" Text="{Binding Value}" FontSize="15" Foreground="GhostWhite" HorizontalAlignment="Center" FontWeight="Bold"/>
                                    <TextBlock Text="{Binding Header}" FontSize="10" Foreground="FloralWhite" HorizontalAlignment="Center"/>
                                StackPanel>
                                
                            DataTemplate>
                        ItemsControl.ItemTemplate>
                    ItemsControl>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

首先定义ItemsControl，需要指定需要绑定的数据源，也就是ItemsSource
ItemsControl.ItemsPanel这个是集合的载体(我是这样理解的),如果不修改，那么这个载体就是默认的载体
ItemsControl.ItemTemplate和DataTemplate是这个是集合的模板，也就是希望生成的每一个集合的样子，内部包含的控件，数据绑定等等
当然这个ItemTemplate可以在外部写，写成资源，给其他需要的itemcontrol用
外部写个资源

                <StackPanel.Resources>
                    <DataTemplate x:Key="dataTemp">
                        <Border Width="15" Background="#99FFFFFF" Margin="2,0">
                            <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" FontSize="15" FontWeight="Bold"/>
                        Border>
                    DataTemplate>
                StackPanel.Resources>
1
2
3
4
5
6
7

其他itemcontrol调用一下

                <ItemsControl ItemsSource="{Binding BadCount}"  ItemTemplate="{StaticResource dataTemp}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal">
                            VirtualizingStackPanel>
                        ItemsPanelTemplate>
                    ItemsControl.ItemsPanel>

                ItemsControl>
1
2
3
4
5
6
7
8
9

自定义GroupBox模板，实现漂亮的控件框

        <Style TargetType="GroupBox">
            "Margin" Value="10,5"/>
            "Template">
                
                    "GroupBox">
                        
                        
                        
                            "0 30,0 10,10 0,30 0" Stroke="White" StrokeThickness="1" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                            "4" Height="4" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="White" Margin="27,-2,0,0"/>
                            "4" Height="4" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="White" Margin="-2,27,0,0"/>
                            "M0 0,3 3,30 3,33 0,68 0,73 7,78 7,78 10M8 0,25 0" Stroke="White" StrokeThickness="1" VerticalAlignment="Top" HorizontalAlignment="Right"/>
                            "0,0 0,15 10,15" Stroke="White" StrokeThickness="1" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
                            "10,0 0,10" Stroke="White" StrokeThickness="1" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
                            "0,7 7 7 7 0" Fill="White" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
                            "White" BorderThickness="0,1,0,0" VerticalAlignment="Top" Margin="30,-0.5,78,0"/>
                            "White" BorderThickness="0,0,1,0" HorizontalAlignment="Right" Margin="0,10"/>
                            "White" BorderThickness="0,1,0,0" VerticalAlignment="Bottom" Margin="10,0"/>
                            "White" BorderThickness="0,0,1,0" HorizontalAlignment="Left" Margin="-0.5,15"/>
                            
                            "{TemplateBinding Header}" Foreground="White" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5"/>
                            
                            
                                
                            
                        
                    
                
            
        Style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

livechart图标库的使用

这个直接搜其他人的教程算了，这个都可以单独写一篇了
确实很不错，做出来的效果
顺带一提，这个图例的小方块使用border做的

                    <StackPanel Margin="0,5,15,0" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right">
                            <Border Width="5" Height="5" Background="Red" Margin="5,0">Border>
                            <TextBlock Text="不良计数" Foreground="Red" FontSize="15">TextBlock>
                            <Border Width="5" Height="5" Background="Green" Margin="5,0">Border>
                            <TextBlock Text="生产计数" Foreground="Green" FontSize="15">TextBlock>
                        StackPanel>
1
2
3
4
5
6

                        <lvc:CartesianChart Margin="5,30,0,0">
                        <lvc:CartesianChart.Series>
                            <lvc:ColumnSeries 
                                Values="300,400,500,345,200,250,400,500"
                                MaxColumnWidth="10"
                                Title="生产计数"
                                >
                                <lvc:ColumnSeries.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="GreenYellow" Offset="0.5"/>
                                        <GradientStop Color="LawnGreen" Offset="0.1"/>
                                    LinearGradientBrush>
                                lvc:ColumnSeries.Fill>
                            lvc:ColumnSeries>

                            <lvc:ColumnSeries Values="150,200,80,506,708,203,155,123"
                             MaxColumnWidth="10"
                             Title="不良计数" >
                                <lvc:ColumnSeries.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="OrangeRed" Offset="0.5"/>
                                        <GradientStop Color="IndianRed" Offset="0.1"/>
                                    LinearGradientBrush>
                                lvc:ColumnSeries.Fill>
                            lvc:ColumnSeries>
                        lvc:CartesianChart.Series>

                        <lvc:CartesianChart.AxisX >
                            <lvc:Axis Labels="1:00,2:00,3:00,4:00,5:00,6:00,7:00,8:00" Foreground="White">
                                <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" Foreground="White">
                                <lvc:Axis.Separator>
                                    <lvc:Separator Step="200" StrokeThickness="0.5" Stroke="White"/>
                                lvc:Axis.Separator>
                            lvc:Axis>
                        lvc:CartesianChart.AxisY>

                    lvc:CartesianChart>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

标签式的单选按钮组

也是用样式做的

        
        <Style TargetType="RadioButton">
            "Width" Value="50"/>
            "Foreground" Value="#ddd"/>
            "Height" Value="22"/>
            "Background" Value="#eee"/>
            "FontSize" Value="15"/>
            "Template">
                
                    "RadioButton">
                        "{TemplateBinding Background}">
                            "Center" HorizontalAlignment="Center"/>
                        
                    
                
                
            
            
                "IsChecked" Value="True">
                    "Background" Value="Orange"/>
                    "Foreground" Value="White"/>
                
            
        Style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

不同窗体之间的切换

这种切换是整个切换，不是弹出另一个窗体的那种
做的时候得有个树状结构的思想
从主窗口，切换到下属的窗体，然后再切回来
例如要从主窗体mainViewModel切换到workshopView
那么只需要再对应的回调函数里

            WorkshopView workshopView = new WorkshopView();
            mainViewModel.PageContent = workshopView;
1
2

切换窗体的动画

这种主要是添加用户体验,注意切入窗口和切出的时候动画触发的时机

切入

            WorkshopView workshopView = new WorkshopView();
            mainViewModel.PageContent = workshopView;


            //动画处理
            
            //透明度
            ThicknessAnimation thicknessAnimation = new ThicknessAnimation(
                new Thickness(0,50,0,-50), new Thickness(0, 0, 0, 0),
                new TimeSpan(0,0,0,0,400));
            //位移
            DoubleAnimation doubleAnimation = new DoubleAnimation(0, 1, new TimeSpan(0, 0, 0, 0, 400));

            //绑定对象和属性
            Storyboard.SetTarget(doubleAnimation, workshopView);
            Storyboard.SetTarget(thicknessAnimation, workshopView);
            Storyboard.SetTargetProperty(thicknessAnimation, new PropertyPath("Margin"));
            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("Opacity"));

            //录入动画
            Storyboard storyboard = new Storyboard();
            storyboard.Children.Add(thicknessAnimation);
            storyboard.Children.Add(doubleAnimation);
            storyboard.Begin();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

切出回到主窗体

            MonitorView monitorView = new MonitorView();
            mainViewModel.PageContent = monitorView;

            //透明度
            ThicknessAnimation thicknessAnimation = new ThicknessAnimation(
                new Thickness(0, 50, 0, -50), new Thickness(0, 0, 0, 0),
                new TimeSpan(0, 0, 0, 0, 400));

            //动画处理

            //绑定对象和属性

            Storyboard.SetTarget(thicknessAnimation, monitorView);
            Storyboard.SetTargetProperty(thicknessAnimation, new PropertyPath("Margin"));


            //录入动画
            Storyboard storyboard = new Storyboard();
            storyboard.Children.Add(thicknessAnimation);
            storyboard.Begin();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

自定义控件的做法

这个也是个复杂的专题，可以单独写一篇
简单写下我的理解，剩下的后面用到再查教程算了
自定义控件和画窗体是差不多的
先画好xaml前端
难点在后端数据和前端xaml的互动
后端设计好需要前后端传递的属性字段,前后端做好绑定
在VS里打打prodp,快速打出属性绑定一条龙语句，非常方便，原来不知道，设置好对应的回调函数，
设置好构造函数，设置好其他希望的事件函数(例如很重要的刷新重绘函数)
在用的xaml文件上写好类型C#的using引用(xmlns巴拉巴拉那堆玩意)
然后就可以愉快的调用你的自定义控件了

页面滚动的效果

把需要滚动的内容填里面
然后顺带把滚动的侧边隐藏了

<ScrollViewer VerticalScrollBarVisibility="Hidden" Grid.Row="1" Margin="10,5"/>
1

页面内再弹出一个小页面显示

这种效果是用board遮住，原来的内容，然后再在新的border上整活,就是注意用控件做一个command触发它弹出，关闭，动画效果和本文中那个类似，也是做好动画触发的时机，Visibility="Collapsed"控制好。

<Border Background="#22000000" Grid.RowSpan="2" Name="detail" Visibility="Collapsed">

Border>
1
2
3

单选侧边栏

这种其实是单选框的变体，重写写了个样式,用border封了个边。

        <Style TargetType="RadioButton" x:Key="NavButtonStyle">
            "Background" Value="Transparent"/>
            "FontSize" Value="15"/>
            "Template">
                
                    "RadioButton">
                        "Transparent" >
                            "{TemplateBinding Background}" Height="30" >
                                "Center" HorizontalAlignment="Left" Margin="5,0,0,0"/>
                            
                        
                    
                
            

            
                "IsChecked" Value="True">
                    "Background" Value="Orange"/>
                    "Foreground" Value="White"/>
                
            
        Style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

并且这个教程实现了一个单击侧边按钮，可以跳转到指定的内容那个位置
这个的做法是给每一个内容顶部的标题编写了不同的名字，用的是Tag属性

        <StackPanel Margin="0,10" Grid.Row="1">
            <RadioButton Style="{StaticResource NavButtonStyle}" Content="设备清单" Click="RadioButton_Click"  Tag="s1" IsChecked="True"/>
            <RadioButton Style="{StaticResource NavButtonStyle}"  Content="环境监测" Click="RadioButton_Click"  Tag="s2" IsChecked="True"/>
            <RadioButton Style="{StaticResource NavButtonStyle}"  Content="设备监测" Click="RadioButton_Click"  Tag="s3" IsChecked="True"/>
            <RadioButton Style="{StaticResource NavButtonStyle}"  Content="设备4" Click="RadioButton_Click"     Tag="s4" IsChecked="True"/>
            <RadioButton Style="{StaticResource NavButtonStyle}"  Content="设备5" Click="RadioButton_Click"     Tag="s5" IsChecked="True"/>
            <RadioButton Style="{StaticResource NavButtonStyle}"  Content="设备6" Click="RadioButton_Click"     Tag="s6" IsChecked="True"/>
            <RadioButton Style="{StaticResource NavButtonStyle}"  Content="设备7" Click="RadioButton_Click"     Tag="s7" IsChecked="True"/>
            <RadioButton Style="{StaticResource NavButtonStyle}"  Content="设备8" Click="RadioButton_Click"     Tag="s8" IsChecked="True"/>

        StackPanel>
1
2
3
4
5
6
7
8
9
10
11

然后在单选按钮单击的时候触发事件跳转到指定Page的对应的Tag的位置

        private void RadioButton_Click(object sender, RoutedEventArgs e)
        {
            //页面内部滚动导航到指定位置的方法
            //其实就是对每一个需要导航的Grid做了编码
            this.frame.Navigate(
                new Uri(
                    "pack://application:,,,/Wpf_Automatic_Core;component/Views/SettingsPage.xaml#" +
                    (sender as RadioButton).Tag.ToString(), UriKind.RelativeOrAbsolute));
        }
1
2
3
4
5
6
7
8
9

Page的xaml

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="Auto"/>

            <RowDefinition Height="40"/>
            <RowDefinition Height="Auto"/>

            <RowDefinition Height="40"/>
            <RowDefinition Height="Auto"/>

            <RowDefinition Height="40"/>
            <RowDefinition Height="Auto"/>

            <RowDefinition Height="40"/>
            <RowDefinition Height="Auto"/>

            <RowDefinition Height="40"/>
            <RowDefinition Height="Auto"/>

            <RowDefinition Height="40"/>
            <RowDefinition Height="Auto"/>

            <RowDefinition Height="40"/>
            <RowDefinition Height="Auto"/>
            
        Grid.RowDefinitions>

        <Border BorderBrush="#eee" BorderThickness="0,0,0,1"/>
        <Border BorderBrush="#eee" BorderThickness="0,0,0,1" Grid.Row="2"/>
        <Border BorderBrush="#eee" BorderThickness="0,0,0,1" Grid.Row="4"/>
        <Border BorderBrush="#eee" BorderThickness="0,0,0,1" Grid.Row="6"/>
        <Border BorderBrush="#eee" BorderThickness="0,0,0,1" Grid.Row="8"/>
        <Border BorderBrush="#eee" BorderThickness="0,0,0,1" Grid.Row="10"/>
        <Border BorderBrush="#eee" BorderThickness="0,0,0,1" Grid.Row="12"/>
        <Border BorderBrush="#eee" BorderThickness="0,0,0,1" Grid.Row="14"/>

        <Label Content="设备清单" Name="s1" VerticalContentAlignment="Center"             />
        <Label Content="环境监测" Name="s2" VerticalContentAlignment="Center" Grid.Row="2"/>
        <Label Content="设备监测" Name="s3" VerticalContentAlignment="Center" Grid.Row="4"/>
        <Label Content="设备4"    Name="s4" VerticalContentAlignment="Center" Grid.Row="6"/>
        <Label Content="设备5"    Name="s5" VerticalContentAlignment="Center" Grid.Row="8"/>
        <Label Content="设备6"    Name="s6" VerticalContentAlignment="Center" Grid.Row="10"/>
        <Label Content="设备7"    Name="s7" VerticalContentAlignment="Center" Grid.Row="12"/>
        <Label Content="设备8"    Name="s8" VerticalContentAlignment="Center" Grid.Row="14"/>

        <Grid Height="200" Grid.Row="1" Margin="10,5">
            <StackPanel>
                <Grid Height="30" Background="#09000000" Margin="0,1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="50"/>
                        
                    Grid.ColumnDefinitions>

                    <TextBlock Text="控制器#1" VerticalAlignment="Center" Margin="10,0"/>
                    <TextBlock Text="9600,N,8,1,1" Grid.Column="1" VerticalAlignment="Center"/>
                    <TextBlock Text="ModbusRTU" Grid.Column="2" VerticalAlignment="Center"/>
                    <TextBlock Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center">
                        <Hyperlink >点位表Hyperlink>
                    TextBlock>

                    
                Grid>
                <UniformGrid Columns="2">
                    <Grid Height="30" Margin="30,0,0,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        Grid.ColumnDefinitions>
                        <TextBlock Text="温度" VerticalAlignment="Center"/>
                        <TextBlock Text="40001" Grid.Column="1" VerticalAlignment="Center"/>
                        <TextBlock Text="℃" Grid.Column="2" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="3" VerticalAlignment="Center">
                                <Hyperlink>删除Hyperlink>
                        TextBlock>
                    Grid>

                    <Grid Height="30" Margin="30,0,0,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        Grid.ColumnDefinitions>
                        <TextBlock Text="湿度" VerticalAlignment="Center"/>
                        <TextBlock Text="40002" Grid.Column="1" VerticalAlignment="Center"/>
                        <TextBlock Text="%" Grid.Column="2" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="3" VerticalAlignment="Center">
                                <Hyperlink>删除Hyperlink>
                        TextBlock>
                    Grid>
                UniformGrid>
            StackPanel>
        Grid>
        <Grid Height="200" Grid.Row="3">Grid>
        <Grid Height="200" Grid.Row="5">Grid>
        <Grid Height="200" Grid.Row="7">Grid>
        <Grid Height="200" Grid.Row="9">Grid>
        <Grid Height="200" Grid.Row="11">Grid>
        <Grid Height="200" Grid.Row="13">Grid>
        <Grid Height="200" Grid.Row="15">Grid>

    Grid>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108