Home > Mobile >  .net MAUI: how to draw on canvas
.net MAUI: how to draw on canvas

Time:02-18

I pretty new to c# and maui. I want to understand how can i draw on canvas. I read the docs and find something online. I want to draw simple line.
enter image description here
What I did is created class inside MauiProgram.cs

namespace TestMauiX;
using Microsoft.Maui.Graphics;

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

        return builder.Build();
    }
}

public class MyFirstDrawing : IDrawable
{
    public void Draw(ICanvas canvas, RectangleF dirtyRect)
    {
        canvas.StrokeColor = Colors.Red;
        canvas.StrokeSize = 6;
        canvas.DrawLine(10, 10, 90, 100);
    }
}

And then I have MainPage.xaml but how should I put that drawing inside?

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="TestMauiX.MainPage"
                 BackgroundColor="{DynamicResource SecondaryColor}">
    
        <ScrollView>
            <Grid RowSpacing="25" RowDefinitions="Auto,Auto,Auto,Auto,*"
                  Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">
    
                <Label 
                    Text="Hello, World!"
                    Grid.Row="0"
                    SemanticProperties.HeadingLevel="Level1"
                    FontSize="32"
                    HorizontalOptions="Center" />
....

CodePudding user response:

Currently for MAUI apps you use a GraphicsView control for drawing like you would do on a Canvas control.

See the GraphicsView docs

  • Related