Listen in Xamarin.Forms

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.

Kommentare sind geschlossen