Getting started with Maui custom drawing

stay 2022 Of 5 month , A software was officially released MAUI Cross platform UI frame . I was thinking of writing a few articles about... During the International Children's Day holiday MAUI An introductory blog , It's a pity to find that I'm not good at writing an introductory blog . Plus MAUI It seems to be released in order to catch the release date , It can only be said that it can be developed , Can use the . So I began to assume that everyone is a mature MAUI Developers , Start to enter the blog of self drawn custom drawing and rendering of complex controls

stay MAUI Inside , The default will be Microsoft.Maui.Dependencies quote Microsoft.Maui.Graphics The load of . stay Microsoft.Maui.Graphics in , Provides independent drawing capability across platforms , stay GitHub As an independent open source project , Open source in https://github.com/dotnet/Microsoft.Maui.Graphics

Also as Microsoft.Maui.Graphics As described in its open source project , Use Microsoft.Maui.Graphics Not limited to MAUI On the frame , It can be used in any application framework Microsoft.Maui.Graphics library , Just like the others NuGet Use it as a package . let me put it another way , I can be there. WPF or WinForms Or it can be used in the pure console Microsoft.Maui.Graphics Draw

in addition , I can also inject myself Microsoft.Maui.Graphics Implementation definition of , Extend other rendering engines or frameworks as basic support for drawing

Back to the topic , This article will show you how to MAUI It uses Microsoft.Maui.Graphics The drawing ability provided is self drawing . For any UI Frame speaking , As long as we can achieve good self drawing , It can expand the super cool interface effect , At the same time, it can also facilitate the accumulation and migration of old technologies here UI On the frame . undoubtedly , stay MAUI This is achieved on

Contents of this part , At the moment it's 2022.06 Not much documentation yet , Official documents say MAUI Or a preview , Don't listen to the authorities , stay 5 It was released in June . Published in the 6.0.312 Of dotnet On the version

stay MAUI Inside access Microsoft.Maui.Graphics Thus, self drawing is supported by the framework layer , It's just that the way of implementation is a little around

Install first VisualStudio 2022 The preview version is used to create new MAUI project . because MAUI The release and VisualStudio The release date of does not match , Now you can only preview the version , However, it will be incorporated into the official version later

In the new project , Create a new type , Let this type inherit  Microsoft.Maui.Graphics.IDrawable  Interface . This type can then be implemented by Draw Method , Called by the framework layer to , Thus in Draw Method to execute the drawing . For example, as in the official case , Name this type GraphicsDrawable As the following code

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

stay Draw Inside through DrawLine Draw a line . To make the lines visible , Add the code to set the color and thickness of the line

public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        canvas.StrokeColor = Colors.Red;
        canvas.StrokeSize = 6;
        canvas.DrawLine(10, 10, 90, 100);
    }

After completing this step , Also need to GraphicsDrawable Access to MAUI Inside the frame

stay MAUI The framework provides GraphicsView Element is used for docking Microsoft.Maui.Graphics The drawing function of . stay GraphicsView Of Drawable Attributes inside , It is used to transfer IDrawable Of

The first step of docking is to write  GraphicsDrawable  Types are defined as resources , Convenient for subsequent codes XAML To implement inside . For demonstration purposes , The following code is written in MainPage.xaml in

<?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:local="clr-namespace:HejawrawceaJurheakelerela"
             x:Class="HejawrawceaJurheakelerela.MainPage">
    <ContentPage.Resources>
        <local:GraphicsDrawable x:Key="GraphicsDrawable"></local:GraphicsDrawable>
    </ContentPage.Resources></ContentPage>

Please also send the above code  local  Replace the namespace of with that of your project

And then GraphicsView Use the resources defined above in , As the following code

<GraphicsView x:Name="GraphicsView" WidthRequest="100" HeightRequest="100" Drawable="{StaticResource GraphicsDrawable}"></GraphicsView>

Run the program , You can see a line drawn on the interface

You can see the call stack as follows

That is, the actual implementation is made by Win2D Provided

The above is in Windows Running on the platform , Since the MAUI Claims to be cross platform , What about other platforms

Next, run on the Android platform

Also look at the call stack

You can see the call stack and Windows On the platform , A difference that meets expectations , in other words Microsoft.Maui.Graphics According to different platforms, different underlying rendering technologies are selected

This is it. MAUI Start of self drawing , How to draw a beautiful interface depends on everyone

Tried for several days MAUI I found that it is much better than the preview version I used last time , such as Windows The debugging and deployment of the client is greatly improved . Of course , This is not MAUI Team effort , It is Windows App SDK Team effort , Will be the original UWP A lot of Teaser logic and interaction are optimized . natural , There are also shortcomings , That's it MAUI The team is still too small , A lot of things haven't been polished yet , However, this will be gradually improved with the development investment . current MAUI It's reached Demo level , Status available at the gadget level . If you have any gadgets , Choose one. MAUI It's good to try the water

The code of this article is placed in github  and  gitee  Welcome to visit

You can get the source code of this article in the following ways , Create an empty folder first , Then use the command line cd Command to enter this empty folder , Enter the following code on the command line , You can get the code of this article

git initgit remote add origin https://gitee.com/lindexi/lindexi_gd.gitgit pull origin 2da0315302ae504f50c4c3baa47fe3f45d0cdc26

What is used above is gitee Source , If gitee Cannot access , Please replace with github Source

git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git

After getting the code , Get into HejawrawceaJurheakelerela Folder