E003
Build Custom MAUI Controls with SkiaSharp
Build a reusable seven-segment display with .NET MAUI and SkiaSharp, using scalable graphics, responsive layouts, bindable properties, and unit tests.
PRESS PLAY. FIND AN IDEA.
Listen to the episode
Show Notes
What if your next .NET MAUI application needs a control that doesn’t exist yet?
In this episode of the TSJDEV Apps Podcast, Thomas Sebastian Jensen explores custom UI development with .NET MAUI and SkiaSharp.
Using a classic seven-segment digital display as a practical example, we discover how to draw custom graphics, support responsive layouts, implement bindable properties, and create reusable UI components.
In this episode
- Why custom controls can be useful.
- Drawing scalable graphics with SkiaSharp.
- Creating a seven-segment digital display.
- Supporting bindable properties, visual effects, and unit tests.
The complete project is available as open source.
Coming next
Turning reusable MAUI controls into a NuGet package.
TSJDEV Apps Podcast - Short Episodes. Big Developer Ideas.
Full Transcript
Have you ever needed a custom user interface element that simply wasn’t available in your framework?
Welcome to the TSJDEV Apps Podcast! Short Episodes. Big Developer Ideas.
I’m Thomas Sebastian Jensen, and today we’re getting creative with .NET MAUI and SkiaSharp.
Imagine building a digital clock with that classic seven-segment display you might remember from calculators or alarm clocks.
Seven individual segments. Different combinations. And suddenly, numbers appear!
Of course, we could use a special font or combine multiple visual elements.
But what if we wanted complete control over the appearance?
That’s where SkiaSharp becomes interesting.
SkiaSharp is a cross-platform graphics library that lets us draw shapes directly onto a canvas.
In my SevenSegmentDisplay project, each digit is created from individual geometric shapes.
The control knows which segments must be active for each character.
We can customize colors, segment thickness, spacing, and even glowing effects.
And because everything is drawn onto a scalable canvas, the display can adapt to different screen sizes.
But there’s something even more important.
By using bindable properties, we can integrate the control naturally into a .NET MAUI application and connect it to our ViewModels.
The example also includes unit tests for the character mapping and configuration logic.
So this isn’t just a visual experiment. It’s an example of building a reusable, testable UI component.
The takeaway?
Sometimes the best control for your application is the one you build yourself.
But once you’ve created a useful control, why keep it in just one project?
Next time, we’ll explore how to share custom .NET MAUI controls through NuGet.
Find the complete implementation on GitHub.
Stay curious, keep experimenting, and keep building!