Drawings and Brushes
Explore the use of various brushes in .NET MAUI to paint UI elements with solid colors, linear and radial gradients, and custom shapes. Learn to draw shapes like ellipses, rectangles, and paths on the canvas using the GraphicsView and IDrawable interface to create rich graphics in your cross-platform applications.
In UI development, a brush is a tool that allows us to paint an area or an object. For example, we can use a brush to apply a specific background color to a specific object.
In this lesson, we'll cover the usage of brushes in .NET MAUI. We'll do this with the help of the following project setup. The main page of the application contains a range of geometric figures that demonstrate how to use both simple and more advanced brushes.
<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiGraphicsDemo"
x:Class="MauiGraphicsDemo.App">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
Using simple brushes
Simple brushes in MAUI apply solid colors to various objects. The easiest way to implement them is to assign values to various properties of the type Color on a UI element. We have this on lines 17–23 in the MainPage.xaml file in the example above. We also have a Frame element with the following properties:
Here, the examples of Color properties include Background and BorderColor. We can set the color value to one of the pre-defined enum strings, such as LightGreen and DarkGreen. But we can also configure colors more precisely ...