Farbauswahl

  • Artikel

Mithilfe eines Farbwählers können Benutzer Farben suchen und auswählen. Standardmäßig können Benutzer durch Farben in einem Farbspektrum navigieren oder eine Farbe in den Textfeldern Rot-Grün-Blau (RGB), Hue-Saturation-Value (HSV) oder Hexadezimal festlegen.

Ein Standard-Farbwähler

Ist dies das richtige Steuerelement?

Mithilfe eines Farbwählers können Benutzer in Ihrer App Farben auswählen. Beispielsweise können sie so Farbeinstellungen wie Schriftfarben, Hintergrundfarben oder App-Farbdesigns ändern.

Falls Ihre App zum Zeichnen oder für andere stiftbasierte Aufgaben gedacht ist, sollten Sie neben dem Farbwähler auch die Implementierung von Steuerelementen für Freihandeingaben in Betracht ziehen.

Empfehlungen

  • Überlegen Sie, welche Art von Farbauswahl für Ihre App geeignet ist. Einige Szenarien erfordern keine präzise Farbauswahl; dann ist ein vereinfachter Wähler die bessere Entscheidung.
  • Für maximale Genauigkeit bei der Farbauswahl sollten Sie das quadratische Spektrum verwenden, mit einer Mindestgröße von 256 × 256 Pixel. Alternativ können Sie die Texteingabefelder implementieren, damit der Benutzer seine Wunschfarbe präzise anpassen kann.
  • Wenn Sie den Farbwähler in einem Flyout hosten, sollte die Farbauswahl nicht bereits durch ein simples Tippen in das Spektrum oder eine einfache Justierung des Schiebereglers übernommen werden. Regeln Sie die Übernahme der Auswahl wie folgt:
    • Implementieren Sie Schaltflächen zum Übernehmen und Abbrechen, über die der Benutzer seine Auswahl anwenden oder verwerfen kann. Durch Klicken oder Tippen auf die Zurück-Schaltfläche bzw. auf eine Stelle außerhalb des Flyouts wird das Flyout geschlossen, ohne dass die Auswahl des Benutzers gespeichert wird.
    • Alternativ kann die Auswahl übernommen werden, sobald der Benutzer das Flyout per Tippen oder Klicken auf eine Stelle außerhalb des Flyouts oder auf die Zurück-Schaltfläche schließt.

UWP und WinUI 2

Wichtig

Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.

Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.

Das ColorPicker-Steuerelement für UWP-Apps ist Als Teil der Windows UI Library 2 enthalten. Weitere Informationen, einschließlich Installationsanweisungen, finden Sie unter Windows UI Library (Windows-UI-Bibliothek). APIs für dieses Steuerelement sind sowohl im Namespace Windows.UI.Xaml.Controls als auch im Namespace Microsoft.UI.Xaml.Controls vorhanden.

Es wird empfohlen, die neueste WinUI 2-Version zu verwenden, um die aktuellsten Formatvorlagen, Vorlagen und Features für alle Steuerelemente abzurufen. WinUI 2.2 oder höher enthält eine neue Vorlage für dieses Steuerelement, die abgerundete Ecken verwendet. Weitere Informationen finden Sie unter Eckradius.

Zur Verwendung des Codes in diesem Artikel mit WinUI 2 stellen Sie die in Ihrem Projekt enthaltenen Windows-UI-Bibliothek-APIs mithilfe eines Alias in XAML dar (wir verwenden muxc). Weitere Informationen finden Sie unter Erste Schritte mit WinUI 2.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:ColorPicker />

Erstellen eines Farbwählers

Öffnen Sie die WinUI 3-Katalog-App, und sehen Sie sich den ColorPicker in Aktion an.

Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab.

In diesem Beispiel zeigen wir Ihnen, wie Sie einen Standardfarbwähler in XAML erstellen können.

<ColorPicker x:Name="myColorPicker"/>

Der Farbwähler zeigt standardmäßig eine Vorschau der ausgewählten Farbe in dem rechteckigen Balken neben dem Farbspektrum an. Um auf die ausgewählte Farbe zuzugreifen und sie in Ihrer App zu verwenden, können Sie entweder das Ereignis ColorChanged oder die Eigenschaft Color verwenden. Detaillierten Code finden Sie in den nachfolgenden Beispielen.

Binden an die ausgewählte Farbe

Soll die Farbauswahl sofort wirksam werden, können Sie sie entweder per Datenbindung an die Color-Eigenschaft binden oder über das ColorChanged-Ereignis in Ihrem Code auf die ausgewählte Farbe zugreifen.

In diesem Beispiel binden Sie die Color-Eigenschaft einer als Füllung für ein Rechteck verwendeten SolidColorBrush-Klasse direkt an die im Farbwähler ausgewählte Farbe. Jede Änderung am Farbwähler zieht eine Liveänderung an der gebundenen Eigenschaft nach sich.

<ColorPicker x:Name="myColorPicker"
             ColorSpectrumShape="Ring"
             IsColorPreviewVisible="False"
             IsColorChannelTextInputVisible="False"
             IsHexInputVisible="False"/>

<Rectangle Height="50" Width="50">
    <Rectangle.Fill>
        <SolidColorBrush Color="{x:Bind myColorPicker.Color, Mode=OneWay}"/>
    </Rectangle.Fill>
</Rectangle>

In diesem Beispiel wird ein vereinfachter Farbwähler verwendet, der nur aus einem kreisförmigen Spektrum und einem Schieberegler besteht. Dies ist eine gängige unkomplizierte Ausführung eines Farbwählers. Lässt sich die Farbänderung in Echtzeit an dem jeweils betroffenen Objekt nachvollziehen, muss keine Farbvorschauleiste angezeigt werden. Weitere Informationen finden Sie im Abschnitt Anpassen des Farbwählers.

Speichern der ausgewählten Farbe

In einigen Fällen soll die Farbänderung nicht direkt angewendet werden. Wenn Sie beispielsweise eine Farbauswahl in einem Flyout hosten, wird empfohlen, die ausgewählte Farbe erst anzuwenden, nachdem der Benutzer die Auswahl bestätigt oder das Flyout schließt. Der ausgewählte Farbwert lässt sich auch zur späteren Verwendung speichern.

In diesem Beispiel wird ein Farbwähler in einem Flyout mit „Bestätigen“-Schaltfläche und „Abbrechen“-Schaltfläche gehostet. Sobald der Benutzer seine Farbauswahl bestätigt, wird die ausgewählte Farbe gespeichert und kann später in der App verwendet werden.

<Page.Resources>
    <Flyout x:Key="myColorPickerFlyout">
        <RelativePanel>
            <ColorPicker x:Name="myColorPicker"
                         IsColorChannelTextInputVisible="False"
                         IsHexInputVisible="False"/>

            <Grid RelativePanel.Below="myColorPicker"
                  RelativePanel.AlignLeftWithPanel="True"
                  RelativePanel.AlignRightWithPanel="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Button Content="OK" Click="confirmColor_Click"
                        Margin="0,12,2,0" HorizontalAlignment="Stretch"/>
                <Button Content="Cancel" Click="cancelColor_Click"
                        Margin="2,12,0,0" HorizontalAlignment="Stretch"
                        Grid.Column="1"/>
            </Grid>
        </RelativePanel>
    </Flyout>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button x:Name="colorPickerButton"
            Content="Pick a color"
            Flyout="{StaticResource myColorPickerFlyout}"/>
</Grid>

private Color myColor;

private void confirmColor_Click(object sender, RoutedEventArgs e)
{
    // Assign the selected color to a variable to use outside the popup.
    myColor = myColorPicker.Color;

    // Close the Flyout.
    colorPickerButton.Flyout.Hide();
}

private void cancelColor_Click(object sender, RoutedEventArgs e)
{
    // Close the Flyout.
    colorPickerButton.Flyout.Hide();
}

Konfigurieren des Farbwählers

Zur Farbauswahl sind nicht alle Felder notwendig, daher ist der Farbwähler flexibel. Sie haben eine Vielzahl von Optionen zur Verfügung, über die Sie dieses Steuerelement an Ihre Anforderungen anpassen können.

Benötigt der Benutzer keine präzise Kontrolle, beispielsweise bei der Auswahl der Textmarkerfarbe in einer Notizen-App, können Sie eine vereinfachte Benutzeroberfläche verwenden. Sie können die Texteingabefelder ausblenden und das Farbspektrum als Kreis darstellen.

Benötigt der Benutzer präzise Kontrolle, beispielsweise in einer Grafikdesign-App, können Sie sowohl Schieberegler als auch Texteingabefelder für jeden Aspekt der Farbe anzeigen.

Anzeigen eines kreisförmigen Spektrums

In diesem Beispiel wird demonstriert, wie Sie den Farbwähler mithilfe der Eigenschaft ColorSpectrumShape so konfigurieren können, dass statt des standardmäßigen quadratischen Farbspektrums ein kreisförmiges Farbspektrum angezeigt wird.

<ColorPicker x:Name="myColorPicker"
             ColorSpectrumShape="Ring"/>

Farbwähler mit kreisförmigem Spektrum

Bei der Entscheidung zwischen einem quadratischen und einem kreisförmigen Farbspektrum ist das Hauptkriterium die Genauigkeit. In einem quadratischen Farbspektrum hat der Benutzer mehr Kontrolle über die Farbauswahl, da ein größerer Teil des Farbraums angezeigt wird. Ein kreisförmiges Spektrum ist eher für eine schnelle, unkomplizierte Farbauswahl gedacht.

Anzeigen des Alphakanals

In diesem Beispiel implementieren Sie im Farbwähler einen Schieberegler und ein Textfeld für die Deckkraft.

<ColorPicker x:Name="myColorPicker"
             IsAlphaEnabled="True"/>

Farbwähler mit „IsAlphaEnabled“ auf „true“

Anzeigen eines einfachen Wählers

In diesem Beispiel wird demonstriert, wie Sie den Farbwähler mit einer einfachen Benutzeroberfläche für die schnelle und unkomplizierte Verwendung konfigurieren können. Sie implementieren das kreisförmige Spektrum und blenden die standardmäßigen Texteingabefelder aus. Lässt sich die Farbänderung in Echtzeit an dem jeweils betroffenen Objekt nachvollziehen, muss keine Farbvorschauleiste angezeigt werden. Andernfalls sollte die Farbvorschau sichtbar sein.

<ColorPicker x:Name="myColorPicker"
             ColorSpectrumShape="Ring"
             IsColorPreviewVisible="False"
             IsColorChannelTextInputVisible="False"
             IsHexInputVisible="False"/>

Ein einfacher Farbwähler

Angeben der Layoutrichtung

Verwenden Sie die Orientation-Eigenschaft, um anzugeben, ob der ColorPicker vertikal oder horizontal ausgerichtet werden soll. Dies wirkt sich auf die Position der Bearbeitungssteuerelemente relativ zum Farbspektrum aus. Standardmäßig ist die Ausrichtung vertikal.

<ColorPicker IsAlphaEnabled="True" 
             Orientation="Horizontal"/>

Eine Farbauswahl in horizontaler Ausrichtung

Hinweis

Wenn die Ausrichtung auf Horizontal festgelegt ist, wendet ColorPicker die IsMoreButtonVisible-Eigenschaftnicht an.

Anzeigen oder Ausblenden von zusätzlichen Funktionen

In der Tabelle unten sind alle Optionen aufgeführt, die Sie zur Konfiguration des Steuerelements „ColorPicker“ verwenden können.

Feature Eigenschaften
Farbspektrum IsColorSpectrumVisible, ColorSpectrumShape, ColorSpectrumComponents
Farbvorschau IsColorPreviewVisible
Farbwerte IsColorSliderVisible, IsColorChannelTextInputVisible
Deckkraftwerte IsAlphaEnabled, IsAlphaSliderVisible, IsAlphaTextInputVisible
Hexadezimalwerte IsHexInputVisible

Hinweis

Das Textfeld und der Schieberegler für die Deckkraft werden nur angezeigt, wenn „AlphaEnabled“ auf true festgelegt ist. Dann können Sie die Sichtbarkeit der Eingabesteuerelemente mithilfe der Eigenschaften „IsAlphaTextInputVisible“ und „IsAlphaSliderVisible“ anpassen. Details hierzu finden Sie in der API-Dokumentation.

Beispielcode herunterladen