XAML MAUI Graphic Views


BoxView

BoxView is a basic control for painting rectangles or squares and may be used for drawing lines, separators or primitive shapes.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.BoxViewPage">

    <StackLayout Padding="20" HorizontalOptions="Center" VerticalOptions="Center">
        <!-- A simple BoxView as a rectangle -->
        <BoxView Color="Blue"
                 WidthRequest="100"
                 HeightRequest="100"
                 HorizontalOptions="Center"
                 VerticalOptions="Center" />
    </StackLayout>

</ContentPage>

Graphic Primitives (Rectangle, Round Rectangle, ellipse, Polygon, Line, Polyline, Path)

The following shapes are made with XAML and the namespace of Microsoft.Maui.Controls.Shapes. It is more developed than BoxView type, supporting more enhancement such as curves and paths.

Rectangle and RoundRectangle

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:shapes="clr-namespace:Microsoft.Maui.Controls.Shapes;assembly=Microsoft.Maui.Controls"
             x:Class="MauiAppExample.RectanglePage">

    <StackLayout Padding="20" HorizontalOptions="Center" VerticalOptions="Center">
        <!-- Simple Rectangle -->
        <shapes:Rectangle Fill="Green" WidthRequest="150" HeightRequest="100" />

        <!-- Rounded Rectangle -->
        <shapes:Rectangle Fill="Purple" WidthRequest="150" HeightRequest="100">
            <shapes:Rectangle.RadiusX>20</shapes:Rectangle.RadiusX>
            <shapes:Rectangle.RadiusY>20</shapes:Rectangle.RadiusY>
        </shapes:Rectangle>
    </StackLayout>

</ContentPage>
  • Rectangle: Draws a basic rectangle.
  • RadiusX and RadiusY: Make the corners smooth, that changes it to a “RoundRectangle”.

Ellipse

<shapes:Ellipse Fill="Red" WidthRequest="100" HeightRequest="100" />

Polygon

<shapes:Polygon Fill="Orange" Stroke="Black" StrokeThickness="2" Points="50,0 100,100 0,100" />
  • Polygon: Draws a new shape with more than four sides.
  • Points: Identifies the coordinates of each vertex of the polygon (each double represents an x, y pair).

Line

<shapes:Line X1="0" Y1="0" X2="200" Y2="100" Stroke="Blue" StrokeThickness="2" />
  • Line: Connects the two points defined respectively by coordinates (X1,Y1) to the coordinates (X2,Y2).
  • Stroke: Sets the line color.
  • StrokeThickness: Sets the width of the line.

Polyline

Polyline is almost like Polygon but it doesn’t draw a line that joins the first and the last points.

<shapes:Polyline Stroke="Green" StrokeThickness="2" Points="0,0 50,50 100,0 150,50" />
  • Polyline: A series of connected lines.
  • Points: Coordinates of each vertex. Unlike Polygon, it will not join the last point to the first one as a default action.

Path

Path is one of the most flexible tools to create any vector shape with path data string.

<shapes:Path Stroke="Black" StrokeThickness="2" Fill="LightBlue">
    <shapes:Path.Data>
        <shapes:PathGeometry>
            <shapes:PathFigure StartPoint="10,100">
                <shapes:LineSegment Point="100,100" />
                <shapes:ArcSegment Point="100,0" Size="50,50" RotationAngle="45" />
            </shapes:PathFigure>
        </shapes:PathGeometry>
    </shapes:Path.Data>
</shapes:Path>
  • Path: Generates an appearance by means of vectors.
  • PathGeometry: Tells about the synthesis of shapes including original geometry.
  • PathFigure: Stands for part of the path from a particular point.
  • LineSegment and ArcSegment: Define line and arc segments.

GraphicsView

GraphicsView is one of the main components which is able the handle drawing on the Microsoft.Maui.Graphics drawing platform. It provides you more ability to graphics than the normal control so you can get better and complicated graphics.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.GraphicsViewPage">

    <GraphicsView x:Name="MyGraphicsView"
                  Drawable="{Binding MyDrawable}"
                  HeightRequest="300"
                  WidthRequest="300" />
</ContentPage>
namespace MauiAppExample
{
    public partial class GraphicsViewPage : ContentPage
    {
        public GraphicsViewPage()
        {
            InitializeComponent();
            MyGraphicsView.Drawable = new CustomDrawable();
        }
    }

    public class CustomDrawable : IDrawable
    {
        public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            // Draw a blue rectangle
            canvas.FillColor = Colors.Blue;
            canvas.FillRectangle(50, 50, 200, 100);

            // Draw a red circle
            canvas.FillColor = Colors.Red;
            canvas.FillCircle(150, 200, 50);

            // Draw a green line
            canvas.StrokeColor = Colors.Green;
            canvas.StrokeSize = 4;
            canvas.DrawLine(0, 0, dirtyRect.Width, dirtyRect.Height);
        }
    }
}
  • GraphicsView: A Drawable view used with a path that is set in the XAML and which contains a reference to a custom draw object (MyDrawable).
  • IDrawable Interface:
  • CustomDrawable is a class that implements basic IDrawable interface and thus offers additional drawing capabilities.
  • Draw Method: Informs what should be drawn in the canvas.
  • FillRectangle: Draws a blue rectangle.
  • FillCircle: Draws a red circle.
  • DrawLine: It paints a green diagonal line across the view.

Comparison Between Graphics Controls

ControlPurposeCommon Use Cases
BoxViewDisplays simple rectangles or squares.Drawing simple shapes, dividers, separators.
RectangleDraws a rectangle with optional rounding.Creating backgrounds, bordered sections.
RoundRectangleAdds rounded corners to a rectangle.Cards, visually appealing bordered elements.
EllipseDraws an ellipse or circle.Circular buttons, indicators, ornamental graphics.
PolygonCreates a closed shape with multiple sides.Custom icons, graphical shapes.
LineDraws a straight line.Dividers, line indicators, custom underlines.
PolylineDraws multiple connected lines.Complex line charts, custom shapes.
PathDraws complex vector graphics.Custom graphics, logos, vector illustrations.
GraphicsViewCustom rendering using a canvas.Drawing charts, graphs, interactive custom graphics.
, ,