In
meinem letzten Blogartikel über Listen in Xamarin.Forms bin ich auf die
Verwendung der ListView eingegangen. Mithilfe einer ListView ist es möglich, dem Benutzer Daten
in einer strukturierten Form darzustellen. Oftmals hat man die Anforderung, die
Daten auf eine bestimmte Art und Weise aufzubereiten. Innerhalb einer ListView
ist es möglich, bereits existierende Templates für die ListViewItems zu nutzen.
Jedoch kommt es oft vor, dass die eingebauten Templates, nämlich ImageCell und
TextCell, vom Funktionsumfang her nicht ausreichen. Deshalb werden wir uns in
diesem Blogartikel die ViewCell ein wenig genauer ansehen. Die ViewCell
ermöglicht uns die Erstellung eines eigenen Templates für unsere ListViewItems.
Für das folgende Beispiel werde ich im Hintergrund die
gleichen Daten nutzen, die ich in meinem letzten Blogartikel über ListViews
genutzt habe.
Der grundlegende Aufbau einer ViewCell sieht folgendermaßen
aus:
<ListView x:Name="ListViewPersonen">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Innerhalb einer ViewCell ist es möglich, jedes
beliebige Steuerelement einzufügen. Da wir aber nicht nur ein einzelnes
Steuerelement haben, werden wir ein StackLayout als Container nutzen. Das
Layout in unserem Beispiel soll am Ende so aussehen: In meinem letzten Blogeintrag über Listen in Xamarin.Forms bin ich auf die Verwendung der ListView eingegangen.
In unserer ViewCell fügen wir nun ein StackLayout ein,
welches die danach folgenden Steuerelemente Horizontal aneinanderreiht. Die
zwei Labels mit dem Namen und dem Status werden in einem weiteren StackLayout
gekapselt, damit sie untereinander angezeigt werden können. Letztendlich wird
noch ein Button eingefügt, der Beispielsweise mit den Daten aus dem
Personen-Objekt arbeiten könnte.
<ViewCell>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding ProfilbildURL}"/>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Name}"/>
<Label Text="{Binding Status}"/>
</StackLayout>
<Button Text="Anrufen" TextColor="Blue" BackgroundColor="White"/>
</StackLayout>
</ViewCell>
Das erste Ergebnis ist allerdings noch ein wenig
durcheinandergewürfelt:
Das äußere StackLayout, welches alle anderen Steuerelemente beinhaltet, füllt
die gesamte Breite des ListViewItems aus, jedoch nehmen sich die inneren
Steuerelemente nur so viel Platz, wie sie benötigen. Wir können aber mithilfe
einer kleinen Änderung den nicht verwendeten Platz unserem inneren vertikalen
StackLayout zuweisen.
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label Text="{Binding Name}"/>
<Label Text="{Binding Status}"/>
</StackLayout>
Die sogenannten „HorizontalOptions“ definieren, wie sich
Steuerelemente ausrichten sollen. Der Suffix „AndExpand“ gibt hierbei an, dass
nach dem Ausrichten der restliche freie Bereich ebenfalls beansprucht werden
soll. Das Ergebnis schaut nun folgendermaßen aus:
Als nächstes werde ich für die einzelnen ListViewItems einen
Padding setzen, damit der Text und das Bild nicht mehr so stark an den Rändern
„kleben“. Die Padding-Eigenschaft setze ich im äußeren StackLayout:
<StackLayout Orientation="Horizontal" Padding="5">
Das Ergebnis schaut nun ein klein wenig besser aus, jedoch
wird bei genauerem Betrachten ein neuer Fehler ersichtlich: der Text vom Status
und des Buttons wird nun leicht abgeschnitten. Dies liegt an der Tatsache, dass
die Elemente in einer ListView standardmäßig immer eine bestimmte Größe haben.
Sobald einzelne Steuerelemente unterschiedlich groß sind oder ein Padding
hinzugefügt wird, wird in Android ein Teil des ListViewItems abgeschnitten.
Aber dieses Fehlverhalten kann glücklicherweise mit einer kleinen Änderung
behoben werden: Indem wir in der ListView das Property „HasUnevenRows“ auf True
setzen, wird die Größe von jedem einzelnen ListViewItem basierend auf dem
Inhalt festgelegt.
<ListView x:Name="ListViewPersonen" HasUnevenRows="True">
Die Liste schaut nun so aus:
Das endgültige Layout für diese Liste:
<ListView x:Name="ListViewPersonen" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="5">
<Image Source="{Binding ProfilbildURL}"/>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label Text="{Binding Name}"/>
<Label Text="{Binding Status}"/>
</StackLayout>
<Button Text="Anrufen" TextColor="Blue" BackgroundColor="White"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
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.