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

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

相关推荐
秃头佛爷2 小时前
Python学习大纲总结及注意事项
开发语言·python·学习
dayouziei4 小时前
java的类加载机制的学习
java·学习
SoraLuna6 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
dsywws7 小时前
Linux学习笔记之vim入门
linux·笔记·学习
晨曦_子画8 小时前
3种最难学习和最容易学习的 3 种编程语言
学习
城南vision8 小时前
Docker学习—Docker核心概念总结
java·学习·docker
ctrey_9 小时前
2024-11-1 学习人工智能的Day20 openCV(2)
人工智能·opencv·学习
十年之少9 小时前
由中文乱码引来的一系列学习——Qt
学习
u01015265810 小时前
STM32F103C8T6学习笔记2--LED流水灯与蜂鸣器
笔记·stm32·学习
王俊山IT10 小时前
C++学习笔记----10、模块、头文件及各种主题(二)---- 预处理指令
开发语言·c++·笔记·学习