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

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

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

         成果展示 

        实现过程

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

            界面整体背景设计

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

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

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

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

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

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

            运行结果:

            首页设计

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

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

    1.         <!--主界面分三行-->
    2.         <Grid.RowDefinitions>
    3.             <RowDefinition Height="50"></RowDefinition>
    4.             <RowDefinition Height="auto"></RowDefinition>
    5.             <RowDefinition Height="25"></RowDefinition>
    6.         </Grid.RowDefinitions>
           第一行:

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

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

    2.  <Image Source="/Res/Img/Logo.png" Margin="10,7" />

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

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

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

    1. <!--右侧按钮和下面的图案-->
    2.                 <Grid Grid.Column="2">
    3.                     <!--分为两行-->
    4.                     <Grid.RowDefinitions>
    5.                         <RowDefinition></RowDefinition>
    6.                         <RowDefinition Height="15"></RowDefinition>
    7.                     </Grid.RowDefinitions>
    8.                     <!--三个图标-->
    9.                     <!--WindowChrome.IsHitTestVisibleInChrome="True" 一定要加,否则自定义的不会显示-->
    10.                     <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Background="Transparent" WindowChrome.IsHitTestVisibleInChrome="True">
    11.                         <Button Style="{StaticResource MinClose_BtnStyle}" Content="" Click="Button_Click_Min"></Button>
    12.                         <Button Style="{StaticResource MinClose_BtnStyle}" Content=""></Button>
    13.                         <Button Style="{StaticResource MinClose_BtnStyle}" Content="" Background="DarkRed" Click="Button_Click_Close"></Button>
    14.                     </StackPanel>
    15.                     <!--图案-->
    16.                     <Border  Grid.Row="1" BorderBrush="#5518aabd" BorderThickness="0,1,0,0" >
    17.                         <Border.Background>
    18.                             <VisualBrush TileMode="FlipXY" Viewport="0,0,7,7" ViewportUnits="Absolute">
    19.                                 <VisualBrush.Visual>
    20.                                     <Line X1="0" Y1="10" X2="10" Y2="0" Stroke="Gray" StrokeThickness="1"></Line>
    21.                                 </VisualBrush.Visual>
    22.                             </VisualBrush>
    23.                         </Border.Background>
    24.                     </Border>
    25.                 </Grid>

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

    1.  <!--关闭\最小化按钮字典-->
    2.     <Style TargetType="Button" x:Key="MinClose_BtnStyle">
    3.         <Setter Property="Width" Value="40"></Setter>
    4.         <Setter Property="Background" Value="#11ffffff"></Setter>
    5.         <Setter Property="Foreground" Value="White"></Setter>
    6.         <Setter Property="FontFamily" Value="../Res/Fonts/#iconfont"></Setter>
    7.         
    8.         <!--模板-->
    9.         <Setter Property="Template">
    10.             <Setter.Value>
    11.                 <ControlTemplate TargetType="Button">
    12.                     <!--grid的背景就是按钮的背景-->
    13.                     <Grid Background="{TemplateBinding Background}">
    14.                         <Border x:Name="border">
    15.                             <!--用于显示控件的内容-->
    16.                             <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
    17.                         </Border>
    18.                     </Grid>
    19.                     
    20.                     <!--触发器-->
    21.                     <ControlTemplate.Triggers>
    22.                         <Trigger Property="IsMouseOver" Value="True">
    23.                             <Setter TargetName="border" Property="Background" Value="#33ffffff"></Setter>
    24.                         </Trigger>
    25.                     </ControlTemplate.Triggers>
    26.                     
    27.                 </ControlTemplate>
    28.             </Setter.Value>
    29.         </Setter>
    30.  
    31.     </Style>

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

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

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

            运行的结果

             第三行

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

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

            运行的结果

            第二行

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

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

    1.  public event PropertyChangedEventHandler PropertyChanged;
    2.  
    3.         #region  中间那个 用户控件
    4.         private UserControl _MonitorUC;
    5.  
    6.         public UserControl MonitorUC
    7.         {
    8.             get { 
    9.                 if(_MonitorUC == null)
    10.                 {
    11.                    _MonitorUC = new MonitorUC();  
    12.                 }
    13.                 return _MonitorUC;
    14.             }
    15.             set {
    16.                 _MonitorUC = value;
    17.                 if (PropertyChanged != null)
    18.                 {
    19.                     PropertyChanged(this, new PropertyChangedEventArgs("MonitorUC"));
    20.                 }
    21.             }
    22.         }

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

    1.  //实例化
    2.         MainWindowVM mainWindowVM = new MainWindowVM();
    3.         public MainWindow()
    4.         {
    5.             InitializeComponent();
    6.             //设置数据上下文
    7.             this.DataContext = mainWindowVM;
    8.         }

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

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

            运行结果:

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

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

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

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

    2.                 <StackPanel.Resources>
    3.                     
    4.                     <DataTemplate x:Key="machineCount">
    5.                         
    6.                         <Border Width="15" Background="#3318aabd" Margin="2,0">
    7.                             <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" FontSize="16">TextBlock>
    8.                         Border>
    9.                     DataTemplate>
    10.                 StackPanel.Resources>

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

    1.     <Style TargetType="Button" x:Key="Setting_BtnStyle">
    2.         <Setter Property="Foreground" Value="#aaa"></Setter>
    3.         <!--模板设置触发器\渐变色-->
    4.         <Setter Property="Template">
    5.             <Setter.Value>
    6.                 <ControlTemplate TargetType="Button">
    7.                     <Border Background="Transparent" BorderThickness="1" x:Name="border">
    8.                         <!--渐变色-->
    9.                         <Border.BorderBrush>
    10.                             <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
    11.                                 <GradientStop Color="#22ffffff" Offset="0"></GradientStop>
    12.                                 <GradientStop Color="#77ffffff" Offset="0.5"></GradientStop>
    13.                                 <GradientStop Color="#22ffffff" Offset="1"></GradientStop>
    14.                             </LinearGradientBrush>
    15.                         </Border.BorderBrush>
    16.                         
    17.                         <!--里面放置一个图标 一个文字 Tag类似自定义属性  Content就是对应按钮的Content-->
    18.                         <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    19.                             <TextBlock Text="{TemplateBinding Tag}" FontFamily="../Res/Fonts/#iconfont" Margin="0,2,5,0"></TextBlock>
    20.                             <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center"></TextBlock>
    21.                         </StackPanel>
    22.                     </Border>
    23.                     <!--触发器  放入按钮变颜色-->
    24.                     <ControlTemplate.Triggers>
    25.                         <Trigger Property="IsMouseOver" Value="True">
    26.                             <Setter TargetName="border" Property="Background" Value="#11ffffff"></Setter>
    27.                         </Trigger>
    28.                     </ControlTemplate.Triggers>
    29.                 </ControlTemplate>
    30.             </Setter.Value>
    31.         </Setter>
    32.         
    33.     </Style>

            运行结果:

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

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

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

    1. <UserControl.Resources>
    2.         <Style TargetType="GroupBox">
    3.             <Setter Property="Margin" Value="10,3"></Setter>
    4.             <Setter Property="Template">
    5.                 <Setter.Value>
    6.                     <ControlTemplate TargetType="GroupBox">
    7.                         <Grid>
    8.                             <!--左上角的线条-->
    9.                             <Polyline Points="0 30,0 10,10 0,30 0" Stroke="#9918aabd" StrokeThickness="1" VerticalAlignment="Top" HorizontalAlignment="Left"></Polyline>
    10.                             <!--左上 横的点  小圆-->
    11.                             <Ellipse Width="4" Height="4" HorizontalAlignment="Left" Fill="#9918aabd" VerticalAlignment="Top" Margin="24,-2,0,0"></Ellipse>
    12.                             <!--左侧的点  小圆-->
    13.                             <Ellipse Width="4" Height="4" HorizontalAlignment="Left" Fill="#9918aabd" VerticalAlignment="Top" Margin="-2,24,0,0"></Ellipse>
    14.  
    15.                             <!--Moveto-->
    16.                             <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>
    17.  
    18.                             <!--左下角的线条-->
    19.                             <Polyline Points="0 0,0 15,10 15" Stroke="#9918aabd" StrokeThickness="1" VerticalAlignment="Bottom"  HorizontalAlignment="Left"></Polyline>
    20.  
    21.                             <!--右下角的线-->
    22.                             <Polyline Points="10 0,0,10" Stroke="#9918aabd" StrokeThickness="1" HorizontalAlignment="Right" VerticalAlignment="Bottom"></Polyline>
    23.  
    24.                             <!--右下角的三角形-->
    25.                             <Polygon Points="0 7,7 7,7 0" Fill="#9918aabd" HorizontalAlignment="Right" VerticalAlignment="Bottom"></Polygon>
    26.  
    27.                             <!--上面的线-->
    28.                             <Border BorderThickness="0,1,0,0" BorderBrush="#9918aabd" VerticalAlignment="top" Margin="30,-0.5,78,0"></Border>
    29.                             <!--右边的线-->
    30.                             <Border BorderThickness="0,0,1,0" BorderBrush="#9918aabd"  HorizontalAlignment="Right" Margin="0,10"></Border>
    31.  
    32.                             <!--下面的线-->
    33.                             <Border BorderThickness="0,0,0,1" BorderBrush="#9918aabd" VerticalAlignment="Bottom" Margin="10,0"></Border>
    34.  
    35.                             <!--左边的线-->
    36.                             <Border BorderThickness="1,0,0,0" BorderBrush="#9918aabd"  HorizontalAlignment="Left" Margin="-0.5,15"></Border>
    37.  
    38.                             <!--文字前的装饰-->
    39.                             <Path Data="M0 0,3 0,5 4,3 8,0 8,3 4"   Fill="#9918aabd" Margin="10,13"></Path>
    40.                             <Path Data="M0 0,3 0,5 4,3 8,0 8,3 4"   Fill="#5518aabd" Margin="16,13"></Path>
    41.                             <TextBlock Text="{TemplateBinding Header}" Foreground="White" FontWeight="Bold" Margin="25,8" HorizontalAlignment="Left" VerticalAlignment="Top"></TextBlock>
    42.                             <!--显示内容-->
    43.                             <ContentPresenter></ContentPresenter>
    44.                         </Grid>
    45.                     </ControlTemplate>
    46.                 </Setter.Value>
    47.             </Setter>
    48.         </Style>
    49.     </UserControl.Resources>

            运行结果:

            

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

            柱状图

    1. <!--定义X数据-->
    2.                         <lvc:CartesianChart Margin="20,35,20,5">
    3.                             <lvc:CartesianChart.AxisX>
    4.                                 <lvc:Axis Labels="8:00,9:00,10:00,11:00,12:00,13:00,14:00,15:00,16:00">
    5.                                     <lvc:Axis.Separator>
    6.                                         <lvc:Separator Step="1" StrokeThickness="0"></lvc:Separator>
    7.                                     </lvc:Axis.Separator>
    8.                                 </lvc:Axis>
    9.                             </lvc:CartesianChart.AxisX>
    10.  
    11.                             <!--定义Y的数据-->
    12.                             <lvc:CartesianChart.Series>
    13.                                 <lvc:ColumnSeries Values="300,400,480,450,380,450,450,330,340" Title="生产计数"  MaxColumnWidth="10">
    14.                                     <!--渐变色-->
    15.                                     <lvc:ColumnSeries.Fill>
    16.                                         <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
    17.                                             <GradientStop Color="#ff3fbbe6" Offset="0"></GradientStop>
    18.                                             <GradientStop Color="#ff2bedf1" Offset="1"></GradientStop>
    19.                                         </LinearGradientBrush>
    20.                                     </lvc:ColumnSeries.Fill>
    21.                                 </lvc:ColumnSeries>
    22.  
    23.                                 <lvc:ColumnSeries Values="15,55,15,40,38,45,56,42,24" Title="不良计数"  MaxColumnWidth="10">
    24.                                     <!--渐变色-->
    25.                                     <lvc:ColumnSeries.Fill>
    26.                                         <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
    27.                                             <GradientStop Color="#fffb9a9a" Offset="0"></GradientStop>
    28.                                             <GradientStop Color="#ffff5151" Offset="1"></GradientStop>
    29.                                         </LinearGradientBrush>
    30.                                     </lvc:ColumnSeries.Fill>
    31.                                 </lvc:ColumnSeries>
    32.                             </lvc:CartesianChart.Series>
    33.  
    34.                             <!--Y数据刻度-->
    35.                             <lvc:CartesianChart.AxisY>
    36.                                 <lvc:Axis MinValue="0" MaxValue="500" >
    37.                                     <lvc:Axis.Separator>
    38.                                         <lvc:Separator Step="100" Stroke="#11ffffff"></lvc:Separator>
    39.                                     </lvc:Axis.Separator>
    40.                                 </lvc:Axis>
    41.                             </lvc:CartesianChart.AxisY>
    42.                         </lvc:CartesianChart>

    饼形图

    1.  <!--饼形图-->
    2.                     <!--定义数据标签样式-->
    3.                     <lvc:PieChart InnerRadius="45" Margin="0,40,0,20">
    4.                         <lvc:PieChart.Resources>
    5.                             <Style TargetType="lvc:PieSeries">
    6.                                 <Setter Property="DataLabelsTemplate">
    7.                                     <Setter.Value>
    8.                                         <DataTemplate>
    9.                                             <StackPanel Orientation="Horizontal">
    10.                                                 <TextBlock Text="{Binding Point.SeriesView.Title}" Margin="0,0,5,0" Foreground="#44ffffff"></TextBlock>
    11.                                                 <TextBlock Text="{Binding Point.SeriesView.Values[0]}" Foreground="#44ffffff"></TextBlock>
    12.                                             </StackPanel>
    13.                                         </DataTemplate>
    14.                                     </Setter.Value>
    15.                                 </Setter>
    16.                             </Style>
    17.                         </lvc:PieChart.Resources>
    18.                         <!--定义饼形图数据-->
    19.                         <lvc:PieChart.Series>
    20.                             <lvc:PieSeries Values="20" Title="压差" StrokeThickness="0" DataLabels="True" LabelPosition="OutsideSlice"></lvc:PieSeries>
    21.                             <lvc:PieSeries Values="40" Title="振动" StrokeThickness="0" DataLabels="True" LabelPosition="OutsideSlice"></lvc:PieSeries>
    22.                             <lvc:PieSeries Values="10" Title="设备温度" StrokeThickness="0" DataLabels="True" LabelPosition="OutsideSlice"></lvc:PieSeries>
    23.                             <lvc:PieSeries Values="30" Title="光照" StrokeThickness="0" DataLabels="True" LabelPosition="OutsideSlice"></lvc:PieSeries>
    24.                         </lvc:PieChart.Series>
    25.                     </lvc:PieChart>

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

    1.      <!--画布-->
    2.         <Canvas x:Name="mainCanvas"></Canvas>
    3.         
    4.         <!--4规则多边形-->
    5.         <Polygon x:Name="P1" Stroke="#22ffffff" StrokeThickness="1"></Polygon>
    6.         <Polygon x:Name="P2" Stroke="#22ffffff" StrokeThickness="1"></Polygon>
    7.         <Polygon x:Name="P3" Stroke="#22ffffff" StrokeThickness="1"></Polygon>
    8.         <Polygon x:Name="P4" Stroke="#22ffffff" StrokeThickness="1"></Polygon>
    9.         
    10.         <!--数据多边形-->
    11.         <Polygon x:Name="P5" Stroke="Orange" Fill="#550091F0" StrokeThickness="1" ></Polygon>
    1.  /// <summary>
    2.     /// RaderUC.xaml 的交互逻辑
    3.     /// </summary>
    4.     public partial class RaderUC : UserControl
    5.     {
    6.         public RaderUC()
    7.         {
    8.             InitializeComponent();
    9.  
    10.             SizeChanged += OnSizeChanged;//Alt+Enter
    11.         }
    12.  
    13.         /// <summary>
    14.         /// 窗体大小发生变化 重新画图
    15.         /// </summary>
    16.         /// <param name="sender"></param>
    17.         /// <param name="e"></param>
    18.         private void OnSizeChanged(object sender, SizeChangedEventArgs e)
    19.         {
    20.             Drag();
    21.         }
    22.  
    23.         /// <summary>
    24.         /// 数据源。支持数据绑定 依赖属性
    25.         /// </summary>
    26.         public List<RaderModel> ItemSource
    27.         {
    28.             get { return (List<RaderModel>)GetValue(ItemSourceProperty); }
    29.             set { SetValue(ItemSourceProperty, value); }
    30.         }
    31.  
    32.         // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
    33.         public static readonly DependencyProperty ItemSourceProperty =
    34.             DependencyProperty.Register("ItemSource", typeof(List<RaderModel>), typeof(RaderUC));
    35.  
    36.         /// <summary>
    37.         /// 画图方法
    38.         /// </summary>
    39.         public void Drag()
    40.         {
    41.             //判断是否有数据
    42.             if (ItemSource == null || ItemSource.Count == 0)
    43.             {
    44.                 return;
    45.             }
    46.  
    47.             //清楚之前画的
    48.             mainCanvas.Children.Clear();
    49.             P1.Points.Clear();
    50.             P2.Points.Clear();
    51.             P3.Points.Clear();
    52.             P4.Points.Clear();
    53.             P5.Points.Clear();
    54.  
    55.             //调整大小(正方形)
    56.             double size = Math.Min(RenderSize.Width, RenderSize.Height);
    57.             LayGrid.Height = size;
    58.             LayGrid.Width = size;
    59.             //半径
    60.             double raduis = size / 2;
    61.  
    62.             //步子跨度
    63.             double step = 360.0 / ItemSource.Count;
    64.  
    65.             for (int i = 0; i < ItemSource.Count; i++)
    66.             {
    67.                 double x = (raduis - 20) * Math.Cos((step * i - 90) * Math.PI / 180);//x偏移量
    68.                 double y = (raduis - 20) * Math.Sin((step * i - 90) * Math.PI / 180);//y偏移量
    69.  
    70.                 //X Y坐标
    71.                 P1.Points.Add(new Point(raduis + x, raduis + y));
    72.  
    73.                 P2.Points.Add(new Point(raduis + x * 0.75, raduis + y * 0.75));
    74.  
    75.                 P3.Points.Add(new Point(raduis + x * 0.5, raduis + y * 0.5));
    76.  
    77.                 P4.Points.Add(new Point(raduis + x * 0.25, raduis + y * 0.25));
    78.  
    79.                 //数据多边形
    80.                 P5.Points.Add(new Point(raduis + x * ItemSource[i].Value * 0.01, raduis + y * ItemSource[i].Value * 0.01));
    81.  
    82.                 //文字处理
    83.                 TextBlock txt = new TextBlock();
    84.                 txt.Width = 60;
    85.                 txt.FontSize = 10;
    86.                 txt.TextAlignment = TextAlignment.Center;
    87.                 txt.Text = ItemSource[i].ItemName;
    88.                 txt.Foreground = new SolidColorBrush(Color.FromArgb(100, 255, 255, 255));
    89.                 txt.SetValue(Canvas.LeftProperty, raduis + (raduis - 10) * Math.Cos((step * i - 90) * Math.PI / 180) - 30);//设置左边间距
    90.                 txt.SetValue(Canvas.TopProperty, raduis + (raduis - 10) * Math.Sin((step * i - 90) * Math.PI / 180) - 7);//设置上边间距
    91.  
    92.                 mainCanvas.Children.Add(txt);
    93.             }
    94.         }
    95.     }

            运行结果:

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

  • 相关阅读:
    logback源码阅读(二)日志打印,自定义appender，encoder，pattern，converter
    String.format() 拼接字符串
    java反射高级用列（脱敏+aop）
    LeetCode C++ 28.实现strStr()
    QT小记:QT程序异常结束的可能原因
    Spring Security详细学习第二篇（授权,异常处理，跨域）
    HTML5 —— 初识 Canvas 画布
    Springboot导出Excel，支持大数据量
    ACCESS_MASK不明确的符号
    GitHub上传本地文件
  • 原文地址：https://blog.csdn.net/qq_57049935/article/details/136651585