Da mein Tweet

Website written completely in #Xamarin.Forms, #AspNetCore and #OOUI this was freaking easy! Thanks to @praeclarum and @jsuarezruiz for the library and commits! I was shocked how easy it is to do this! @davidortinau pic.twitter.com/AJNPrjxKRf
— Christian Agredo (@Agredo10) 1. Mai 2021

so viel Interesse auf Twitter erregt hat, zeige ich euch hier, wie man eine Webseite mit ASP.NET Core 5, Xamarin.Forms 4.5.0.356 und der Bibliothek Ooui erstellt

Das Projekt

Erstellt ein ASP.NET Core 5.0 Projekt mit Visual Studio und gebt dem Projekt einen Namen und Pfad und stellt .Net 5 als Zielframework ein.

Nuget Packages

Damit ihr die Webseite aus einer Xamarin.Forms Seite generieren könnt, braucht ihr die Ooui Bibliothek und Xamarin.Forms. Die ASP.Net Core 5 Pakete sollten bereits installiert sein. Zuerst installiert die Xamarin.Forms version 4.5.0.356

und danach die Vorabversion mit einbeziehen (Vorbaversion einbeziehen anhaken), um die neuste Ooui Version 0.13.318-beta2 zu installieren. Für diese Webseite muss Ooui, Ooui.AspNetCore und Ooui.Forms installiert werden.

Code

Nun muss das ASP.NET Core Projekt angepasst werden. Dazu muss in der Startup.cs in der Configuration Methode die Zeilen

app.UseOoui();
Xamarin.Forms.Forms.Init();

hinzugefügt werden. Das sollte so aussehen:

Nun erstellen wir eine XAML Seite. Erstellt einen Ordner „Views“ im Projektmanager und fügt dort eine Xamarin.Forms Seite Hinzu:

Controller Hinzufügen.

Damit diese Seite nun aufgerufen wird, wird ein Controller hinzugefügt. Dazu muss die Startup.cs noch mal editiert werden. Fügt der Methode ConfigureServices die folgende Zeile hinzu:

public void ConfigureServices(IServiceCollection services)
{
   services.AddControllers();
}

und in der Configuration Methode:

app.UseEndpoints(endpoints =>
{
   endpoints.MapControllers();
});

Nun fügen wir den einen Controller „HomeController“ hinzu.

Lasst dem hinzugefügten Controller von ControllerBase erben, fügt Route(„/“) hinzu und Index muss ElementResult() zurückgeben. [Route(„/“)]

[Route(„/“)]
public class HomeController : ControllerBase
{
	public IActionResult Index()
	{
		return new ElementResult(new NavigationPage(new HomePage()).GetOouiElement());
	}
}

Starten

Fazit

Ooui ist momentan noch im beta stadium, dennoch ist es möglich ansehnliche Seiten zu gestalten. Natütlich funktioniert nicht alles. Was unterstützt wird und was noch nicht könnt ihr hier sehen. Z.b. unterstüzt das Entry folgende Properties.

Hoffentlich wird es da noch weitere Entwicklung geben. Ansonsten Viel Spaß beim Ausprobieren.

Eine Webseite mit Xamarin.Forms erstellen