MAUI使⽤Maui.Graphics.Controls绘制控件详解
⽬录
简介
Microsoft.Maui.Graphics.Controls
使⽤Microsoft.Maui.Graphics.Controls
绘制控件
graphics630总结
简介
是⼀个完全采⽤C#的iOS，Android，Windows，macOS，Tizen和Linux的跨平台图形库。
对于MAUI项⽬当中绘制的⽅案是使⽤不同平台的控件来⽽⾮⾃绘。当然MAUI当中也使⽤了Microsoft.Maui.Graphics,
MAUI Preview9更新中, 引⼊了新的API能够轻松的将边框、阴影、形状添加到其中。
Microsoft.Maui.Graphics.Controls
Microsoft.Maui.Graphics.Controls是⼀个.NET MAUI 实验性项⽬，该项⽬通过Microsoft.Maui.Graphics库来绘制控件, 具有多种内置主题，这意味着, 您可以在你现有的MAUI项⽬当中使⽤它。
接下来, 主要讲解如何使⽤Microsoft.Maui.Graphics.Controls 以及如何扩展⾃⾏绘制控件。
使⽤Microsoft.Maui.Graphics.Controls
⾸先, 创建⼀个MAUI项⽬, 添加新的Nuget包源并且安装它。
确保Nuget包源的依赖版本与当前MAUI项⽬版本移植6.0.101-preview.10.2068
打开MauiProgram⽂件, 添加 ConfigureGraphicsControls
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("f", "OpenSansRegular");
}).ConfigureGraphicsControls();
return builder.Build();
}
启动后，效果如下所⽰:
说明: 可以通过ConfigureGraphicsControls(Microsoft.Maui.Graphics.Controls.DrawableType.Fluent)参数配置控件的风格, 提供了: Cupertino, Fluent ,Material 三种选项。
绘制控件
如果你想要完全实现⾃定义控件或者修改控件的某些⽅⾯, 你都可以使⽤它来做到这⼀点, 下来演⽰如何使⽤该库来绘制⾃定义的圆形控件。
1.创建Circle类, 继承于GraphicsView, 并且重写Draw⽅法，绘制指定宽度颜⾊的圆形。
public class Circle : Microsoft.Maui.Graphics.Controls.GraphicsView
{
public static readonly BindableProperty ForegroundProperty =
BindableProperty.Create(nameof(Foreground), typeof(Color),
typeof(Circle), null);
public Color Foreground
{
get => (Color)GetValue(ForegroundProperty);
set => SetValue(ForegroundProperty, value);
}
public static readonly BindableProperty SizeProperty =
BindableProperty.Create(nameof(Size), typeof(float),
typeof(Circle), null);
public float Size
{
get { return (float)GetValue(SizeProperty); }
set { SetValue(SizeProperty, value); }
}
public override void Draw(ICanvas canvas, RectangleF dirtyRect)
{
base.Draw(canvas, dirtyRect);
canvas.SaveState();
canvas.FillColor = Foreground;
var x = dirtyRect.X;
var y = dirtyRect.Y;
canvas.FillEllipse(x, y, Size, Size);
canvas.RestoreState();
}
}
2.XAML中声明控件，设置指定⼤⼩及颜⾊
<ContentPage xmlns="schemas.microsoft/dotnet/2021/maui"
xmlns:x="schemas.microsoft/winfx/2009/xaml"
x:Class="MAUIRender.MainPage"
xmlns:my="clr-namespace:MAUIRender"
xmlns:ctor="clr-namespace:MAUIRender.Controls"
BackgroundColor="{DynamicResource SecondaryColor}">
<Grid>
<StackLayout>
<ctor:Circle Size="50" Foreground="Blue"/>
</StackLayout>
</Grid>
</ContentPage>
3.启动项⽬，查看控件对应效果:
总结
本篇⽂章主要介绍如何在MAUI项⽬中使⽤Microsoft.Maui.Graphics.Controls, 以及通过它实现⾃定义控件的扩展功能。以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。