I’m currently working on a side project where i need a custom view that can animate multiple images like a slot machine reel. The project is based on .NET MAUI and i couldn’t find any existing control that would fit my needs. So, i decided to build my own control. I called it SlotView.Maui and it’s available on GitHub.

SlotView.Maui

I wanted to have full control over drawing and animations, that’s why i decided to use canvas-based rendering for the control. I started with SkiaSharp since i’m very familiar with its API and it has great performance, i implemented a quick proof of concept and it worked great. I still love SkiaSharp and hope that development of the library will continue, it’s just a great piece of software. Since i was already in a .NET MAUI poroject and i’m an active follower of the dotnet/maui repository i knew that Maui.Graphics is now included in the repository and is part of the framework itself. I thought, why not give it a try for this library?

Maui.Graphics

Quick explanation - Maui.Graphics provides a cross-platform canvas API that can render 2D graphics natively on each platform. The original repository can still be found here https://github.com/dotnet/Microsoft.Maui.Graphics, but since it’s now built into MAUI you can just access the API in any MAUI project - just check out the Microsoft.Maui.Graphics namespace. The abstraction of the canvas and drawing API is similar to SkiaSharp (although Maui.Graphics is not as feature rich as SkiaSharp) so it was very easy for me to port my code to Maui.Graphics. Another benefit of Maui.Graphics is that by using it as part of the framework, there is no need to add any additional dependencies. The beauty of drawing the control manually is that you can customize every aspect of it and in case of the slot machine animation view, the customizations can of course also be applied while the animation is running.

Usage

SlotView.Maui is easy to use yet very customizable. Just add a SlotView in XAML or in code-behind:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

xmlns:sv="clr-namespace:SlotView.Maui;assembly=SlotView.Maui"
...
<sv:SlotView
    x:Name="mySlotView"
    Speed="10"
    Drag="0.1"
    StopIndex="5"
    VisibleCount="3">
    <sv:SlotView.Images>
        <x:Array Type="{x:Type x:String}">
            <!-- images can be local or remote -->
            <x:String>myimg0.png</x:String>
            <x:String>https://foo.bar/myimg1.png</x:String>
            <x:String>myimg2.png</x:String>
            <x:String>https://foo.bar/myimg2.png</x:String>
        </x:Array>
    </sv:SlotView.Images>
</sv:SlotView>

or in code behind

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var mySlotView = new SlotView
{
    Speed = 10,
    Drag = 0.1f,
    StopIndex = 5,
    VisibleCount = 3,
    Images = new string[]
    {
        "myimg0.png",
        "https://foo.bar/myimg1.png",
        "myimg2.png",
        "https://foo.bar/myimg2.png"
    }
};

There are many properties to customize the control - a list with descriptions can be found in the repository https://github.com/nor0x/SlotView#slotview-class-documentation

Showcase

I have published the full source code of SlotView.Maui on GitHub and it’s also available as a NuGet package. The control is still in an early stage and i’m planning to add more features in the future. I currently only had the chance to test it on Windows and Android, but as soon as i’m back at a Mac, i will also test it on iOS and macOS, i’m pretty sure that it will work there as well, since there is very little platform specific code SlotView.Maui right now. Part of the repository is also a demo project that contains multiple scenarios of how to use the control.

If you have any suggestions or feedback, feel free to open an issue on GitHub. I want to add functionality for a more granular control over the rendering in the future, so that it’s possible to provide an easing function for the animation. I also want to better support different sized images or non-square images. But for now, i’m happy with the result and can include it in my project - maybe it’s also useful for someone else in the .NET MAUI community.

Have fun spinning! 🎰