How to Create a .NET MAUI Color Picker

Can't wait to see the fun part?

Jump to code

What is .NET MAUI

.NET MAUI (Multi-platform App UI) is a cross-platform framework developed by Microsoft that allows developers to build native applications for multiple platforms using a single shared codebase. It is part of the .NET ecosystem and provides a modern way to develop apps for Windows, macOS, iOS, and Android.

Evolution from Xamarin.Forms

.NET MAUI is considered the evolution of Xamarin.Forms, a previous cross-platform framework from Microsoft. It builds upon Xamarin.Forms' foundation but introduces improvements like:

• A more unified development experience.
• Better performance and maintainability.
• Easier platform integration.

Key Features of .NET MAUI

• Single Project Structure

  MAUI uses a unified project structure to manage platform-specific resources and code in one place, simplifying development.

• Cross-Platform UI

  Developers can write UI code once and deploy it across platforms, with the ability to customize UI for specific platforms as needed.

• XAML for UI Design

  Like Xamarin.Forms, MAUI supports XAML (Extensible Application Markup Language) for designing user interfaces, offering data binding and MVVM (Model-View-ViewModel) architecture support.

• Hot Reload

  Developers can modify UI and code while the application is running and see changes immediately without restarting the app.

What is a Color Picker?

A Color Picker is a tool that allows users to select colors from a spectrum or palette. Common use cases in apps include for example providing your users the ability to select a custom color scheme for your app or having image annotation tools.

Key Features of a Color Picker

• Color Palette

  Displays a range of colors in a grid, wheel, or gradient format for selection.

• Color Preview

  Displays a live preview of the selected or modified color.

• Opacity/Alpha Adjustment

  To choose transparency levels of the selected color.

• Eyedropper Tool

  Enables selecting a color directly from the screen by sampling it.

• Color History

  Tracks recently used or selected colors for quick access.

Code the Color Picker

Once we published our Document Scanner SDK for .NET MAUI, it didn't take long before our customers asked us how they can provide their users a possibility to alter the colors of the Document Scanner. Unfortunately, MAUI does not provide any built in Color Picker control. One of the major benefits of our Scanner SDK is the ease of use, so we wanted to provide our users an easy to use Color Picker as well.

The Color Picker is available as Nuget Package.

Check out our Docutain SDK
Learn more about the Docutain SDK. It includes Document Scanner SDK, Data Capture SDK and a Barcode Scanner SDK.
All SDKs are available for all major platforms/frameworks.

If you want to test the Document Scanner SDK without writing any lines of code, check out our Showcase App.

The following will cover the basic principles of the code.

Cross-platform interface

We want a simple method that opens the color picker, which returns the color the user has selected.

public static async Task PickColor(ColorPickerConfig colorPickerConfig)

The color picker can have some behaviours configured, so we need to provide a configuration class.

public class ColorPickerConfig
{
    public bool SupportsAlpha { get; set; } = false;

    public string Title { get; set; } = "Pick Color";

    public Color DefaultColor {get;set;} = null;

    public string NegativeButton { get; set; } = "Cancel";

    public string PositiveButton { get; set; } = "OK";
}

iOS Color Picker implementation

Since iOS 14, iOS provides a built in Color Picker that we can leverage. There are multiple benefits of this. The amount of code we need to implement is reduced to a minimum. As the picker is provided by iOS itself, we do not need to worry about compatibility and it has a native look and feel. Also, this picker is used across a variety on iOS system apps, so the user is familiar with this picker.

public static async Task PickColor(ColorPickerConfig colorPickerConfig)
{
    if (!UIDevice.CurrentDevice.CheckSystemVersion(14, 0)) //Colorpicker is supported from iOS 14+
        return null;

    var tcs = new TaskCompletionSource();
    var colorPicker = new DocutainUIColorPickerViewController(tcs, colorPickerConfig);
    var vc = Platform.GetCurrentUIViewController();
    if (colorPicker.PopoverPresentationController != null)
    {
        //iPad show popover in center of screen
        var sourceView = vc.View;
        colorPicker.PopoverPresentationController.SourceView = sourceView;
        colorPicker.PopoverPresentationController.SourceRect = 
            new CoreGraphics.CGRect(sourceView.Bounds.Size.Width / 2, sourceView.Bounds.Size.Height / 2, 1, 1);
        colorPicker.PopoverPresentationController.PermittedArrowDirections = 0;
    }
    await vc.PresentViewControllerAsync(colorPicker, true);
    return await tcs.Task;
}

Android Color Picker implementation

Unfortunately, Android does not provide any built-in Color Picker controls. To reduce the manual coding effort on Android to a minimum as well, we leverage this Android Color Picker.

public static async Task PickColor(ColorPickerConfig colorPickerConfig)
{
    tcs = new TaskCompletionSource();
    var listener = new ColorPickerListener(tcs);
    var dialog = new ColorPickerDialog
        .Builder(Platform.CurrentActivity)
        .SetTitle(colorPickerConfig.Title)
        .SetColorListener(listener)
        .SetPositiveButton(colorPickerConfig.PositiveButton)
        .SetNegativeButton(colorPickerConfig.NegativeButton)
        .SetDismissListener(listener);
    if (colorPickerConfig.DefaultColor != null)
        dialog.SetDefaultColor(colorPickerConfig.DefaultColor.ToHex());
    dialog.Show();
    return await tcs.Task;
}

Get started with the MAUI Color Picker

Integrate a MAUI Color Picker into your cross-platform Android & iOS apps in no time by using our Docutain Color Picker Nuget Package free of charge.

Check out our Docutain SDK
Learn more about the Docutain SDK. It includes Document Scanner SDK ,Data Capture SDK and a Barcode Scanner SDK.
All SDKs are available for all major platforms/frameworks.

If you want to test the Document Scanner SDK without writing any lines of code, check out our Showcase App.