Listen sind Konstrukte, die in so gut wie jeder Applikation als Container für Daten verwendet werden.Beim Entwickeln von Applikationen mit einer graphischen
Benutzeroberfläche zählen Steuerelemente, die Daten in einer interaktiven Liste
darstellen, zu den essentiellen Entwicklungswerkzeugen. Insbesondere in mobilen
Applikationen muss man dem Benutzer oftmals Daten in einer simplen und
organisierten Darstellungsweise präsentieren. Wichtige Funktionalitäten, wie zum Beispiel das Selektieren von einzelnen
Einträgen, das Bereitstellen von kontextbezogenen Aktionen, gestengesteuerte
Aktualisierungen, wie zum Beispiel das sogenannte „pull to refresh“, und Suchleisten sind mit der Zeit zu wichtigen
Bestandteilen einer jeden benutzerfreundlichen Liste geworden.
Xamarin.Forms stellt für diese Zwecke ein eigenes
Steuerelement zur Verfügung: die ListView. Mithilfe einer ListView können wir
Daten einfach und strukturiert darstellen.
<ListView x:Name="ListViewPersonen"/>
Die Daten für die Liste werden im ItemsSource – Property der
Liste abgespeichert. Innerhalb des Properties ItemsSource kann jede Datenmenge
abgelegt werden, die die Schnittstelle IEnumerable implementiert. Für dieses
erste kleine Beispiel werde ich eine generische Liste vom Datentyp String nutzen.
public MainPage()
{
InitializeComponent();
ListViewPersonen.ItemsSource = new List<string>
{
"Tom Ate",
"Anna Nass",
"Peter Silie",
"Martha
Pfahl",
"Franz
Ose"
};
}
Selbstverständlich hat man in vielen Applikationen noch
zusätzliche Informationen, die in einer Liste angezeigt werden sollen.
Beispielsweise könnte für jede einzelne Person noch ein Profilbild und eine
Statusnachricht existieren. Diese Informationen werden beispielsweise in der
Klasse Person definiert:
public class Person
{
public string Name { get; set; }
public string Status { get; set; }
public string ProfilbildURL { get; set; }
}
Im nächsten Schritt übergeben wir unserer ListView eine neue
generische Liste vom Datentyp Person:
public MainPage()
{
InitializeComponent();
ListViewPersonen.ItemsSource = new List<Person>
{
new Person {Name="Tom
Ate",Status="Online",
ProfilbildURL="http://lorempixel.com/100/100/people/1" },
new Person {Name="Anna
Nass",Status="Abwesend",
ProfilbildURL="http://lorempixel.com/100/100/people/2" },
new Person {Name="Peter
Silie",Status="Offline",
ProfilbildURL="http://lorempixel.com/100/100/people/3" },
new Person {Name="Martha
Pfahl",Status="Online",
ProfilbildURL="http://lorempixel.com/100/100/people/4" },
new Person {Name="Franz Ose",Status="Online",
ProfilbildURL="http://lorempixel.com/100/100/people/5" },
};
}
Die korrekte Darstellung wird aber zunächst noch nicht so
ganz klappen, da die ListView für jedes Objekt in der Liste die „.ToString()“
Methode aufruft. Das Ergebnis schaut dementsprechend „aussagekräftig“ aus:
Die Standardimplementation von ToString() liefert einem hier
den vollständigen Namen der Klasse Person. Man könnte jetzt zum Beispiel in der
Klasse Person die .ToString() Methode für unsere Ausgabe überschreiben, was ich
aber für reine Darstellungszwecke nicht empfehlen würde. Die beste Variante
wäre ein eigenes Template für die einzelnen ListView – Items. Mithilfe eines
ItemTemplates können wir im XAML-Code definieren, wie ein ListView-Item aussehen
soll.
Wenn wir nun den Namen und den Status darstellen wollen, können wir auf
folgende Art und Weise ein ItemTemplate für die Liste erstellen:
<ListView x:Name="ListViewPersonen">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" Detail="{Binding Status}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Innerhalb von <DataTemplate> kann man entweder eines der
bereits eingebauten Templates nutzen oder ein eigenes Template erstellen. In
diesem Blogartikel werde ich vorerst nur auf die bereits eingebauten Templates
„TextCell“ und „ImageCell“ eingehen.
Sowohl TextCell als auch ImageCell haben die
Properties „Text“ und „Detail“, welche einen String darstellen. Hierfür können
wir uns direkt auf die entsprechenden Properties des Person-Objektes binden.
Bei unserem Binding müssen wir glücklicherweise keine Quelle angeben, da jedes
Person-Objekt für den entsprechenden Listeneintrag als Standardquelle definiert
ist.
Die ImageCell hat im Gegensatz zur TextCell noch das
Property ImageSource, in dem wir beispielsweise den Link zu einem Bild
eintragen können. Die Bilder für mein Beispiel werden von der Webseite http://lorempixel.com zur Verfügung gestellt. Xamarin.Forms kümmert
sich automatisch um das Herunterladen und Anzeigen der Grafiken.
<ImageCell Text="{Binding Name}" Detail="{Binding Status}" ImageSource="{Binding ProfilbildURL}"/>
In meinem nächsten Blogartikel werde ich auf weitere
Features der ListView genauer eingehen.
Wer mehr über die vielen Möglichkeiten von Xamarin und
Xamarin.Forms erfahren möchte, kann auch einen passenden Kurs dazu besuchen.