DataGrids Everywhere - mit C#, Xamarin Forms und DevExpress

In meinem letzten Xamarin Workshop haben wir eine WinForms Applikation mit Xamarin auf die drei führenden mobilen Plattformen konvertiert. Natürlich war wieder mal ein DataGrid in der Applikation, welches auch unbedingt auf den mobilen Devices dargestellt werden musste. Nun, da hat sich gleich einmal angeboten das neue DevExpress DataGrid-Control für Xamarin anzutesten, welches sich derzeit in Beta befindet.

Es untertützt alle drei Plattformen, also Windows Phone 8.1, iOS und Android (und auch Portable Libraries) und ist frei verfügbar.

Was wollen wir bauen?

Natürlich eine mobile Applikation mit einem Datengrid. Da bietet sich gleich der Codefest.at RSS-Feed an, welcher die letzten Blog-Einträge anzeigt. Das fertige Resultat sollte (und wird) in etwa so aussehen:

 
Windows Phone Client mit/ohne Gruppierung und Filter im Emulator

 
Android Client, ungefilterte und gefilterte Ansicht im Emulator

Ich werde nachfolgend zwei Varianten implementieren, eine Lösung mit XAML und eine zweite Version ohne XAML, d. h. alle Controls werden im Code erzeugt. Sieht das nicht wirklich überzeugend aus? Dann wollen wir doch gleich loslegen.

Voraussetzungen

Bevor wir ans Eingemachte gehen können, benötigen wir natürlich ein paar Dinge auf dem Rechner vorinstalliert:

• Xamarin mit Xamarin.Forms (dieses Beispiel wurde mit der Build 1.4.2.6359 entwickelt)
• Visual Studio, bzw. Xamarin Studio (ich verwende den VS 2015 RC, wegen dem von Haus aus mitgelieferten Android Emulator)
• DevExpress Grid Control für Xamarin – derzeit Beta und gratis verfügbar.

Der Download für die DevExpress Grid-Komponente geht mit dem eigenen Xamarin Account aus dem Xamarin Component Store flott von der Hand: https://components.xamarin.com/view/devexpress-grid

Source Code

Für die ungeduldigen unter euch steht der komplette Source Code hier zur Verfügung:
https://github.com/BerndtHamboeck/XamDataGridSample

Erstellen der Applikation

Zuerst wird eine Xamarin.Forms Portable Applikation mit dem Namen XamDataGridSample erzeugt.

Xamarin.Forms Update

Im nächsten Schritt sollte Xamarin.Forms auf die aktuellste Version upgedatet werden, das kann entwender über die Solution, oder für jedes Projekt einzeln durchgeführt werden.

Die aktuellste (stabile) Version von Xamarin.Forms ist derzeit 1.4.2.6359.

Bitte kontrolliert abschließend alle mobilen Projekte, ob die Xamarin.Forms DLLs auch wirklich auf dieser Version sind, die Versionen sollten auf keinen Fall auseinander laufen, um unvorhergesehene Effekte zu vermeiden.

Windows Phone Projekt auf 8.1 Upgraden

Der nächste Schritt ist die Migration der Windows Phone APP auf Version 8.1, da das DevExpress Datengrid erst ab 8.1 funktioniert.

Referenzen für das DataGrid

Nun werden die Referenzen für das DevExpress DataGrid hinzugefügt. Diese sind in der devexpress-grid-15.1.3.0.zip-Datei, im Folder devexpress-grid-15.1.3.0\lib für die jeweilige Plattform zu finden.

Nachfolgend sind die Screenshots für die beiden Projekte, nämlich die Portable Library und das Windows Phone 8.1 Projekt zu sehen. Für die beiden anderen Plattformen (Android und iOS) ist die DevExpress.Mobile.Grid.WinPhone.v15.1.dll ebenfalls als Referenz (aus dem korrekten Verzeichnis) hinzuzufügen.

Hinzufügen von Microsoft.Net.Http

Da von codefest.at eine XML-Datei angefordert wird, sollte das gleich so passieren, wie das in mobilen APPs Stand der Dinge ist, nämlich asynchron. Dazu wird über NuGet in der Portable Class Library das Microsoft.Net.Http Package installiert.

Sollte beim installieren des Microsoft.Net.Http-Paketes folgende Fehlermeldung auftreten, dann startet bitte Visual Studio neu, und zwar als Administrator und öffnet danach die Package Manager Console (Tools -> Nuget Package Manager -> Package Manager Console).

Danach setzt ihr die ExecutionPolicy auf unrestricted:

Nun bitte erneut versuchen das Paket zu installieren, das sollte nun klappen. Wenn das nun klappt, bzw. es schon beim ersten Mal der Fall war, dann ist das ein Grund zur Freude, denn es kann weiter gehen.

Initialisieren in der MainPage.xaml.cs

Die DevExpress Komponente möchte gerne initialisiert werden, sollte das vergessen werden, dann bekommt man beim Ausführen entweder ein leeres Datengrid, oder seltsame Zeichen anstatt der gewünschten Texte. Da beides nicht das ist, was erreicht werden soll, kommt eine Code-Zeile in die MainPage.xaml.cs im Windows Phone 8.1 Projekt:

