DotNet MAUI notes

MAUI Drawings and Brushes

Simple Brushes

Filling the background of a control or coloring shapes, text and other UI elements, brushes in .NET MAUI can be used. Brushes include:

  • SolidColorBrush: Filling with a solid color.
  • LinearGradientBrush: Creates a linear gradient.
  • RadialGradientBrush: Creates a radial gradient.

And these brushes can be applied to a lot of elements, from Frame to BoxView, Shapes, etc.

SolidColorBrush

The simplest is SolidColorBrush. It is filling the element with one solid color.

<?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"
             x:Class="MauiAppExample.MainPage">

    <StackLayout Padding="20" VerticalOptions="Center" HorizontalOptions="Center">

        <!-- BoxView filled with a solid color using SolidColorBrush -->
        <BoxView WidthRequest="100" HeightRequest="100">
            <BoxView.Background>
                <SolidColorBrush Color="LightBlue" />
            </BoxView.Background>
        </BoxView>

        <!-- Frame with solid color background using SolidColorBrush -->
        <Frame WidthRequest="200" HeightRequest="100" CornerRadius="10">
            <Frame.Background>
                <SolidColorBrush Color="Coral" />
            </Frame.Background>
            <Label Text="Solid Color Background"
                   VerticalOptions="Center"
                   HorizontalOptions="Center"
                   HorizontalTextAlignment="Center" />
        </Frame>
    </StackLayout>
</ContentPage>

LinearGradientBrush

An element is filled with a gradient using a LinearGradientBrush where the colors along which the gradient changes are referred as a line. You can specify where (direction of the gradient) and where not (gradient stops).

<StackLayout Padding="20" VerticalOptions="Center" HorizontalOptions="Center">
    <!-- BoxView with a linear gradient background -->
    <BoxView WidthRequest="200" HeightRequest="100">
        <BoxView.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="LightBlue" Offset="0.0" />
                <GradientStop Color="DeepSkyBlue" Offset="1.0" />
            </LinearGradientBrush>
        </BoxView.Background>
    </BoxView>

    <!-- Frame with a linear gradient background -->
    <Frame WidthRequest="200" HeightRequest="100" CornerRadius="10">
        <Frame.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <GradientStop Color="Yellow" Offset="0.0" />
                <GradientStop Color="Orange" Offset="0.5" />
                <GradientStop Color="Red" Offset="1.0" />
            </LinearGradientBrush>
        </Frame.Background>
        <Label Text="Linear Gradient Background"
               VerticalOptions="Center"
               HorizontalOptions="Center"
               HorizontalTextAlignment="Center" />
    </Frame>
</StackLayout>

RadialGradientBrush


A gradient fills an element with a gradient that emanates from a central point.

<StackLayout Padding="20" VerticalOptions="Center" HorizontalOptions="Center">
    <!-- BoxView with a radial gradient background -->
    <BoxView WidthRequest="150" HeightRequest="150">
        <BoxView.Background>
            <RadialGradientBrush Center="0.5,0.5" Radius="0.5">
                <GradientStop Color="Pink" Offset="0.0" />
                <GradientStop Color="Purple" Offset="1.0" />
            </RadialGradientBrush>
        </BoxView.Background>
    </BoxView>

    <!-- Frame with radial gradient background -->
    <Frame WidthRequest="200" HeightRequest="100" CornerRadius="10">
        <Frame.Background>
            <RadialGradientBrush Center="0.5,0.5" Radius="0.8">
                <GradientStop Color="White" Offset="0.0" />
                <GradientStop Color="Green" Offset="1.0" />
            </RadialGradientBrush>
        </Frame.Background>
        <Label Text="Radial Gradient Background"
               VerticalOptions="Center"
               HorizontalOptions="Center"
               HorizontalTextAlignment="Center" />
    </Frame>
</StackLayout>

Drawing Arbitrary Shapes

The .Net MAUI includes some of the basic shapes that you can draw, for example Rectangle, Ellipse, Line, Polygon and Polyline. It also helps to draw more complex, or custom shapes.

Drawing Simple Shapes

<StackLayout Padding="20" VerticalOptions="Center" HorizontalOptions="Center">
    <!-- Drawing a Rectangle -->
    <Rectangle WidthRequest="100" HeightRequest="50" Fill="LightGreen" Stroke="Black" StrokeThickness="2" />

    <!-- Drawing an Ellipse -->
    <Ellipse WidthRequest="100" HeightRequest="100" Fill="LightCoral" Stroke="Black" StrokeThickness="2" />

    <!-- Drawing a Line -->
    <Line X1="0" Y1="0" X2="100" Y2="100" Stroke="Blue" StrokeThickness="2" />

    <!-- Drawing a Polygon -->
    <Polygon Points="0,0 100,0 50,100" Fill="Yellow" Stroke="Black" StrokeThickness="2" />

    <!-- Drawing a Path (custom shape) -->
    <Path Stroke="DarkBlue" StrokeThickness="2" Fill="LightBlue"
          Data="M 10,100 Q 95,10 180,100 T 350,100" />
</StackLayout>

Rectangle: Draws a rectangle of Width, Height, Fill, Stroke, StrokeThickness.

Ellipse: Draws an ellipse shape.

Line: Sraight line between the specified coordinates.

Polygon: Returns a multiple sided shape from the given points.

Path: Custom shapes are drawn from a Data path string. It leaves more flexibility to create shapes.

Customizing Shapes with Brushes

Shapes can be applied with SolidColorBrush, LinearGradientBrush or RadialGradientBrush.

<StackLayout Padding="20" VerticalOptions="Center" HorizontalOptions="Center">
    <!-- Rectangle with a linear gradient fill -->
    <Rectangle WidthRequest="150" HeightRequest="75" Stroke="Black" StrokeThickness="2">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="Orange" Offset="0.0" />
                <GradientStop Color="Red" Offset="1.0" />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>

    <!-- Ellipse with a radial gradient fill -->
    <Ellipse WidthRequest="100" HeightRequest="100" Stroke="Black" StrokeThickness="2">
        <Ellipse.Fill>
            <RadialGradientBrush Center="0.5,0.5" Radius="0.8">
                <GradientStop Color="LightYellow" Offset="0.0" />
                <GradientStop Color="Gold" Offset="1.0" />
            </RadialGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
</StackLayout>

Using Brushes in Code-Behind

And obviously, brushes can be set programmatically in codebehind. Following is an example of setting a gradient brush from code behind.

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        var gradientBrush = new LinearGradientBrush
        {
            StartPoint = new Point(0, 0),
            EndPoint = new Point(1, 1),
            GradientStops = new GradientStopCollection
            {
                new GradientStop { Color = Colors.LightBlue, Offset = 0.0f },
                new GradientStop { Color = Colors.DarkBlue, Offset = 1.0f }
            }
        };

        var rectangle = new Rectangle
        {
            WidthRequest = 150,
            HeightRequest = 100,
            Stroke = Colors.Black,
            StrokeThickness = 2,
            Fill = gradientBrush
        };

        // Adding the rectangle to the layout
        this.Content = new StackLayout
        {
            Padding = 20,
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
            Children = { rectangle }
        };
    }
}

maui

, ,