我家小花儿

这个屌丝很懒，什么也没留下！

热门标签

WPF监控平台(科技大屏)[一]

作者：我家小花儿 | 2024-03-17 20:46:25

踩

WPF监控平台(科技大屏)[一]

跟着B站的视频敲了一个略微复杂的WPF界面,链接如下.在这里我详细的写一份博客进行设计总结.

系统介绍和配置及主窗口设计_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Wy421Y7QD?p=1&vd_source=4796b18a2e4c1ec8a310391a5644b6da

成果展示

实现过程

总体来说,我的理解都是设计框架,再具体的画里面的布局.

界面整体背景设计

我们不需要窗口自带的边框,所以需要隐藏,这里调用设计WindowChrome中的GlassFrameThickness 为0或者负数即可.


<WindowChrome.WindowChrome>
        <!--隐藏边框-->
        <WindowChrome GlassFrameThickness="0"></WindowChrome>
    </WindowChrome.WindowChrome>

界面整体颜色为渐变色,进行设计,渐变色使用画刷,这里介绍两种画刷,两种画刷的写法一致,只是颜色的方向有所差别,都是使用offset表示与开始点的距离

1.LinearGradientBrush,这种画刷是由左上角向右下.

2.RadialGradientBrush,这种画刷是有中心向外面渐变(此项目使用这种)


<!--设计背景颜色渐变-->
        <Grid.Background>
            <RadialGradientBrush>
                <GradientStop Color="#ff285173" Offset="0"></GradientStop>
                <GradientStop Color="#ff244967" Offset="0.5"></GradientStop>
                <GradientStop Color="#13164B" Offset="1"></GradientStop>
            </RadialGradientBrush>
        </Grid.Background>

运行结果:

首页设计

首页分为三行进行设计,标题为第一行,中间的内容为第二行,底部为第三行.

代码先分出三行:类似于代码中Height之类的属性,可以自己试着调,让界面看起来美观即可


        <!--主界面分三行-->
        <Grid.RowDefinitions>
            <RowDefinition Height="50"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="25"></RowDefinition>
        </Grid.RowDefinitions>

第一行:

第一行下面的分割线颜色设计为#5518aabd,整体分为3列,第三列再分为两行进行设计.

第一列最左边为一个图标,直接将文件中的Image拖入即可


<!--图标-->
 <Image Source="/Res/Img/Logo.png" Margin="10,7" />

第二列放置一个垂直吧方向的堆面板,再用TextBlock放置文字


                <!--文字-->
                <StackPanel Orientation="Vertical" Grid.Column="1">
                    <TextBlock Text="生产监控平台" Foreground="White" FontSize="16" VerticalAlignment="Center" Margin="0,5,0,0"></TextBlock>
                    <TextBlock Text="阻碍你前行的,其实就是你自己!" Foreground="White" FontSize="12" Margin="0,3,0,0" ></TextBlock>
                </StackPanel>

第三列整体分为两行,第一行使用对面板放置三个按钮,第二行画纹路.,下面代码中的最小化和关闭按钮我与视频中的处理方法不一样,我这里是直接设计了一个点击事件,在此界面对应的代码中直接对窗口进行控制.


<!--右侧按钮和下面的图案-->
                <Grid Grid.Column="2">
                    <!--分为两行-->
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition Height="15"></RowDefinition>
                    </Grid.RowDefinitions>
                    <!--三个图标-->
                    <!--WindowChrome.IsHitTestVisibleInChrome="True" 一定要加,否则自定义的不会显示-->
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Background="Transparent" WindowChrome.IsHitTestVisibleInChrome="True">
                        <Button Style="{StaticResource MinClose_BtnStyle}" Content="&#xe624;" Click="Button_Click_Min"></Button>
                        <Button Style="{StaticResource MinClose_BtnStyle}" Content="&#xe600;"></Button>
                        <Button Style="{StaticResource MinClose_BtnStyle}" Content="&#xe609;" Background="DarkRed" Click="Button_Click_Close"></Button>
                    </StackPanel>
                    <!--图案-->
                    <Border  Grid.Row="1" BorderBrush="#5518aabd" BorderThickness="0,1,0,0" >
                        <Border.Background>
                            <VisualBrush TileMode="FlipXY" Viewport="0,0,7,7" ViewportUnits="Absolute">
                                <VisualBrush.Visual>
                                    <Line X1="0" Y1="10" X2="10" Y2="0" Stroke="Gray" StrokeThickness="1"></Line>
                                </VisualBrush.Visual>
                            </VisualBrush>
                        </Border.Background>
                    </Border>
                </Grid>

