日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

MAUI使用Maui.Graphics.Controls繪制控件詳解_實用技巧

作者：痕跡g ? 更新時間： 2022-04-15 編程語言

簡介

Microsoft.Maui.Graphics是一個完全采用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("OpenSans-Regular.ttf", "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="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.啟動項目,查看控件對應效果:

總結

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

原文鏈接：https://www.cnblogs.com/zh7791/p/15594282.html

欄目分類
最近更新