Kolumne: XAML-Expertise

XAML-Tipp: UWP – Das Color-Picker-Steuerelement
Keine Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es die folgende Expertise: „UWP: Das Color-Picker-Steuerelement“

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

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

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

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -