FAQs

What is .NET MAUI Graphics Controls?

Is a .NET MAUI experimental library that offers drawn controls allowing to choose between Cupertino, Fluent and Material.

Wait, drawn controls, does this mean that .NET MAUI will stop using native controls?

No, these drawn controls would not replace the native controls. It will be an added option to .NET MAUI, so at any time you can choose whether to use a native control or a drawn control.

What controls will include this library support?

Currently there are the following controls:

• Button (Cupertino, Fluent, Material)
• CheckBox (Cupertino, Fluent, Material)
• DatePicker (Cupertino, Fluent, Material)
• Editor (Cupertino, Fluent, Material)
• Entry (Cupertino, Fluent, Material)
• ProgressBar (Cupertino, Fluent, Material)
• RadioButton (Cupertino, Fluent, Material)
• Slider (Cupertino, Fluent, Material)
• Stepper (Cupertino, Fluent, Material)
• Switch (Cupertino, Fluent, Material)
• TimePicker (Cupertino, Fluent, Material)

It will also include:

• ActivityIndicator (Cupertino, Fluent, Material)
• Label
• Image

When will it be available?

At the moment this library is experimental. Because of this we are distributing it as a NuGet package on a separate feed (aka nightly).

If you want to try it out, add the nightly feed to your NuGet sources or add a NuGet.config file like below and install the Microsoft.Maui.Graphics.Controls package.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <packageSources>
    <clear />
    <add key="maui-graphics-controls-nightly" value="https://aka.ms/maui-graphics-controls-nightly/index.json" />
    <add key="NuGet.org" value="https://api.nuget.org/v3/index.json" />
  </packageSources>
</configuration>

How can I use the library in my .NET MAUI application?

After adding the Microsoft.Maui.Graphics.Controls package, modify the MauiProgram class to register the drawn control handlers:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var appBuilder = MauiApp.CreateBuilder();

        appBuilder
            .UseMauiApp<App>()
            .ConfigureGraphicsControls());

        return appBuilder.Build();
    }
}

How can I switch between using Cupertino, Material and Fluent design?

You can pass parameters to the ConfigureGraphicsControls method to indicate what you want to use. For example:

ConfigureGraphicsControls(DrawableType.Cupertino)

In this way we use Cupertino design in all the drawn controls.

NOTE: By default, Material design is used in all drawn controls.

How can I customize an existing drawn control?

The easiest way to extend an existing drawn control is to simply override its Draw method to draw any extra content.

public class CustomSliderHandler : SliderHandler
{
     protected override ISliderDrawable CreateDrawable() => new MaterialSliderDrawable();

     public override void Draw(ICanvas canvas, RectangleF dirtyRect)
     {
          base.Draw(canvas, dirtyRect);
          // Your own content
     }
}

All drawn controls are created by layers. It is possible to access each layer, in addition to customizing a specific layer.

As in .NET MAUI, drawn controls use Handlers and a DrawMapper with information about each layer.

DrawMapper[nameof(ISliderDrawable.DrawThumb)] = (canvas, rect, drawable, slider) =>
{
    
}

All drawn control Handlers support a Drawable. A Drawable defines the set of elements to draw on the screen by the control. We can quickly switch between Cupertino, Fluent and Material where what we are really doing is, change the Drawable to use.

We can set a custom Drawable in case we want to change how each part of a specific control is drawn.

public class CustomSliderHandler : SliderHandler
{
     protected override ISliderDrawable CreateDrawable() => new CustomDrawable();
}

public class CustomDrawable : ViewDrawable<ISlider>, ISliderDrawable
{
     public void DrawBackground(ICanvas canvas, RectangleF dirtyRect, ISlider slider) { }
     public void DrawText(ICanvas canvas, RectangleF dirtyRect, ISlider slider) { }
     public void DrawThumb(ICanvas canvas, RectangleF dirtyRect, ISlider slider) { }
     public void DrawTrackProgress(ICanvas canvas, RectangleF dirtyRect, ISlider slider) { }
}

NOTE: This library is work in progress. The way to extend or create new controls could change.

Will .NET MAUI Graphics Controls be part of .NET MAUI?

It could be, although at the moment it is an experimental library. The current objective is to obtain feedback about the interest and value that the library provides in order to decide whether this option is included or discarded in upcoming .NET versions.