Avalonia学习（二十三）-大屏

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

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

圆形控件

前端代码

后台代码

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 ValueProperty =
            AvaloniaProperty.Register(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 BackColorProperty =
           AvaloniaProperty.Register(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 TitleProperty =
          AvaloniaProperty.Register(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库和主界面，很多代码就不贴代码了，完善的效果展示一下。

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