其中,设计三个图标时引入了一个自定义的资源字典,因为不止这里会用到,故定义的全局变量.


 <!--关闭\最小化按钮字典-->
    <Style TargetType="Button" x:Key="MinClose_BtnStyle">
        <Setter Property="Width" Value="40"></Setter>
        <Setter Property="Background" Value="#11ffffff"></Setter>
        <Setter Property="Foreground" Value="White"></Setter>
        <Setter Property="FontFamily" Value="../Res/Fonts/#iconfont"></Setter>
        
        <!--模板-->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <!--grid的背景就是按钮的背景-->
                    <Grid Background="{TemplateBinding Background}">
                        <Border x:Name="border">
                            <!--用于显示控件的内容-->
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
                        </Border>
                    </Grid>
                    
                    <!--触发器-->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="Background" Value="#33ffffff"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                    
                </ControlTemplate>
            </Setter.Value>
        </Setter>
 
    </Style>

这里字典中的FontFamily是再阿里巴巴资源图标库下载的后缀为.ttf的文件,content设置为里面的代码即可显示对应的图标

然后需要设计 WindowChrome.IsHitTestVisibleInChrome="True"

最后的图案是再boder中使用画笔画出

运行的结果

第三行

第三行是底部,比较简单和第一行类似,因此我们先进行设计.

底部分为两列,第一列绘制图案,第二列是相关文字

运行的结果

第二行

第二行内容很多,我们自定义一个用户控件放入.

首先要做的就是定义一个用户控件嵌入到主窗口之中,这里先新定义一个用户控件文件,再创建一个ViewModel层的文件,在里面将二者绑定起来


 public event PropertyChangedEventHandler PropertyChanged;
 
        #region  中间那个 用户控件
        private UserControl _MonitorUC;
 
        public UserControl MonitorUC
        {
            get { 
                if(_MonitorUC == null)
                {
                   _MonitorUC = new MonitorUC();  
                }
                return _MonitorUC;
            }
            set {
                _MonitorUC = value;
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs("MonitorUC"));
                }
            }
        }

然后在主界面的代码下实例化viewModel,设置数据上下文


 //实例化
        MainWindowVM mainWindowVM = new MainWindowVM();
        public MainWindow()
        {
            InitializeComponent();
            //设置数据上下文
            this.DataContext = mainWindowVM;
        }

最后主界面一定要嵌入此用户控件,嵌入使用ContentControl

<ContentControl Grid.Row="1" Content="{Binding MonitorUC}"></ContentControl>

运行结果:

接着对第二行内部(自定义用户控件)进行设计,分为三行:

第二行内部的第一行分为两列,左边的日期为一列,右边剩下的为一列

左边第一列日期用一个水平方向的对面板里面放置一个TextBlock和一个垂直方向的堆面板,时间和日期视频里面是静态的,我这里进行动态获取,可参考这篇专栏里面的另一篇实时时间显示.

右边分为左右两部分,用靠左和靠右实现即可,左边使用水平方向的堆面板进行排列,文字换行使用WPF里面的换行符,中间有背景的字是再border里面嵌套了一个TextBlock,之后使用ItemsControl控件循环获取显示数据.


<!--资源-->
                <StackPanel.Resources>
                    <!--动态数据模板-->
                    <DataTemplate x:Key="machineCount">
                        <!--将当前数据项（通常是一个对象）的默认属性值绑定到 TextBlock 的 Text 属性上-->
                        <Border Width="15" Background="#3318aabd" Margin="2,0">
                            <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" FontSize="16"></TextBlock>
                        </Border>
                    </DataTemplate>
                </StackPanel.Resources>