DevExpress.Mobile.Forms.Init();

Das gilt übrigens auch für die Android und iOS Projekte. Im Android Projekt kommt die Zeile in die MainActivity.cs Datei. Im iOS Projekt kommt die Zeile für die Initialisierung in die Main.cs Datei.

Soweit so gut, jetzt kann es mit dem eigentlichen Kodieren weiter gehen – wir bauen uns einen RSS-Reader.

Die Implementierung des RSS Readers

Bevor etwas angezeigt werden kann, muss etwas gelesen werden. Das soll der RSS-Feed von codefest.at sein. Dazu benötigen wir eine Klasse, die die einzelnen RSS-Einträge bereithält, oder besser gesagt, die Informationen, die später im Datengrid angezeigt werden sollen. Das wird die RssEntry-Klasse sein.

Zum befüllen schreiben wir uns eine Klasse, die den Feed asynchron abholt und das Ergebnis in eine Liste von RssEntry-Objekten retourniert.

Das war es eigentlich, jetzt wird noch die Xamarin.Forms Page benötigt, die die gelesenen Daten abholen kann.

Xamarin.Forms Page ohne XAML

Das Datengrid wird auf einer eigenen Page liegen, möglicherweise mit weiteren Controls. Fügen wir also dem Portable Projekt eine Forms ContentPage hinzu.

Diese Xamarin.Forms ContenPage soll 2 Überschriften darstellen – schließlich sollen die Anwender auch sehen, was denn hier so Sache ist. Während die Daten asynchron gelesen werden, wäre ein ActivityIndicator eine feine Sache, dann tut sich auch etwas auf dem Device. Dann kann es eigentlich auch schon los gehen. Die Daten müssen gelesen werden.

Dazu wird der RSS Reader verwendet, der zuvor zammengebaut wurde. Sind die Daten angekommen, so wird ein neues Grid Control angelegt und drei Spalten hinzugefügt. Eine für das Datum, eine weitere für den Autor und der Titel wäre bestimmt auch hilfreich. Danach wird der ActivityIndicator noch entfernt, da die Daten schon hier sind.

In der App.cs-Datei im Portable-Projekt wird die Startseite der Applikation erzeugt, diese soll nun unsere MainPage sein, d. h. hier ist noch eine kleine Anpassung notwendig, diese soll nun so aussehen:

Jetzt kann das Projekt gestartet werden und je nach Startprojekt kann die APP im Windows Phone 8.1, iOS, oder Android Emulator, bzw. Device bewundert werden.

Xamarin.Forms Page mit XAML

Das gleiche klappt natürlich auch hervorragend über XAML. Das soll mit einer zweiten Page dargestellt werden, diese soll auch das Filtern ermöglichen und das Datum gruppiert darstellen (das kann gerne auch in die erste Lösung nachträglich eingebaut werden, das wäre einfach, da nur ein paar Properties im Code zu setzen wären). Beginnen wir aber mit dem hinzufügen einer Forms Xaml Page zu unserem bestehenden Portable Projekt:

Füllen wir die XAML-Datei mit Leben, der Namespace für das DevExpress Grid muss hinzugefügt werden, danach die Controls für den Header, bzw. SubHeader und der ActivityIndicator ist sicherlich ebenfalls nett anzusehen, während der Feed abgeholt wird. Abschließend noch das Datengrid mit den drei Spalten und die Page ist fertig.

Die Code-Behind-Datei ist hier natürlich dramatisch kürzer, da hier nur die Daten gelesen werden und gebunden werden:

Abschließend ist noch die Start-Page in der App.cs-Datei umzusetzen und die Applikation kann schon mit der XAML Page gestartet werden.

Zusammenfassung

Ein Datengrid macht möglicherweise auf den ersten Blick auf einem Mobiltelefon wenig Sinn, aber bestehende Applikationen, die auf mobile Devices migriert werden sollen, können von so einem Control aber mit Sicherheit profitieren. Sortieren, Filtern, aber auch Dateneingaben werden damit auch auf den mobilen Devices ermöglicht. Richtig Spaß macht so ein Datengrid natürlich erst auf einem Tablet, hier spielt es auch so richtig seine Stärken aus. Ich finde wir finden hier wieder eine wunderbare Bereicherung für unsere Entwicklung vor, um tolle Lösungen mit C# und Xamarin.Forms auf alle möglichen Devices zu zaubern!

Berndt Hamböck ist seit 2007 MCT, darüber hinaus befasst er sich mit Lösungen für komplexe Anwendungsszenarien mit den neuesten Microsoft Technologien. Die Erfahrungen aus der Projektarbeit gibt er in Vorträgen und Trainings weiter und begleitet Entwicklerteams in Softwareunternehmen bei Projekten im Microsoft Umfeld.

Das ist ein Gastbeitrag. Die Meinung des Autors muss sich nicht mit jener von Microsoft decken. Durch den Artikel ergeben sich keinerlei Handlungsempfehlungen. Microsoft übernimmt keine Gewähr für die Richtigkeit oder Vollständigkeit der Angaben.