Avalonia学习（二十三）-大屏

弄一个大屏显示的界面例子，但是代码有点多，还有用户控件。

目前还有一点问题在解决，先看一下界面效果。

圆形控件

前端代码

XML 复制代码

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="ProAvalonia.Controls.CircularProgressBar">
  <Grid Name="layout" >
    <Ellipse StrokeThickness="8"  Name="backEllipse"
                 />
    <Path Data="M75.001 5 A70 70 0 1 1 75 5" StrokeThickness="6" Stroke="#CC2BB6FE"
          Name="path"/>

    <Viewbox Margin="14">
      <TextBlock 
                 VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Viewbox>

    <Grid VerticalAlignment="Top" Margin="0,-3,0,0">
      <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>
      <Canvas>
        <TextBlock 
                   HorizontalAlignment="Right" FontSize="9" Foreground="#55FFFFFF"
                   Canvas.Right="8"/>
      </Canvas>
    </Grid>
  </Grid>
</UserControl>

后台代码

cs 复制代码

using Avalonia.Controls;
using System.ComponentModel;
using System;
using Avalonia;
using System.Drawing;
using Avalonia.Media;
using Brush = System.Drawing.Brush;
using Color = System.Drawing.Color;

namespace ProAvalonia.Controls
{
    public partial class CircularProgressBar : UserControl
    {
        public static readonly StyledProperty<double> ValueProperty =
            AvaloniaProperty.Register<CircularProgressBar,double>(nameof(Value),0);
        public double Value
        {
            get { return (double)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }
        
        }
        //private static void OnValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        //{
        //    (d as CircularProgressBar).UpdateValue();
        //}

        public static readonly StyledProperty<SolidColorBrush> BackColorProperty =
           AvaloniaProperty.Register<CircularProgressBar, SolidColorBrush>(nameof(BackColor));
        public SolidColorBrush BackColor
        {
            get { return (SolidColorBrush)GetValue(BackColorProperty); }
            set { SetValue(ValueProperty, value); }
        }

        public string Title
        {
            get { return (string)GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }
        public static readonly StyledProperty<string> TitleProperty =
          AvaloniaProperty.Register<CircularProgressBar, string>(nameof(Title));

        public CircularProgressBar()
        {
            InitializeComponent();
            this.SizeChanged += CircularProgressBar_SizeChanged;
        }

      
        private void CircularProgressBar_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            UpdateValue();
        }

        private void UpdateValue()
        {
            this.layout.Width = Math.Min(this.Width, this.Height);
            double radius = this.layout.Width / 2;
            if (radius == 0 || Value == 0) return;

            double newX = 0.0, newY = 0.0;
            newX = radius + (radius - 3) * Math.Cos((Value % 100 * 100 * 3.6 - 90) * Math.PI / 180);
            newY = radius + (radius - 3) * Math.Sin((Value % 100 * 100 * 3.6 - 90) * Math.PI / 180);

            string pathStr = $"M{radius + 0.01} 3 " +
                $"A{radius - 3} {radius - 3} 0 {(this.Value < 0.5 ? 0 : 1)} 1 {newX} {newY}";

            var converter = TypeDescriptor.GetConverter(typeof(Geometry));
            this.path.Data = (Geometry)converter.ConvertFrom(pathStr);
        }
    }
}

另外还有GroupBox库和主界面，很多代码就不贴代码了，完善的效果展示一下。

下一篇给大家展示一个物联的演示界面，请期待。