Datenbindung für WPF: Daten-Templates

Daten-Templates dienen grundsätzlich gesehen dazu, das Aussehen von (wiederholenden) Elementen zu verändern. Was können wir dadurch erreichen? Ein Beispiel hierfür ist die Erstellung einer Auswahlliste (ComboBox), bei welcher wir ein einzelnes Element so verändern wollen, dass ein Rechteck mit einer Füllfarbe und der Titel der Farbe als ein Auswahlelement angezeigt wird.
In solchen Fällen erfolgt die Zuweisung der Elemente (bzw. deren Daten-Quelle) meist über die Code-Behind-Datei und nicht über den XAML-Code. Um auf die Daten-Quelle der Auswahlliste zuzugreifen, benötigen wir die Eigenschaft ItemsSource. Dieser Eigenschaft wird ein Array von anzuzeigenden Elementen zugewiesen. Bisher hatte jedes Item immer nur eine Zeichenkette, die als Beschriftung genutzt wurde. Über ein Daten-Template (Klasse DataTemplate) können wir nun das Design dieser Auswahlliste verändern und die einzelnen Eigenschaften unserer eigenen erstellten Klasse (welche als Daten-Kontext verwendet wird) an einzelne Steuerelemente binden, welche im Daten-Template vorhanden sind. In unserem Fall wollen wir das Design eines einzelnen Items ändern, wodurch wir der Eigenschaft ItemTemplate der ComboBox unser Daten-Template zuweisen müssen (siehe Beispiel).
Haben Sie sich vielleicht schon einmal gefragt, warum die Eigenschaften SelectedItem oder ein einzelner Eintrag des Arrays der Eigenschaft Items als Rückgabewert object haben? Zurückzuführen ist dies auf die „Neutralität“ des Steuerelements. Dem ComboBox-Steuerelement ist es egal, ob er lediglich Zeichenketten oder Objekte mit Datenbindung zugewiesen bekommt. Daraus folgt also, dass wir bei der Datenbindung an eine Auswahlliste (oder auch ein anderes Steuerelement) über beide oben genannten Eigenschaften auf das dahinterliegende Datenobjekt jederzeit zugreifen können.

ComboBoxItem.cs

using System.Windows.Media;

namespace CSV20.Ressourcen_Daten_Templates
{
    public class ComboBoxItem
    {
        public Brush Color { get; set; }
        public string Name { get; set; }
    }
}

MainWindow.xaml

<ComboBox Name="comboBoxListe" Height="40">
	<ComboBox.ItemTemplate>
		<DataTemplate>
			<Canvas Height="40" Background="White">
				<Rectangle Canvas.Left="5" Canvas.Top="5" Width="30" Height="30" Fill="{Binding Color}" />
				<Label Canvas.Left="45" Canvas.Top="5" Height="30" FontSize="14" FontWeight="Bold" Content="{Binding Name}" />
			</Canvas>
		</DataTemplate>
	</ComboBox.ItemTemplate>
</ComboBox>

MainWindow.xaml.cs

using System.Windows;
using System.Windows.Media;

namespace CSV20.Ressourcen_Daten_Templates
{
    /// <summary>
    /// Interaktionslogik für MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private ComboBoxItem[] aListe = new ComboBoxItem[] {
            new ComboBoxItem() {    Color = Brushes.Red,    Name = "Rot"        },
            new ComboBoxItem() {    Color = Brushes.Lime,   Name = "Grün"       },
            new ComboBoxItem() {    Color = Brushes.Blue,   Name = "Blau"       },
            new ComboBoxItem() {    Color = Brushes.White,  Name = "Weiß"       },
            new ComboBoxItem() {    Color = Brushes.Orange, Name = "Orange"     },
            new ComboBoxItem() {    Color = Brushes.Yellow, Name = "Gelb"       },
            new ComboBoxItem() {    Color = Brushes.Black,  Name = "Schwarz"    },
        };

        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            // Objekt-Array der ComboBox-Item-Liste zuweisen
            comboBoxListe.ItemsSource = aListe;
            // erstes Element vorselektieren
            comboBoxListe.SelectedIndex = 0;
        }
    }
}

Das große Computer ABC

C# lernen

Datenbindung für WPF: Daten-Templates