Kolumne: XAML Expertise

XAML-Tipp: UWP – neue ComboBox-Features
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 folgende Expertise: „UWP – neue ComboBox-Features“

Das Windows-10-October-2018-Update bringt eine neue Windows 10 SDK Preview mit, die weitere vielversprechende Features für das ComboBox-Steuerelement enthalten soll. Dazu zählen die neuen Eigenschaften IsEditable und Text.

Das Beispiel mit zwei bearbeitbaren ComboBox-Steuerelementen in Listing 1 demonstriert die neuen Features (Abb. 1). Der erste Eintrag ist mit einigen ComboBoxItems gefüllt; der Text ist auf „Hello World!“ eingestellt, was nicht als ComboBoxItem existiert. Die zweite ist mit einigen Beispieldaten (Produkten) verbunden. Unter jeder ComboBox befinden sich drei TextBlock-Steuerelemente. Der Text der ersten TextBox ist mit dem SelectedIndex der ComboBox verbunden, der zweite mit SelectedItem, das eine benutzerdefinierte Funktion in der MainPage verwendet. Der dritte mit der Eigenschaft „Text“ der ComboBox.

  
<StackPanel HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="300">

    <ComboBox x:Name="comboBox1"
              Header="ComboBox 1"
              IsEditable="True"
              Text="Hello World !"
              HorizontalAlignment="Stretch">
        <ComboBoxItem Content="A" />
        <ComboBoxItem Content="B" />
        <ComboBoxItem Content="C" />
        <ComboBoxItem Content="D" />
        <ComboBoxItem Content="E" />
    </ComboBox>
    <TextBlock Text="{x:Bind comboBox1.SelectedIndex, Mode=OneWay}" />
    <TextBlock Text="{x:Bind SelectedComboBoxItem(comboBox1.SelectedItem), Mode=OneWay}" />
    <TextBlock Text="{x:Bind comboBox1.Text, Mode=OneWay}" />

    <ComboBox x:Name="comboBox2"
              Margin="0,20,0,0"
              Header="ComboBox 2"
              IsEditable="True"
              ItemsSource="{x:Bind SampleData}"
              DisplayMemberPath="ProductName"
              HorizontalAlignment="Stretch"/>
    <TextBlock Text="{x:Bind comboBox2.SelectedIndex, Mode=OneWay}" />
    <TextBlock Text="{x:Bind SelectedProduct(comboBox2.SelectedItem), Mode=OneWay}" />
    <TextBlock Text="{x:Bind comboBox2.Text, Mode=OneWay}" />
</StackPanel>
Abb. 1: Die neue „IsEditable“-Eigenschaft der ComboBox

Abb. 1: Die neue „IsEditable“-Eigenschaft der ComboBox

Der Text in der ComboBox lässt sich jetzt wie erwartet bearbeiten. Der SelectedIndex wird auf -1 festgelegt, sobald Sie einen benutzerdefinierten Text eingeben. Die dritte TextBox, die mit dem Text verbunden ist, wird auf einem TextChanged des Texts aktualisiert, nicht nur wenn der Fokus verloren geht (wie bei SelectedItem).

In der MainPage-Klasse befindet sich eine SampleData-Eigenschaft, die einige Product-Objekte enthält (Listing 2). Es enthält auch die Methoden SelectedComboBoxItem() und SelectedProduct(). Diese Methoden werden verwendet, um das SelectedItem in den Text des TextBlocks zu übernehmen. Das SelectedComboBoxItem() zeigt den Inhalt des ausgewählten ComboBoxItem oder den eingegebenen Text an. Das SelectedProduct() zeigt den ProductName des ausgewählten Produkts oder den eingegebenen Text an.

public sealed partial class MainPage : Page {

    internal List<Product> SampleData { get; } = new List<Product>() {
        new Product("Car", 20000),
        new Product("Bike", 800),
        new Product("Laptop", 400),
    };

    public MainPage() {
        this.InitializeComponent();
    }

    private string SelectedComboBoxItem(object selectedItem) {
        if (selectedItem is ComboBoxItem p) {
            return p.Content?.ToString();
        }
        return selectedItem?.ToString();
    }

    private string SelectedProduct(object selectedItem) {
        if (selectedItem is Product p) {
            return p.ProductName;
        }
        return selectedItem?.ToString();
    }
}

internal class Product {

    public string ProductName { get; set; }
    public decimal UnitPrice { get; set; }
    public Product(string productName, decimal unitPrice) {
        this.ProductName = productName;
        this.UnitPrice = unitPrice;
    }
}

Die ComboBox verfügt auch über eine neue TextBoxStyle-Eigenschaft. Sie können damit einen benutzerdefinierten Stil für die TextBox in einer bearbeitbaren ComboBox definieren (Listing 3). Ich hatte gehofft, damit die Rechtschreibprüfung entfernen zu können, aber es hat leider nicht funktioniert. Wie in Abbildung 2 zu sehen ist, gibt es immer noch eine rote Linie, wenn Sie einen Tippfehler machen, obwohl ich IsSpellCheckEnabled auf False gesetzt habe.

<ComboBox x:Name="comboBox1"
          Header="ComboBox 1"
          IsEditable="True"
          Text="Hello World !"
          HorizontalAlignment="Stretch">
    <ComboBox.TextBoxStyle>
        <Style TargetType="TextBox"
                BasedOn="{StaticResource ComboBoxTextBoxStyle}">
            <Setter Property="IsSpellCheckEnabled"
                    Value="False" />
        </Style>
    </ComboBox.TextBoxStyle>
    <ComboBoxItem Content="A" />
    <ComboBoxItem Content="B" />
    <ComboBoxItem Content="C" />
    <ComboBoxItem Content="D" />
    <ComboBoxItem Content="E" />
</ComboBox>
Abb. 2: Text-Style für die bearbeitbare ComboBox

Abb. 2: Text-Style für die bearbeitbare ComboBox

Das IsEditable ist ein kleines, aber wichtiges neues Feature. WPF hatte bereits bearbeitbare ComboBoxes. In Windows Forms verfügt die ComboBox über einen DropDownStyle, den Sie auf DropDown festlegen können. Jetzt können Sie dasselbe auch für die UWP tun.

Kostenlos: Git-Spickzettel für .NET-Entwickler

Volle Kontrolle mit dem Git-Spickzettel! Unser Cheatsheet zeigt Ihnen, wie Sie Git in Verbindung mit der Windows PowerShell und PowerShell Core effektiv nutzen können. Jetzt kostenlos herunterladen!

Download for free

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 -