Docutain.ColorPicker.MAUI 2.0.0

Docutain Color Picker for .NET MAUI

An easy to use, low overhead, yet high performing .NET MAUI Color Picker for your cross-platform Android & iOS apps.

This color picker was initially implemented for our Docutain SDK customers to provide a way to alter the colors of our Document Scanner SDK.

As there are not many Color Pickers available for MAUI, we decided to make it publicly available.

The picker has no third-party dependencies — it only relies on APIs that .NET MAUI already ships with.

• On Android, a custom HSV color picker is presented in a Material bottom sheet: a row of recently picked colors, a predefined color palette (can be turned off) and a custom color area with saturation/value panel, hue slider and an optional alpha slider.
• On iOS, the native UIColorPickerViewController is used.

Both platforms support a live OnColorChanged callback for previewing the color while picking, and a Dismissable flag that forces an explicit choice via the picker's buttons.

Supported Platforms

• Android >= 7.0 (API 24)
• iOS >= 15

Getting Started

var previousColor = BackgroundColor;

//define your custom config, all values are optional
var colorConfig = new ColorPickerConfig
{
    Title = "Pick a color",
    DefaultColor = Colors.Yellow,
    PositiveButton = "OK",              //Android only, iOS uses the native picker UI
    NegativeButton = "Cancel",          //Android only
    SupportsAlpha = true,               //alpha slider (Android) / alpha controls (iOS)
    ShowDefaultColors = true,           //the built-in color palette (Android)
    Dismissable = true,                 //false = only the buttons close the picker

    //optional: live preview while the user is still picking
    OnColorChanged = color => BackgroundColor = color,

    //optional: localize the section labels (Android)
    //RecentColorsLabel = "Recent", DefaultColorsLabel = "Colors", CustomColorLabel = "Custom color",
};

//open the picker and wait for the result
var color = await ColorPicker.PickColor(colorConfig);

if (color != null)
{
    //do something with the selected color
    BackgroundColor = color;
}
else
{
    //user canceled the selection — revert the live preview
    BackgroundColor = previousColor;
}

On Android, colors confirmed with the positive button automatically appear in a "recent colors" row the next time the picker is opened (persisted across app restarts).

Android styling & theming

The bottom sheet deliberately has no styling options of its own — it follows the Material theme of your app. That means you style it the same way you style any other bottom sheet, e.g. to give it rounded top corners add this to your MAUI app's Platforms/Android/Resources/values/styles.xml:

<style name="Maui.MainTheme" parent="Maui.MainTheme.Base">
    <item name="bottomSheetDialogTheme">@style/MyBottomSheetDialogTheme</item>
</style>

<style name="MyBottomSheetDialogTheme" parent="ThemeOverlay.MaterialComponents.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/MyBottomSheetStyle</item>
</style>

<style name="MyBottomSheetStyle" parent="Widget.MaterialComponents.BottomSheet.Modal">
    <item name="shapeAppearanceOverlay">@style/MyBottomSheetShape</item>
</style>

<style name="MyBottomSheetShape" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopLeft">16dp</item>
    <item name="cornerSizeTopRight">16dp</item>
</style>

The dialog buttons, section labels, title and sheet background all resolve their colors from that theme as well, so a DayNight based theme (the MAUI default) gives you dark mode support out of the box: every time the picker is opened it renders in the current light/dark mode. If the system theme changes while the picker is open, the sheet keeps its current look until it is reopened.

License

Copyright 2024 INFOSOFT Informations- und Dokumentationssysteme GmbH

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.