Color Picker in eine .NET-MAUI-App integrieren

Das kostenlose Paket Docutain.ColorPicker.MAUI bietet eine gemeinsame asynchrone API für die Farbauswahl unter Android und iOS. Version 2.0.0 ergänzt Live-Vorschauen, einen neu entwickelten Android-Picker, Lokalisierung sowie Unterstützung für Trimming und Native AOT.

Aktuelle Version

2.0.0

Zielframework

.NET 10

Plattformen

Android 24+ und iOS 15+

Lizenz

Apache 2.0

Docutain.ColorPicker.MAUI 2.0.0 installieren

Fügen Sie das Paket dem gemeinsamen MAUI-Projekt hinzu. Version 2.0.0 zielt auf .NET 10 und ist die aktuell stabile Veröffentlichung auf NuGet.

dotnet add package Docutain.ColorPicker.MAUI --version 2.0.0

Alternativ lässt sich die Paketreferenz direkt in die Projektdatei eintragen:

<PackageReference Include="Docutain.ColorPicker.MAUI" Version="2.0.0" />

Color Picker öffnen und Ergebnis verarbeiten

Alle Konfigurationswerte sind optional. PickColor öffnet die plattformspezifische Farbauswahl und wird abgeschlossen, sobald der Nutzer eine Farbe bestätigt oder den Dialog abbricht. Über den Callback kann die Oberfläche Änderungen bereits während der Auswahl als Vorschau anzeigen.

var previousColor = BackgroundColor;

// Define your custom config; all values are optional.
var colorConfig = new ColorPickerConfig
{
    Title = "Pick a color",
    DefaultColor = Colors.Yellow,
    PositiveButton = "OK",
    NegativeButton = "Cancel",
    SupportsAlpha = true,
    ShowDefaultColors = true,
    Dismissable = true,
    OnColorChanged = color => BackgroundColor = color,
    RecentColorsLabel = "Recent",
    DefaultColorsLabel = "Colors",
    CustomColorLabel = "Custom color"
};

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

if (color != null)
{
    BackgroundColor = color;
}
else
{
    // Restore the previous color after canceling a live preview.
    BackgroundColor = previousColor;
}

Konfigurationsmöglichkeiten

Natives Verhalten unter Android und iOS

Unter iOS 15 und neuer öffnet das Paket den nativen UIColorPickerViewController. Unter Android 7/API 24 und neuer nutzt Version 2.0.0 ein Material-Bottom-Sheet mit HSV-Fläche für Sättigung und Helligkeit, Farbtonregler, optionalem Alpha-Regler, integrierter Palette und zuletzt ausgewählten Farben.

Bestätigte Android-Farben werden lokal gespeichert und beim nächsten Öffnen als zuletzt verwendete Farben angeboten. Das Bottom-Sheet folgt dem Material-Theme der App einschließlich Dark Mode; Buttontexte und die drei Abschnittslabels sind konfigurierbar.

Das Paket ist für Android und iOS vorgesehen. Ein MAUI-Projekt kann zusätzlich Windows oder macOS adressieren, der Color Picker wird für diese Plattformen jedoch nicht angeboten.

Was ändert Version 2.0.0?

Der Android-Picker wurde neu entwickelt und sämtliche Drittanbieterabhängigkeiten wurden entfernt. Das Paket zielt jetzt auf .NET 10, enthält XML-Dokumentation und ist für Trimming sowie Native AOT ausgelegt. Projekte, die von 1.x aktualisieren, sollten daher vor dem Paketwechsel ihr Zielframework und die unterstützten Plattformversionen prüfen.

Checkliste für den produktiven Einsatz

• .NET 10 verwenden und Android API 24 sowie iOS 15 als Mindestversionen prüfen.
• Das nullable Ergebnis behandeln, da Nutzer die Auswahl abbrechen können.
• Bei einer abgebrochenen Auswahl den vorherigen Wert wiederherstellen, falls OnColorChanged die Oberfläche bereits verändert hat.
• Alpha nur aktivieren, wenn die verwendende Oberfläche Transparenz unterstützt.
• Titel, Buttons und Android-Abschnittslabels über die App-Ressourcen lokalisieren.
• Auf echten Android- und iOS-Geräten sowie mit Dark Mode, Trimming und der verwendeten Native-AOT-Releasekonfiguration testen.

Warum Docutain dieses Paket bereitstellt

Die Komponente entstand, damit Nutzer des Docutain Document Scanner SDK die Scannerfarben an das Branding ihrer App anpassen können. Sie ist unabhängig davon kostenlos verfügbar und kann daher auch an anderen Stellen einer MAUI-Anwendung eingesetzt werden.