右边的按钮也是进行了一个资源编写.这里需要注意的是属性绑定,定义的目标对象是按钮,我们要放文字和一个图标进去,文字可以直接绑定按钮的Content属性,这里的图标绑定的是按钮的Tag属性,Tag在原按钮中什么也不代表,类似于官方预留的留给我们自定义的接口.


    <Style TargetType="Button" x:Key="Setting_BtnStyle">
        <Setter Property="Foreground" Value="#aaa"></Setter>
        <!--模板设置触发器\渐变色-->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="Transparent" BorderThickness="1" x:Name="border">
                        <!--渐变色-->
                        <Border.BorderBrush>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                <GradientStop Color="#22ffffff" Offset="0"></GradientStop>
                                <GradientStop Color="#77ffffff" Offset="0.5"></GradientStop>
                                <GradientStop Color="#22ffffff" Offset="1"></GradientStop>
                            </LinearGradientBrush>
                        </Border.BorderBrush>
                        
                        <!--里面放置一个图标 一个文字 Tag类似自定义属性  Content就是对应按钮的Content-->
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <TextBlock Text="{TemplateBinding Tag}" FontFamily="../Res/Fonts/#iconfont" Margin="0,2,5,0"></TextBlock>
                            <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center"></TextBlock>
                        </StackPanel>
                    </Border>
                    <!--触发器  放入按钮变颜色-->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="Background" Value="#11ffffff"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        
    </Style>

运行结果:

第二行的中间部分也是分为3列,三列里面每一列再分为三行,当然也已使用UniformGrid,因为每部分的大小一致

这里我们注意到GroupBox 几乎在每个部分都出现了,所以我们可以先把他画出来.

这里我们使用了Polyline画线,Ellipse画圆(点就是半径很小的圆),Path画路径,Polygon 画多边形. <ContentPresenter></ContentPresenter> 一定要加这句,才能显示重新定义的标题


<UserControl.Resources>
        <Style TargetType="GroupBox">
            <Setter Property="Margin" Value="10,3"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GroupBox">
                        <Grid>
                            <!--左上角的线条-->
                            <Polyline Points="0 30,0 10,10 0,30 0" Stroke="#9918aabd" StrokeThickness="1" VerticalAlignment="Top" HorizontalAlignment="Left"></Polyline>
                            <!--左上 横的点  小圆-->
                            <Ellipse Width="4" Height="4" HorizontalAlignment="Left" Fill="#9918aabd" VerticalAlignment="Top" Margin="24,-2,0,0"></Ellipse>
                            <!--左侧的点  小圆-->
                            <Ellipse Width="4" Height="4" HorizontalAlignment="Left" Fill="#9918aabd" VerticalAlignment="Top" Margin="-2,24,0,0"></Ellipse>
 
                            <!--Moveto-->
                            <Path Data="M0 0,3 3,30 3,33 0,68 0,73 7,78 7,78,10M8 0,25 0" Stroke="#9918aabd" VerticalAlignment="Top" HorizontalAlignment="Right"></Path>
 
                            <!--左下角的线条-->
                            <Polyline Points="0 0,0 15,10 15" Stroke="#9918aabd" StrokeThickness="1" VerticalAlignment="Bottom"  HorizontalAlignment="Left"></Polyline>
 
                            <!--右下角的线-->
                            <Polyline Points="10 0,0,10" Stroke="#9918aabd" StrokeThickness="1" HorizontalAlignment="Right" VerticalAlignment="Bottom"></Polyline>
 
                            <!--右下角的三角形-->
                            <Polygon Points="0 7,7 7,7 0" Fill="#9918aabd" HorizontalAlignment="Right" VerticalAlignment="Bottom"></Polygon>
 
                            <!--上面的线-->
                            <Border BorderThickness="0,1,0,0" BorderBrush="#9918aabd" VerticalAlignment="top" Margin="30,-0.5,78,0"></Border>
                            <!--右边的线-->
                            <Border BorderThickness="0,0,1,0" BorderBrush="#9918aabd"  HorizontalAlignment="Right" Margin="0,10"></Border>
 
                            <!--下面的线-->
                            <Border BorderThickness="0,0,0,1" BorderBrush="#9918aabd" VerticalAlignment="Bottom" Margin="10,0"></Border>
 
                            <!--左边的线-->
                            <Border BorderThickness="1,0,0,0" BorderBrush="#9918aabd"  HorizontalAlignment="Left" Margin="-0.5,15"></Border>
 
                            <!--文字前的装饰-->
                            <Path Data="M0 0,3 0,5 4,3 8,0 8,3 4"   Fill="#9918aabd" Margin="10,13"></Path>
                            <Path Data="M0 0,3 0,5 4,3 8,0 8,3 4"   Fill="#5518aabd" Margin="16,13"></Path>
                            <TextBlock Text="{TemplateBinding Header}" Foreground="White" FontWeight="Bold" Margin="25,8" HorizontalAlignment="Left" VerticalAlignment="Top"></TextBlock>
                            <!--显示内容-->
                            <ContentPresenter></ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

