簡介

Microsoft.Maui.Graphics是一個(gè)完全采用C#的iOS，Android，Windows，macOS，Tizen和Linux的跨平臺(tái)圖形庫。
對于MAUI項(xiàng)目當(dāng)中繪制的方案是使用不同平臺(tái)的控件來而非自繪。當(dāng)然MAUI當(dāng)中也使用了Microsoft.Maui.Graphics,
MAUI Preview9更新中, 引入了新的API能夠輕松的將邊框、陰影、形狀添加到其中。

Microsoft.Maui.Graphics.Controls

Microsoft.Maui.Graphics.Controls是一個(gè).NET MAUI 實(shí)驗(yàn)性項(xiàng)目,該項(xiàng)目通過Microsoft.Maui.Graphics庫來繪制控件, 具有多種內(nèi)置主題,
這意味著, 您可以在你現(xiàn)有的MAUI項(xiàng)目當(dāng)中使用它。

接下來, 主要講解如何使用Microsoft.Maui.Graphics.Controls 以及如何自行繪制控件。

使用Microsoft.Maui.Graphics.Controls

首先, 創(chuàng)建一個(gè)MAUI項(xiàng)目, 添加新的Nuget包源并且安裝它。

確保Nuget包源的依賴版本與當(dāng)前MAUI項(xiàng)目版本一致6.0.101-preview.10.2068

打開MauiProgram文件, 添加 ConfigureGraphicsControls

public static MauiApp CreateMauiApp(){var builder = MauiApp.CreateBuilder();builder.UseMauiApp<App>().ConfigureFonts(fonts =>{fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");}).ConfigureGraphicsControls();return builder.Build();}

啟動(dòng)后,效果如下所示:

說明: 可以通過ConfigureGraphicsControls(Microsoft.Maui.Graphics.Controls.DrawableType.Fluent)參數(shù)配置控件的風(fēng)格, 提供了: Cupertino, Fluent ,Material 三種選項(xiàng)。

繪制控件

如果你想要完全實(shí)現(xiàn)自定義控件或者修改控件的某些方面, 你都可以使用它來做到這一點(diǎn), 下來演示如何使用該庫來繪制自定義的圓形控件。

1.創(chuàng)建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中聲明控件,設(shè)置指定大小及顏色

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"xmlns:x="http://schemas.microsoft.com/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.啟動(dòng)項(xiàng)目,查看控件對應(yīng)效果:

總結(jié)

本篇文章主要介紹如何在MAUI項(xiàng)目中使用Microsoft.Maui.Graphics.Controls, 以及通過它實(shí)現(xiàn)自定義控件的擴(kuò)展功能。

總結(jié)

以上是生活随笔為你收集整理的MAUI中Maui.Graphics.Controls绘制控件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。