在 Maui 中自繪元件1：繪製

捕獲異常發表於2023-03-14

在 Maui 中自繪元件 系列文章已完結，共六篇，此為第一篇。

在這篇文章中，將自定義一個簡單的按鈕元件，繪製邊框、背景、文字元素。

GraphicsView

Maui 中提供了 GraphicsView 檢視，可透過繼承 GraphicsView 檢視來自定義元件。

GraphicsView 中定義了型別為 IDrawable 的屬性，在渲染時，將呼叫 IDrawable 中的 Draw 方法來繪製元件。

建立 MagicButtonDrawable

新建一個空的 Maui 專案，在專案根目錄下建立 Components 資料夾，在其中建立 MagicButtonDrawable 類，並繼承 IDrawable。MagicButtonDrawable 將負責自定義元件的繪製。

public class MagicButtonDrawable : IDrawable
{
    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
    }
}

繪製邊框

定義方法 DrawStroke 來繪製邊框：

public void DrawStroke(ICanvas canvas, RectF dirtyRect)
{
    canvas.SaveState();

    canvas.SetFillPaint(new SolidPaint(Brush.LightBlue.Color), dirtyRect);

    canvas.FillRoundedRectangle(dirtyRect.X, dirtyRect.Y, dirtyRect.Width, dirtyRect.Height, dirtyRect.Height / 2);

    canvas.RestoreState();
}

在此方法中呼叫了 ICanvas 的 FillRoundedRectangle 方法，繪製了一個填充色為 LightBlue 的圓角矩形。下一步將在此矩形之上，再繪製一個寬高小於此圖案的不同填充色的圓角矩形，來實現邊框的效果。

繪製背景

定義方法 DrawBackground 來繪製背景：

public void DrawBackground(ICanvas canvas, RectF dirtyRect)
{
    canvas.SaveState();

    canvas.SetFillPaint(new SolidPaint(Brush.Blue.Color), dirtyRect);

    var strokeThickness = 3;
    var x = dirtyRect.X + strokeThickness;
    var y = dirtyRect.Y + strokeThickness;
    var width = dirtyRect.Width - strokeThickness * 2;
    var height = dirtyRect.Height - strokeThickness * 2;

    canvas.FillRoundedRectangle(x, y, width, height, height / 2);

    canvas.RestoreState();
}

將邊框厚度設為3，那麼將繪製起始點的 X、Y座標都加上邊框的寬度，並將寬度和高度都減去兩個邊框的厚度，來進行繪製，即可得到底層一個大的圓角矩形，其上一個略小的圓角矩形，從而實現邊框的效果。

dirtyRect 的 X 和 Y 為繪製區域的左上角座標，在 canvas 上進行繪製將根據 dirtyRect 的 X 和 Y 從左上角開始繪製。

繪製文字

定義方法 DrawText 來繪製按鈕中的文字內容：

public void DrawText(ICanvas canvas, RectF dirtyRect)
{
    canvas.SaveState();

    canvas.FontColor = Brush.White.Color;
    canvas.FontSize = 16;
    canvas.DrawString("Magic Button", dirtyRect.X, dirtyRect.Y, dirtyRect.Width, dirtyRect.Height,
        HorizontalAlignment.Center,
        VerticalAlignment.Center);

    canvas.RestoreState();
}

建立 MagicButton

在 Components 資料夾中建立 MagicButton 類，並繼承 GraphicsView。透過建構函式將 Drawable 屬性設定為 MagicButtonDrawable 的例項。

public class MagicButton : GraphicsView
{
    public MagicButton()
    {
        Drawable = new MagicButtonDrawable();
    }
}

使用 MagicButton

修改 MainPage.xaml 引用 MagicButton 名稱空間，並新增 MagicButton 元件：


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:components="clr-namespace:YOUR_MAGICBUTTON_NAMESPACE"
             x:Class="YOUR_ROOT_NAMESAPCE.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <!-- ...... -->

            <!--使用自定義的 MagicButton-->
            <components:MagicButton
                HeightRequest="50"
                WidthRequest="150"></components:MagicButton>

            <Button
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

效果如下：

custom button