运行结果:

然后进行里面具体内容的绘制,这一部分要创建一个Nodels层来管理数据,里面绘制的柱状图等需要使用到LiveCharts的插件.

柱状图


<!--定义X数据-->
                        <lvc:CartesianChart Margin="20,35,20,5">
                            <lvc:CartesianChart.AxisX>
                                <lvc:Axis Labels="8:00,9:00,10:00,11:00,12:00,13:00,14:00,15:00,16:00">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="1" StrokeThickness="0"></lvc:Separator>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisX>
 
                            <!--定义Y的数据-->
                            <lvc:CartesianChart.Series>
                                <lvc:ColumnSeries Values="300,400,480,450,380,450,450,330,340" Title="生产计数"  MaxColumnWidth="10">
                                    <!--渐变色-->
                                    <lvc:ColumnSeries.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#ff3fbbe6" Offset="0"></GradientStop>
                                            <GradientStop Color="#ff2bedf1" Offset="1"></GradientStop>
                                        </LinearGradientBrush>
                                    </lvc:ColumnSeries.Fill>
                                </lvc:ColumnSeries>
 
                                <lvc:ColumnSeries Values="15,55,15,40,38,45,56,42,24" Title="不良计数"  MaxColumnWidth="10">
                                    <!--渐变色-->
                                    <lvc:ColumnSeries.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#fffb9a9a" Offset="0"></GradientStop>
                                            <GradientStop Color="#ffff5151" Offset="1"></GradientStop>
                                        </LinearGradientBrush>
                                    </lvc:ColumnSeries.Fill>
                                </lvc:ColumnSeries>
                            </lvc:CartesianChart.Series>
 
                            <!--Y数据刻度-->
                            <lvc:CartesianChart.AxisY>
                                <lvc:Axis MinValue="0" MaxValue="500" >
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="100" Stroke="#11ffffff"></lvc:Separator>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisY>
                        </lvc:CartesianChart>

饼形图


 <!--饼形图-->
                    <!--定义数据标签样式-->
                    <lvc:PieChart InnerRadius="45" Margin="0,40,0,20">
                        <lvc:PieChart.Resources>
                            <Style TargetType="lvc:PieSeries">
                                <Setter Property="DataLabelsTemplate">
                                    <Setter.Value>
                                        <DataTemplate>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Point.SeriesView.Title}" Margin="0,0,5,0" Foreground="#44ffffff"></TextBlock>
                                                <TextBlock Text="{Binding Point.SeriesView.Values[0]}" Foreground="#44ffffff"></TextBlock>
                                            </StackPanel>
                                        </DataTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </lvc:PieChart.Resources>
                        <!--定义饼形图数据-->
                        <lvc:PieChart.Series>
                            <lvc:PieSeries Values="20" Title="压差" StrokeThickness="0" DataLabels="True" LabelPosition="OutsideSlice"></lvc:PieSeries>
                            <lvc:PieSeries Values="40" Title="振动" StrokeThickness="0" DataLabels="True" LabelPosition="OutsideSlice"></lvc:PieSeries>
                            <lvc:PieSeries Values="10" Title="设备温度" StrokeThickness="0" DataLabels="True" LabelPosition="OutsideSlice"></lvc:PieSeries>
                            <lvc:PieSeries Values="30" Title="光照" StrokeThickness="0" DataLabels="True" LabelPosition="OutsideSlice"></lvc:PieSeries>
                        </lvc:PieChart.Series>
                    </lvc:PieChart>

