ViewCells in Xamarin.Forms

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.

Kommentare sind geschlossen