This post originated from an RSS feed registered with .NET Buzz
by -.
Original Post: WPF: ListBox um Grafiken/Images erweitern
Feed Title: Norbert Eder - Living .NET
Feed URL: http://feeds.feedburner.com/NorbertEder-Livingnet
Feed Description: Copyright (c)2005, 2006 by Norbert Eder
Die Standard-ListBox unter WPF ist dann ein doch eher fades Steuerelement. In den meisten Fällen wird man mit den angebotenen Möglichkeiten nicht auskommen, daher muss es angepasst bzw. erweitert werden. Dieser Artikel zeigt, welche Schritte vorgenommen werden müssen, um folgendes Aussehen zu erhalten:
Normalerweise werden mit Hilfe der ListBox ListBoxItems (es können auch andere Child-Elemente sein) angezeigt. Diese besitzen eine Eigenschaft Content. Darüber kann nun der anzuzeigende Text dargestellt werden. Für dieses Beispiel werden jedoch zwei Strings benötigt und ein Image.
Betreffend der Strings können wir ein simples Datenobjekt erstellen und an die ListBox binden.
using System;
using System.Collections.Generic;
using System.Text;
namespace ListBoxSampleApp
{
publicclass DataItem
{
privatestring _title = null;
privatestring _description = null;
publicstring Title
{
get { returnthis._title; }
set { this._title = value; }
}
publicstring Description
{
get { returnthis._description; }
set { this._description = value; }
}
public DataItem() { }
public DataItem(
string title,
string description)
{
_title = title;
_description = description;
}
}
}
Die Bindung der Daten als auch das Einbinden der Grafik erfolgt an der gleichen Stelle. Hierzu muss eine Ressource erstellt werden, in der ein DataTemplate definiert wird. Dieses Template beschreibt in unserem Fall das Aussehen eines Eintrages in der ListBox.
Wie zu sehen ist wird der Eintrag für unsere ListBox aus einem StackPanel und einem Grid erzeugt. Das Grid besitzt insgesamt zwei Zeilen und zwei Spalten. In der ersten Spalte wird nun unsere Grafik angezeigt (die Grafik wurde in das Projekt eingefügt und steht somit zur Verfügung). Durch die Angabe der RowSpan erstreckt sich die Grafik über beide Zeilen. In der zweiten Spalte ist für jede Zeile ein TextBlock zu finden. Diese enthalten jeweils ein Binding auf Eigenschaften aus dem zuvor definierten Datenobjekt: einmal für den Titel und einmal für die Beschreibung.
Wenn dieser Schritt erledigt ist, muss nur noch der ListBox mitgeteilt werden, dass das erstellte Template für die Anzeige der Items verwendet werden soll. Dies geschieht in der Eigenschaft ItemTemplate der ListBox.