Detailed explanation of MAUI using draw controls

Introduction

It is a cross-platform graphics library for iOS, Android, Windows, macOS, Tizen and Linux that fully adopts C#.

The drawing scheme in the MAUI project is to use controls from different platforms rather than to draw them. Of course, it is also used in MAUI.

In the MAUI Preview9 update, a new API is introduced to easily add borders, shadows, and shapes to it.

is an experimental .NET MAUI project that draws controls through libraries and has a variety of built-in themes, meaning that you can use it in your existing MAUI project.

Next, we will mainly explain how to use and how to extend the self-drawing control.

use

First, create a MAUI project, add a new Nuget package source and install it.

Ensure that the dependent version of the Nuget package source is ported to the current MAUI project version6.0.101-preview.10.2068

Open the MauiProgram file and add ConfigureGraphicsControls

 public static MauiApp CreateMauiApp()
        {
            var builder = ();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    ("", "OpenSansRegular");
                }).ConfigureGraphicsControls();

            return ();
        }

After startup, the effect is as follows:

Note: The style of the control can be configured through the ConfigureGraphicsControls() parameter, and three options are provided: Cupertino, Fluent, and Material.

Draw controls

If you want to fully implement custom controls or modify certain aspects of the control, you can use it to do this, and here's how to use the library to draw custom circular controls.

1. Create the Circle class, inherit from GraphicsView, and override the Draw method to draw a circle with a specified width and color.

 public class Circle : 
    {
        public static readonly BindableProperty ForegroundProperty =
            (nameof(Foreground), typeof(Color),
                typeof(Circle), null);

        public Color Foreground
        {
            get => (Color)GetValue(ForegroundProperty);
            set => SetValue(ForegroundProperty, value);
        }

        public static readonly BindableProperty SizeProperty =
            (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)
        {
            (canvas, dirtyRect);

            ();

             = Foreground;

            var x = ;
            var y = ;

            (x, y, Size, Size);

            ();
        } 
    }

Declare the control in the specified size and color

<ContentPage xmlns="/dotnet/2021/maui"
             xmlns:x="/winfx/2009/xaml"
             x:Class=""
             xmlns:my="clr-namespace:MAUIRender" 
             xmlns:ctor="clr-namespace:" 
             BackgroundColor="{DynamicResource SecondaryColor}">
    <Grid>
        <StackLayout>
            <ctor:Circle Size="50" Foreground="Blue"/>
        </StackLayout>
    </Grid>
</ContentPage>

3. Start the project and view the corresponding effects of the control:

Summarize

This article mainly introduces how to use it in a MAUI project and to implement the extended functions of custom controls through it.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.