Chapter 13 Lets Get Graphical
Further Reading
You have only scratched the surface of what is possible with the .NET MAUI Graphics layer. I strongly recommend that you refer to the Microsoft documentation at https://learn.microsoft.com/dotnet/maui/userinterface/graphics/ where it shows much more complex scenarios such as painting patterns, gradients, images, rendering text, and much more.
Building a Sketch Widget
My daughters love to doodle and leave me little notes when I am away from my desk, so I thought why not give them the ability to draw digital sketches and help save some trees. Let’s create a new widget and then piece together this new drawing mechanic
Creating theSketchWidgetViewModel
As with all of the widgets, you want to create a view model to accompany the view. Let’s add a new class file into the ViewModels folder and call it SketchWidgetViewModel.cs. Modify it with the following contents:
namespace WidgetBoard.ViewModels;
public class SketchWidgetViewModel : IWidgetViewModel
{
public const string DisplayName = "Sketch";
public int Position { get; set; }
public string Type => DisplayName;
public Task InitializeAsync() => Task.CompletedTask;
}
397
Chapter 13 Lets Get Graphical
The view model is relatively simple as it only really needs to implement the basics of the IWidgetViewModel interface. If you decided to add more functionality into your widget, you have the infrastructure in place to do so.
Let’s now deal with the view and user interaction.
Representing a User Interaction
When a user interacts with the new widget, they will be drawing on the screen. You will need to record this interaction so that it can be rendered inside the Draw method that the SketchWidgetView implements through the IDrawable interface. Add a new a new class file, call it DrawingPath.cs in the root of the project, and modify it to have the following contents:
public class DrawingPath
{
public DrawingPath(Color color, float thickness)
{
Color = color; Thickness = thickness; Path = new PathF();
}
public Color Color { get; } public PathF Path { get; } public float Thickness { get; }
public void Add(PointF point) => Path.LineTo(point);
}
The class has three main properties:
•\ Color represents the color of the line being drawn.
•\ Thickness represents how thick the line is.
•\ Path contains the points that make up the line.
398
Chapter 13 Lets Get Graphical
You also have a single method that adds a new point into the Path property. This ties in well with the .NET MAUI Graphics layer as you receive the point when the user interacts with the surface and then you can also use the same type to render the line on the screen.
Let’s create the widget view that will make use of this class.
Creating theSketchWidgetView
As with each of the widget views, you will be creating a XAML-based view. It will be inside the view where most of the logic resides because this widget is largely view-related.
Add a new .NET MAUI ContentView (XAML) to your Views folder and call it SketchWidgetView.
Modifying theSketchWidgetView.xaml
The contents of the SketchWidgetView.xaml file should be modified to the following. Remember that you want to keep your visual tree as simple as possible. You only need to declare the GraphicsView itself and no other container controls.
<?xml version="1.0" encoding="utf-8" ?> <GraphicsView
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="WidgetBoard.Views.SketchWidgetView" StartInteraction="GraphicsView_StartInteraction" DragInteraction="GraphicsView_DragInteraction" EndInteraction="GraphicsView_EndInteraction" />
The GraphicsView provides several events that you can subscribe to in order to handle the user’s interaction with the surface. You are only interested in the following:
399
Chapter 13 Lets Get Graphical
•\ StartInteraction: This is when the user first interacts, so basically when the first touch/mouse click happens.
•\ DragInteraction: This follows from the start and involves the touch/mouse moving around on the surface.
•\ EndInteraction: This is when the user lifts their finger from the screen or mouse button.
When you add these events in the XAML file, it will automatically create some C# code in the SketchWidgetView.xaml.cs file that you will expand on shortly.
Modifying theSketchWidgetView.xaml.cs
Visual Studio will have created this file for you already so you need to open it and modify it to the following:
Note that the types in the event handlers have been shortened (e.g., from System.Object to object). This is mainly to make it clearer to read.
Using Microsoft.Maui.Controls; using WidgetBoard.ViewModels;
namespace WidgetBoard.Views;
public partial class SketchWidgetView : GraphicsView, IWidgetView, IDrawable
{
public SketchWidgetView()
{
InitializeComponent();
400
Chapter 13 Lets Get Graphical
this.Drawable = this;
}
public IWidgetViewModel WidgetViewModel
{
get => BindingContext as IWidgetViewModel; set => BindingContext = value;
}
private void GraphicsView_StartInteraction(object sender, TouchEventArgs e)
{
}
private void GraphicsView_DragInteraction(object sender, TouchEventArgs e)
{
}
private void GraphicsView_EndInteraction(Object sender, TouchEventArgs e)
{
}
public void Draw(Icanvas canvas, RectF dirtyRect)
{
throw new NotImplementedException();
}
}
Each of the event handles and the Draw method have the blank or default implementation. Let’s build this file up slowly and discuss the key parts as you do so.
401
Chapter 13 Lets Get Graphical
First, you need to add the backing fields to store the interactions from the user.
private DrawingPath currentPath;
private readonly IList<DrawingPath> paths = new List<DrawingPath>();
The first event handler to modify is for the StartInteraction event.
private void GraphicsView_StartInteraction(object sender, TouchEventArgs e)
{
currentPath = new DrawingPath(Colors.Black, 2); currentPath.Add(e.Touches.First()); paths.Add(currentPath);
Invalidate();
}
In this method, you first create a new instance of the DrawingPath class, assigning a color and thickness. They can, of course, be expanded to allow selections from the user so they can have custom colors. Next, you add the first touch into the current path so you have your first point of interaction. Then you add the current path to the list of all paths so that they can eventually be rendered on screen. Finally, you call Invalidate, which will trigger the Draw method to be called and the paths can be drawn.
The next event handler to modify is for the DragInteraction event.
private void GraphicsView_DragInteraction(object sender, TouchEventArgs e)
{
currentPath.Add(e.Touches.First());
Invalidate();
}
402
Chapter 13 Lets Get Graphical
In this method, you add the current touch to the current path and again call Invalidate to cause the Draw method to be called.
The final event handler to modify is for the EndInteraction event.
private void GraphicsView_EndInteraction(object sender, TouchEventArgs e)
{
currentPath.Add(e.Touches.First());
Invalidate();
}
This has the exact same implementation as the DragInteraction event handler.
The final set of changes to make is inside the Draw method so you can actually see something on the screen.
public void Draw(ICanvas canvas, RectF dirtyRect)
{
foreach (var path in paths)
{
canvas.StrokeColor = path.Color; canvas.StrokeSize = path.Thickness; canvas.StrokeLineCap = LineCap.Round; canvas.DrawPath(path.Path);
}
}
This method loops through all of the paths that you have created from the user interactions, setting the stroke color, size, and then drawing the path that was built up by the three event handlers that you just implemented.
403