雷达:在界面中定义名字,在后台进行绘制


     <!--画布-->
        <Canvas x:Name="mainCanvas"></Canvas>
        
        <!--4规则多边形-->
        <Polygon x:Name="P1" Stroke="#22ffffff" StrokeThickness="1"></Polygon>
        <Polygon x:Name="P2" Stroke="#22ffffff" StrokeThickness="1"></Polygon>
        <Polygon x:Name="P3" Stroke="#22ffffff" StrokeThickness="1"></Polygon>
        <Polygon x:Name="P4" Stroke="#22ffffff" StrokeThickness="1"></Polygon>
        
        <!--数据多边形-->
        <Polygon x:Name="P5" Stroke="Orange" Fill="#550091F0" StrokeThickness="1" ></Polygon>


 /// <summary>
    /// RaderUC.xaml 的交互逻辑
    /// </summary>
    public partial class RaderUC : UserControl
    {
        public RaderUC()
        {
            InitializeComponent();
 
            SizeChanged += OnSizeChanged;//Alt+Enter
        }
 
        /// <summary>
        /// 窗体大小发生变化 重新画图
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void OnSizeChanged(object sender, SizeChangedEventArgs e)
        {
            Drag();
        }
 
        /// <summary>
        /// 数据源。支持数据绑定 依赖属性
        /// </summary>
        public List<RaderModel> ItemSource
        {
            get { return (List<RaderModel>)GetValue(ItemSourceProperty); }
            set { SetValue(ItemSourceProperty, value); }
        }
 
        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ItemSourceProperty =
            DependencyProperty.Register("ItemSource", typeof(List<RaderModel>), typeof(RaderUC));
 
        /// <summary>
        /// 画图方法
        /// </summary>
        public void Drag()
        {
            //判断是否有数据
            if (ItemSource == null || ItemSource.Count == 0)
            {
                return;
            }
 
            //清楚之前画的
            mainCanvas.Children.Clear();
            P1.Points.Clear();
            P2.Points.Clear();
            P3.Points.Clear();
            P4.Points.Clear();
            P5.Points.Clear();
 
            //调整大小(正方形)
            double size = Math.Min(RenderSize.Width, RenderSize.Height);
            LayGrid.Height = size;
            LayGrid.Width = size;
            //半径
            double raduis = size / 2;
 
            //步子跨度
            double step = 360.0 / ItemSource.Count;
 
            for (int i = 0; i < ItemSource.Count; i++)
            {
                double x = (raduis - 20) * Math.Cos((step * i - 90) * Math.PI / 180);//x偏移量
                double y = (raduis - 20) * Math.Sin((step * i - 90) * Math.PI / 180);//y偏移量
 
                //X Y坐标
                P1.Points.Add(new Point(raduis + x, raduis + y));
 
                P2.Points.Add(new Point(raduis + x * 0.75, raduis + y * 0.75));
 
                P3.Points.Add(new Point(raduis + x * 0.5, raduis + y * 0.5));
 
                P4.Points.Add(new Point(raduis + x * 0.25, raduis + y * 0.25));
 
                //数据多边形
                P5.Points.Add(new Point(raduis + x * ItemSource[i].Value * 0.01, raduis + y * ItemSource[i].Value * 0.01));
 
                //文字处理
                TextBlock txt = new TextBlock();
                txt.Width = 60;
                txt.FontSize = 10;
                txt.TextAlignment = TextAlignment.Center;
                txt.Text = ItemSource[i].ItemName;
                txt.Foreground = new SolidColorBrush(Color.FromArgb(100, 255, 255, 255));
                txt.SetValue(Canvas.LeftProperty, raduis + (raduis - 10) * Math.Cos((step * i - 90) * Math.PI / 180) - 30);//设置左边间距
                txt.SetValue(Canvas.TopProperty, raduis + (raduis - 10) * Math.Sin((step * i - 90) * Math.PI / 180) - 7);//设置上边间距
 
                mainCanvas.Children.Add(txt);
            }
        }
    }

运行结果:

最后一个部分整体分为两行两列设计,获取数据方法和上面类似;样式这些可以自己慢慢条.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/257919