XAML-Tipp: UWP – Neue Beschreibungsfelder für Eingabesteuerelemente

Kolumne XAML Expertise: WPF und Windows-Apps

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 folgende Expertise: „UWP: Neue Beschreibungsfelder für Eingabesteuerelemente“.

Die neue Windows 10 SDK Preview beinhaltet ein neues, vielversprechendes Feature für Eingabesteuerelemente, das mit dem nächsten großen Windows-10-Update (Build 17738 oder höher) erscheinen soll. Bei dem neuen Feature handelt es sich um Beschreibungsfelder, eine Art Label passend zum Steuerelement. Unterstützt werden hierbei die folgenden Steuerelemente: TextBox, PasswordBox, RichEditBox, AutoSuggestBox und ComboBox.

Die XAML-Deklaration ist sehr einfach: Die Beschreibung wird in der Description-Eigenschaft festgelegt. Diese ist vom Typ Objekt. Ein kleines Beispiel wird in Listing 1 demonstriert. Die PasswordBox in diesem Beispiel hat einen TextBlock mit zwei Run-Steuerelementen, die einen bestimmten Teil in Fettdruck abbilden kann. Ebenfalls wird auch Data Binding unterstützt. Die Beschreibung der ComboBox ist mit dem SelectedIndex verbunden (Abb. 1).

<StackPanel HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="300"
            Spacing="8">
    <TextBox Header="TextBox"
                Text="Hello World!"
                Description="TextBox Description" />
    <PasswordBox Header="PasswordBox"
                    Password="secret">
        <PasswordBox.Description>
            <TextBlock>
        <Run Text="PasswordBox"
                FontWeight="Bold" />
        <Run Text="Description" />
            </TextBlock>
        </PasswordBox.Description>
    </PasswordBox>
    <RichEditBox Header="RichEditBox"
                    Description="RichEditBox Description" />
    <AutoSuggestBox Header="AutoSuggestBox"
                    Description="AutoSuggestBox Description" />
    <ComboBox Header="ComboBox"
                x:Name="comboBoxDemo"
                Description="{x:Bind comboBoxDemo.SelectedIndex, Mode=OneWay}"
                SelectedIndex="2"
                HorizontalAlignment="Stretch">
        <ComboBoxItem Content="A" />
        <ComboBoxItem Content="B" />
        <ComboBoxItem Content="C" />
        <ComboBoxItem Content="D" />
    </ComboBox>
</StackPanel>

Abb. 1: Die neuen Beschreibungsfelder für Eingabesteuerelemente

Sie können die Farbe der Beschreibung leicht ändern, indem Sie eine Pinselressource mit dem Schlüssel SystemControlDescriptionTextForegroundBrush definieren. In Listing 2 habe ich einen StackPanel mit der Farbe Rot hinzugefügt (Abb. 2). Die Beschreibungsfelder sind ein kleines, aber feines Feature. Nichts, was Sie mit einem normalen TextBlock nicht selbst machen könnten, aber so ist es einfacher.

<StackPanel HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="300"
            Spacing="8">
    <StackPanel.Resources>
        <SolidColorBrush x:Key="SystemControlDescriptionTextForegroundBrush"
                         Color="Red" />
    </StackPanel.Resources>
    <TextBox Header="TextBox"
             Text="Hello World!"
             Description="TextBox Description" />