Das neue Color-Picker-Steuerelement ermöglicht eine einfachere Auswahl individueller Farben inklusive Touch-Unterstützung. Als Standard steht ein klassisches Farbspektrum zur Verfügung (Abb. 1). Zusätzlich können RGB-, HSV- oder Hexadezimalwerte eingetragen werden. Falls für die eigene Windows-10-App eine Lösung mit einer Stifteingabe geplant ist, bevorzugen Sie hierbei stattdessen die Inking-Steuerelemente. Diese bieten eine speziell dafür optimierte Lösung zur Farbauswahl.

Abb. 1: Das Color-Picker-Steuerelement

Hinzugefügt wird das neue Steuerelement ganz einfach mit nur wenigen Zeichen: <ColorPicker />.

UWP: Das Color-Picker-Steuerelement

Eine Vielzahl an Optionen ermöglicht es, die gewünschte Darstellung selbst nach den eigenen Vorstellungen anzupassen. Zum Beispiel, ob das Farbspektrum die Farben kreisförmig oder verteilt auf die Box darstellen soll. Ebenfalls lassen sich die Eingabemöglichkeiten der Farbcodes deaktivieren. In Listing 1 steht ein Beispielcode, worin einige soeben genannte Optionen eingestellt sind. Zusätzlich wird gezeigt, wie ein Data Binding auf den ausgewählten Farbwert festgelegt wird. In Abbildung 2 sieht man die Umsetzung dieses Beispielcodes.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="410"></RowDefinition>
    <RowDefinition/>
  </Grid.RowDefinitions>

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

  <Rectangle Grid.Row="1">
    <Rectangle.Fill>
      <SolidColorBrush Color="{x:Bind myColorPicker.Color, Mode=OneWay}"/>
    </Rectangle.Fill>
  </Rectangle>
</Grid>

Abb. 2: Data Binding und Konfiguration des Color-Picker-Steuerelements