.NET MAUI

Topics in this category

Advanced & Enterprise Advanced Data Binding & Collections App Lifecycle & Windows Best Practices & Architecture Concurrency & Threading Controls & Views Data Binding & MVVM Dependency Injection & Services Desktop - WinUI & Mac Catalyst Device Features & Essentials Fonts, Icons & Media Forms, Input & Validation Fundamentals & Architecture Gestures & Animations Graphics & Drawing Local Storage & Data Maps & Location Migration from Xamarin.Forms Native Interop & Libraries Networking & APIs

.NET MAUI

Graphics & Drawing

Q: What is GraphicsView and when do you use it?

GraphicsView is a canvas for 2D drawing via an IDrawable. You implement Draw(ICanvas canvas, RectF dirtyRect) to render shapes, paths, text, and images with platform-consistent output. Use it for charts, signatures, gauges, or any custom visuals not expressible with standard controls.

Q: How do you trigger a redraw of a GraphicsView?

Call Invalidate() on the GraphicsView to request that Draw runs again. Do this whenever the data your drawable depends on changes. For animation, invalidate on a timer or from an animation callback, keeping the Draw method fast to sustain frame rate.

Q: How do you draw text and images on an ICanvas?

Use canvas.DrawString with a rectangle plus horizontal/vertical alignment for text, setting FontColor, FontSize, and Font first. Use canvas.DrawImage with an IImage (loaded via PlatformImage.FromStream) for bitmaps. State properties (colors, stroke) apply until changed, so save/restore state as needed.

Q: What are Shapes in MAUI and how do they differ from GraphicsView drawing?

Shapes (Rectangle, Ellipse, Line, Path, Polygon, Polyline) are declarative XAML elements in the visual tree with Fill, Stroke, and geometry properties, so they participate in layout and can be styled/animated individually. GraphicsView is imperative immediate-mode drawing—faster for many primitives but not part of the visual tree.

Q: How do you handle touch/gesture input on a GraphicsView for interactive drawing?

Attach gesture recognizers (PanGestureRecognizer, TapGestureRecognizer) or handle pointer events, translate the touch points into your drawable's coordinate space, update model state, and call Invalidate. For freehand drawing, accumulate points on pan and render them as a path.

Q: When would you integrate SkiaSharp instead of the built-in Microsoft.Maui.Graphics?

Microsoft.Maui.Graphics covers most 2D needs with a light API. SkiaSharp (SKCanvasView) offers a richer, high-performance engine: shaders, complex path effects, image filters, and better control for games or advanced visualizations. Use Skia when you need those capabilities or are porting existing Skia code, accepting the extra dependency.

6 question(s)

What is GraphicsView and when do you use it?

Beginner

GraphicsView is a canvas for 2D drawing via an IDrawable. You implement Draw(ICanvas canvas, RectF dirtyRect) to render shapes, paths, text, and images with platform-consistent output. Use it for charts, signatures, gauges, or any custom visuals not expressible with standard controls.

public class RingDrawable : IDrawable
{
    public void Draw(ICanvas canvas, RectF rect)
    {
        canvas.StrokeColor = Colors.Purple;
        canvas.StrokeSize = 8;
        canvas.DrawCircle(rect.Center, 40);
    }
}

Real-world example A fitness app draws an activity ring with GraphicsView instead of shipping dozens of pre-rendered images.

Common follow-ups: What is IDrawable? | How do you trigger a redraw?

Graphics & Drawing Custom Controls GraphicsView

How do you trigger a redraw of a GraphicsView?

Intermediate

Call Invalidate() on the GraphicsView to request that Draw runs again. Do this whenever the data your drawable depends on changes. For animation, invalidate on a timer or from an animation callback, keeping the Draw method fast to sustain frame rate.

graphicsView.Drawable = _drawable;
_drawable.Progress = 0.75f;
graphicsView.Invalidate();   // schedules a repaint

Real-world example A progress gauge repaints smoothly by updating its value and calling Invalidate as a download advances.

Common follow-ups: Why keep Draw fast? | How do you animate a GraphicsView?

GraphicsView Performance & Optimization Graphics & Drawing

How do you draw text and images on an ICanvas?

Intermediate

Use canvas.DrawString with a rectangle plus horizontal/vertical alignment for text, setting FontColor, FontSize, and Font first. Use canvas.DrawImage with an IImage (loaded via PlatformImage.FromStream) for bitmaps. State properties (colors, stroke) apply until changed, so save/restore state as needed.

canvas.FontColor = Colors.Black;
canvas.FontSize = 16;
canvas.DrawString("Score", rect, HorizontalAlignment.Center,
                  VerticalAlignment.Center);

Real-world example A custom badge control renders a number centered over a drawn circle entirely on the canvas.

Common follow-ups: How do you load an IImage? | What is canvas state?

GraphicsView Graphics & Drawing Custom Controls

What are Shapes in MAUI and how do they differ from GraphicsView drawing?

Intermediate

Shapes (Rectangle, Ellipse, Line, Path, Polygon, Polyline) are declarative XAML elements in the visual tree with Fill, Stroke, and geometry properties, so they participate in layout and can be styled/animated individually. GraphicsView is imperative immediate-mode drawing—faster for many primitives but not part of the visual tree.

<Path Stroke="Black" Fill="LightBlue"
      Data="M0,0 L100,0 100,100 Z" />
<Ellipse WidthRequest="60" HeightRequest="60" Fill="Coral" />

Real-world example A simple decorative divider uses a Path shape in XAML, while a data-dense chart uses GraphicsView for performance.

Common follow-ups: When are Shapes better than GraphicsView? | Can Shapes be animated?

Shapes Graphics & Drawing XAML & UI Layouts

How do you handle touch/gesture input on a GraphicsView for interactive drawing?

Advanced

Attach gesture recognizers (PanGestureRecognizer, TapGestureRecognizer) or handle pointer events, translate the touch points into your drawable's coordinate space, update model state, and call Invalidate. For freehand drawing, accumulate points on pan and render them as a path.

var pan = new PanGestureRecognizer();
pan.PanUpdated += (s, e) =>
{
    _points.Add(new PointF((float)e.TotalX, (float)e.TotalY));
    graphicsView.Invalidate();
};
graphicsView.GestureRecognizers.Add(pan);

Real-world example A signature-capture control records pan points and repaints the stroke live as the user signs.

Common follow-ups: How do you map touch to canvas coordinates? | Which recognizer suits freehand?

GraphicsView Gestures Graphics & Drawing

When would you integrate SkiaSharp instead of the built-in Microsoft.Maui.Graphics?

Advanced

Microsoft.Maui.Graphics covers most 2D needs with a light API. SkiaSharp (SKCanvasView) offers a richer, high-performance engine: shaders, complex path effects, image filters, and better control for games or advanced visualizations. Use Skia when you need those capabilities or are porting existing Skia code, accepting the extra dependency.

// SkiaSharp
skiaView.PaintSurface += (s, e) =>
{
    var canvas = e.Surface.Canvas;
    canvas.Clear(SKColors.White);
    canvas.DrawCircle(100, 100, 40, new SKPaint { Color = SKColors.Purple });
};

Real-world example A data-visualization feature needing gradient shaders and blend modes adopts SkiaSharp while the rest of the app stays on Maui.Graphics.

Common follow-ups: What does Skia add over Maui.Graphics? | What's the trade-off?

Graphics & Drawing SkiaSharp Performance & Optimization