Avalonia学习（二十三）-大屏

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

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

圆形控件

前端代码

<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>

后台代码

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