弄一个大屏显示的界面例子,但是代码有点多,还有用户控件。
目前还有一点问题在解决,先看一下界面效果。
圆形控件
前端代码
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库和主界面,很多代码就不贴代码了,完善的效果展示一下。
下一篇给大家展示一个物联的演示界面,请期待。