{"id":2997,"date":"2023-12-09T18:30:10","date_gmt":"2023-12-09T17:30:10","guid":{"rendered":"https:\/\/www.art-events.de\/weblog\/?p=2997"},"modified":"2023-12-12T11:39:09","modified_gmt":"2023-12-12T10:39:09","slug":"android-programmierung-mit-c-und-dot-net-maui-teil-1-einstieg","status":"publish","type":"post","link":"https:\/\/www.art-events.de\/weblog\/android-programmierung-mit-c-und-dot-net-maui-teil-1-einstieg\/","title":{"rendered":"Android Programmierung mit C# und DOT NET MAUI. Teil 1. Einstieg"},"content":{"rendered":"

Einf\u00fchrung in Programmierung C# mit DOT Net MAUI.<\/p>\n

<\/a>Visual Studio, C# und DOT Net MAUI<\/strong><\/h3>\n

Wer schon mal dar\u00fcber nachgedacht hat, ein eigenes Programm zu schreiben, ist sicher irgendwie \u00fcber Microsoft Visual Studio<\/a> gestolpert. Eine leistungsf\u00e4hige Oberfl\u00e4che zur Softwareentwicklung mit Unterst\u00fctzung diverser Programmiersprachen. Wer dazu gerne f\u00fcr Windows Anwendungen entwickelt, wird fr\u00fcher oder sp\u00e4ter Bekanntschaft mit C# schlie\u00dfen, eine recht m\u00e4chtige, objektorientierte Programmiersprache, die Microsoft inzwischen gut etabliert hat. Ich selbst entwickele seit vielen Jahren Windows Anwendungen unter C# und sowohl meine Kunden als auch meine Person sind mit Ergebnis und Aufwand recht zufrieden.<\/p>\n

Wenn es hingegen um Apps f\u00fcr Android Smartphones geht, setze ich auf das Android Studio von Google. Doch wie sch\u00f6n w\u00e4re es, wenn man auch f\u00fcr Smartphone Apps unter einer bekannten Programmiersprache und Entwicklungsumgebung schreiben k\u00f6nnte?<\/p>\n

Die Antwort lautet: GEHT! Mit DOT.NET MAUI (nachstehend .NET MAUI) bietet sich eine elegante L\u00f6sung, um Programme plattform\u00fcbergreifend unter C# zu entwickeln: f\u00fcr Android oder Apple IOS Ger\u00e4te oder f\u00fcr x86 Windows. Lesetipp: Microsoft – was ist .NET Maui<\/a><\/p>\n

<\/p>\n

Basis ist das Microsoft Visual Studio mit der .NET MAUI Erweiterung. Beides ist kostenfrei verf\u00fcgbar und kann(MS Visual Studio) direkt von der Microsoft Webseite geladen werden.<\/p>\n

Eine kleine Einschr\u00e4nkung: F\u00fcr die Entwicklung mit Apple IOS ben\u00f6tige ich einen Mac Computer oder ein Apple iPhone. Da ich beides nicht habe, interessiert mich IOS nicht und ich beschr\u00e4nke mich in der Entwicklung auf Android und x86 Windows.<\/p>\n

Wie das Ganz geht, werde ich hier erl\u00e4utern. Doch vorweg noch mal der Hinweis: Dieses ist zwar ein Grundkurs, aber ihr solltet schon etwas Grundlagenwissen haben und evtl auch schon erste Erfahrungen mit dem Visual Studio und Programmierung in C# haben. Ihr solltet auch wissen, was eine Variable ist, und dass man Zahlen in Integer und Texte in String Variablen speichert etc. Wenn euch solche Basics noch fremd sind \u2013 empfehle ich ein Grundlagenbuch f\u00fcr C#, um diese Dinge zu erlernen.<\/p>\n

Hinweis: Das YouTube Video zum Beitrag findet sich am Ende dieser Seite!<\/strong><\/span><\/p>\n

<\/a>Der Start: Projekt anlegen<\/strong><\/h3>\n

Die Ausgangsvoraussetzung: Microsoft Visual Studio 2022 und .NET MAUI installiert und gestartet. Projekt anlegen. .NET MAUI als Projektvorlage w\u00e4hlen.<\/p>\n

<\/p>\n

<\/p>\n

Was eine gute Entwicklungsumgebung ausmacht: Um das Erstellen des Projektes k\u00fcmmert sich das Studio. Wenn alles geladen ist, starte ich in der Arbeitsoberfl\u00e4che. F\u00fcr das erste Grundverst\u00e4ndnis in der .NET MAUI Welt, muss ich mir vier wichtige Dateigruppen im Projektmappen Explorer ansehen:<\/p>\n

<\/p>\n

MauiProgram.CS<\/strong><\/p>\n

Bootstrap File. Hier ist der Einstiegs Punkt f\u00fcr die Anwendung.<\/p>\n

App.XAML \/ App.XAML.CS<\/strong><\/p>\n

Hier kommen Farben, Ressourcen und anderes hinein.<\/p>\n

AppShell. XAML \/ AppShell.XAML.CS<\/strong><\/p>\n

Hierarchie Datei der App. Hier werden die verschiedenen Displays (Android: Activities) der App eingetragen und lassen sich dann in einem Men\u00fc starten.<\/p>\n

MainPage. XAML \/ MainPage.XAML.CS<\/strong><\/p>\n

Ein erstes Display (Android: erste Activity) mit dem XAML Code f\u00fcr Layout und dem C# Code f\u00fcr die Aktionen.<\/p>\n

Es ist wenig \u00fcberraschend: die XAML Dateien enthalten den XAML Code, meistens mit Layout Beschreibungen. Die CS Dateien den C# Programmcode dahinter – ich nenne das mal Code-Behind.<\/p>\n

<\/a>Das Layout – MainPage.XAML<\/strong><\/h3>\n

Die im Visual Studio jetzt standardm\u00e4\u00dfig angelegte MainPage Applikation besteht aus einem Display und ist eine Datei mit Text, einem Bild einem Button, der bei jeder Bet\u00e4tigung hoch gez\u00e4hlt wird. XAML wird verwendet, um die einzelnen Steuerelemente im Layout zu beschreiben.<\/p>\n

<ScrollView>\r\n  <VerticalStackLayout\r\n    Spacing=\"25\"\r\n    Padding=\"30,0\"\r\n    VerticalOptions=\"Center\">\r\n  <Image\r\n    Source=\"dotnet_bot.png\"\r\n    SemanticProperties.Description=\"Cute dot net bot waving hi to you!\"\r\n    HeightRequest=\"200\"\r\n    HorizontalOptions=\"Center\" \/>\r\n  <Label\r\n    Text=\"Hello, World!\"\r\n    SemanticProperties.HeadingLevel=\"Level1\"\r\n    FontSize=\"32\"\r\n    HorizontalOptions=\"Center\" \/>\r\n  <Label\r\n    Text=\"Welcome to .NET Multi-platform App UI\"\r\n    SemanticProperties.HeadingLevel=\"Level2\"\r\n    SemanticProperties.Description=\"Welcome to dot net Multi platform App U I\"\r\n    FontSize=\"18\"\r\n    HorizontalOptions=\"Center\" \/>\r\n  <Button\r\n    x:Name=\"CounterBtn\"\r\n    Text=\"Click me\"\r\n    SemanticProperties.Hint=\"Counts the number of times you click\"\r\n    Clicked=\"OnCounterClicked\"\r\n    HorizontalOptions=\"Center\" \/>\r\n  <\/VerticalStackLayout>\r\n<\/ScrollView><\/pre>\n
Mein erstes Display tr\u00e4gt also den Namen MainPage. Die Datei MainPage.XAML beinhaltet die Layout Elemente. Gekapselt in einer ScrollView: Bild, 2x Label mit verschiedenen Darstellungen und 1x Button. Button Aktion wird \u00fcber Clicked ausgel\u00f6st. Die Aktionen stehen in der CS Datei.<\/p>\n
<\/a>Der C# Programmcode – MainPage.xaml.CS<\/strong><\/h3>\n
Die XAML.CS Datei enth\u00e4lt den C# Programmcode. Im vorliegenden Fall einige vordefinierte Elemente. U.a. einen Counter, der mit jeder Button Bet\u00e4tigung hoch gez\u00e4hlt wird. Anschlie\u00dfend wird ein Text ausgegeben.<\/p>\n
namespace MauiApp2;\r\npublic partial class MainPage : ContentPage\r\n\r\n{\r\n  int count = 0;\r\n\r\n  public MainPage()\r\n  {\r\n    InitializeComponent();\r\n  }\r\n\r\n  private void OnCounterClicked(object sender, EventArgs e)\r\n  {\r\n    count++;\r\n    if (count == 1)\r\n      CounterBtn.Text = $\"Clicked {count} time\";\r\n    else\r\n      CounterBtn.Text = $\"Clicked {count} times\";\r\n    SemanticScreenReader.Announce(CounterBtn.Text);\r\n  }\r\n}<\/pre>\n
Nun k\u00f6nnen weitere Activities hinzugef\u00fcgt oder die MainPage Activitiy ge\u00e4ndert werden. Doch bevor ich das tue, will ich einen kleinen Exkurs einschieben:<\/p>\n
<\/a>Meine Programme plappern: Debug Meldungen zur Laufzeit<\/strong><\/h3>\n
In meiner Programmierung immer gerne gesehen: ich will zur Laufzeit irgendwelche Werte oder Variablen sehen, um das Programmverhalten zu pr\u00fcfen.\u00a0In gewohnter Form bietet mit DOT NET MAUI hierf\u00fcr einfache L\u00f6sungen etwas ins Ausgabefenster von Visual Studio zu bekommen:<\/p>\n
System.Diagnostics.Debug.WriteLine(\"Button Clear used\");<\/pre>\n
oder<\/p>\n
Console.WriteLine(\"Etwas ist geschehen!\");<\/pre>\n
Beides sieht im Ausgabefenster dann so aus:<\/p>\n
<\/p>\n
<\/a>Infos f\u00fcr den Benutzer – Toast Meldungen<\/strong><\/h3>\n
Toast Meldungen unter Android sind kleine Sprechblasen in denen Hinweistexte f\u00fcr den Benutzer angezeigt werden. Unter Windows gibt es die auch. Dort werden sie in der Ecke der Taskleiste angezeigt. Merkmal von Toast Meldungen: Sie bleiben nur f\u00fcr eine kurze Zeit im Display und verschwinden dann in der Regel selbst\u00e4ndig. Die Dinger finde ich ungemein praktisch, wenn ich dem Benutzer irgendwelche Informationen liefern will, z.b. dass ein Speichervorgang abgeschlossen wurde.<\/p>\n
Wichtig zu wissen: eine Toast Meldung h\u00e4lt das Programm NICHT an, sondern die Software l\u00e4uft in der Zwischenzeit weiter. Sie sind damit nicht vergleichbar mit Messageboxen unter Windows, bei denen die Anwendung solange stoppt, bis der Benutzer eine Taste bet\u00e4tigt und die Meldung manuell weg klickt! Das ist an dieser Stelle noch nicht wirklich wichtig. Es erlangt aber dann Bedeutung, wenn Ihr Abfragen bastelt wie: Daten l\u00f6schen Ja \/ Nein. Wenn das Programm schon weiter l\u00e4uft, w\u00e4hrend die Abfrage dargestellt wird und Ihr die Daten emsig in den Papierkorb haut, bevor der Benutzer eine Taste bet\u00e4tigt hat, ist es irgendwie doof. Toast Meldungen halten die Software also nicht an, sondern sind nur Infotexte. Und es darf in meiner Software auch nichts Gravierendes geschehen, wenn der Benutzer den Infotext verpasst!<\/p>\n
<\/a>Community Package<\/strong><\/h3>\n
Damit wir Toast Meldungen unter DOT Net MAUI sehen k\u00f6nnen, muss zuerst das Community Package mit allerlei n\u00fctzlichen Android Features geladen und in der App installiert werden. Die MS Dokumentation befindet sich hier:<\/p>\n
https:\/\/learn.microsoft.com\/de-de\/dotnet\/communitytoolkit\/maui\/get-started?tabs=CommunityToolkitMaui<\/a><\/p>\n
Die Schritte:<\/strong><\/p>\n
Zuerst via NuGet-Pakete verwalten das Community Package laden und installieren!<\/p>\n
<\/p>\n
<\/p>\n
Gezielt nach Community Toolkit . MAUI suchen!<\/strong><\/p>\n
Wichtig: Bei der Wahl der Version muss ich ein Paket ausw\u00e4hlen, das in den Abh\u00e4ngigkeiten zum aktuell verwendeten .NET meines Projektes passt. Die .NET Version meines Projektes habe ich beim Erstellen des Projektes angegeben \u2013 in meinen Fall war das .NET 7. Aso w\u00e4hle ich ein CommunityToolkit.MAUI das .NET 7 supported! Standardm\u00e4\u00dfig wird mir gerade ein Package angeboten, die allerdings nur .NET 8 unterst\u00fctzt. Beim Versuch das zu installieren, gibt es haufenweise Fehlermeldungen!<\/p>\n
<\/p>\n
Wenn das Paket installiert wurde: anschlie\u00dfend in Maui.Programm.cs das Paket eintragen:<\/p>\n
– in der using Zeile2<\/p>\n
– in Zeile13: .UseMauCommunityToolkit()<\/p>\n
<\/p>\n
Jetzt kann ich in meiner Anwendung eine Toast Meldung f\u00fcr den Benutzer aufrufen, wenn der Button gedr\u00fcckt wird. Allerdings muss die Methode auf async gesetzt werden. Der Aufruf im einfachsten Fall:<\/p>\n
async private void SavebtnClicked(object sender, EventArgs e)\r\n{\r\n  \/\/ Save the file.\r\n  File.WriteAllText(_fileName, TextEditor.Text);\r\n  await Toast.Make(\"Gespeichert\").Show();\r\n}<\/pre>\n
<\/a>Ein weiteres Display: Mini Mini Editor<\/strong><\/h3>\n
Ich will die erste App erweitern. In Anlehnung an die Microsoft Dokumentation zum .NET MAUI bastele ich eine kleine Anwendung um einen Mini Editor zu schaffen, mit dem ich Text eingeben und speichern kann. \u00dcber Projektmappen Explorer, Projektname \u2013 Rechte Maustaste w\u00e4hle ich Hinzuf\u00fcgen \u2013 Neues Element:<\/p>\n
<\/p>\n
Ich w\u00e4hle eine XAML Content Page und nennen sie MiniEditor.XAML. Die XAML und die zugeh\u00f6rige CS Datei werden im Projektmappen Explorer angelegt und angezeigt:<\/p>\n
<\/p>\n
Die Layout Datei MiniEditor.XAML<\/h3>\n
In der XAML Datei hinterlege ich ein Label als \u00dcberschrift, einen Editor als Eingabeelement und vier Buttons nebeneinander in einem Grid. Die Buttons werden \u00fcber die Eigenschaft CLICKED ausgewertet. Der Code hierf\u00fcr wird in der CS Datei eingetragen.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\" ?>\r\n<ContentPage xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\r\n  xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\r\n  x:Class=\"MauiApp1.MiniEditor\"\r\n  Title=\"MiniEditor\">\r\n\r\n  <VerticalStackLayout>\r\n    <Label\r\n      Text=\"Mein kleiner .NET MAUI Editor\"\r\n      VerticalOptions=\"Center\"\r\n      HorizontalOptions=\"Center\" \/>\r\n\r\n    <Editor x:Name=\"TextEditor\"\r\n      Placeholder=\"Namen eingeben\"\r\n      HeightRequest=\"200\" \/>\r\n\r\n    <Grid ColumnDefinitions=\"*,*,*,*\" ColumnSpacing=\"4\">\r\n      <Button Text=\"Save\"\r\n        Clicked=\"SavebtnClicked\"\/>\r\n  \r\n      <Button Grid.Column=\"1\"\r\n        Text=\"Clear\"\r\n        Clicked=\"ClearbtnClicked\"\r\n      \/>\r\n\r\n      <Button Grid.Column=\"2\"\r\n        Text=\"Destroy\"\r\n        Clicked=\"DestroybtnClicked\"\/>\r\n\r\n      <Button Grid.Column=\"3\"\r\n        Text=\"Load\"\r\n        Clicked=\"LoadbtnClicked\"\/>\r\n    <\/Grid>\r\n  <\/VerticalStackLayout>\r\n<\/ContentPage><\/pre>\n
<\/a>Die CS Datei<\/strong><\/h3>\n
Die CS Datei enth\u00e4lt die Click Methoden f\u00fcr die vier Buttons. In allen F\u00e4llen werden einfach verst\u00e4ndliche Standardroutinen aufgerufen, so dass ich mir deren Erkl\u00e4rung hier erspare.<\/p>\n
using CommunityToolkit.Maui.Alerts;\r\nnamespace MauiApp1;\r\n\r\n\/\/-------------------------------------------------------------------------------\u00b4\u00b4\r\n\r\npublic partial class MiniEditor : ContentPage\r\n{\r\n  string _fileName = Path.Combine(FileSystem.AppDataDirectory, \"MiniEditor.txt\");\r\n\r\n  public MiniEditor()\r\n  {\r\n    InitializeComponent();\r\n  }\r\n\r\n\/\/-------------------------------------------------------------------------------\u00b4\u00b4\r\nprivate void ClearbtnClicked(object sender, EventArgs e)\r\n{\r\n  TextEditor.Text = string.Empty;\r\n}\r\n\r\n\/\/-------------------------------------------------------------------------------\u00b4\u00b4\r\nasync private void SavebtnClicked(object sender, EventArgs e)\r\n{\r\n  \/\/ Save the file.\r\n  File.WriteAllText(_fileName, TextEditor.Text);\r\n  await Toast.Make(\"Gespeichert\").Show();\r\n}\r\n\r\n\/\/-------------------------------------------------------------------------------\u00b4\u00b4\r\nprivate void DestroybtnClicked(object sender, EventArgs e)\r\n{\r\n  \/\/ Delete the file.\r\n  if (File.Exists(_fileName))\r\n    File.Delete(_fileName);\r\n  TextEditor.Text = string.Empty;\r\n}\r\n\r\n\/\/-------------------------------------------------------------------------------\u00b4\u00b4\r\nprivate void LoadbtnClicked(object sender, EventArgs e)\r\n{\r\n  if (File.Exists(_fileName))\r\n    TextEditor.Text = File.ReadAllText(_fileName);\r\n\r\n  Console.WriteLine(\"Etwas ist geschehen!\");\r\n\r\n  }\r\n}<\/pre>\n
<\/a>Im Men\u00fc eintragen: AppShell.XAML<\/strong><\/h3>\n
Damit das Ganze mit beiden Displays sichtbar ist, erweitere ich die AppShell.XAML Datei um eine TabBar und trage beide Displays dort ein. Die TabBar schenkt mir ein Men\u00fc, aus dem heraus ich beide Displays starten kann.<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\r\n<Shell\r\n  x:Class=\"MauiApp1.AppShell\"\r\n   xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\r\n   xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\r\n   xmlns:local=\"clr-namespace:MauiApp1\"\r\n   Shell.FlyoutBehavior=\"Disabled\">\r\n   <TabBar>\r\n      <ShellContent\r\n        Title=\"Home\"\r\n        ContentTemplate=\"{DataTemplate local:MainPage}\"\r\n        Route=\"MainPage\" \/>\r\n\r\n    ShellContent\r\n        Title=\"Mini Editor\"\r\n        ContentTemplate=\"{DataTemplate local:MiniEditor}\">\r\n    <\/ShellContent>\r\n  <\/TabBar>\r\n<\/Shell><\/pre>\n
<\/a>App ausprobieren \u2013 im Android Simulator<\/strong><\/h3>\n
<\/a>Ger\u00e4te Manager \u00f6ffnen \u2013 Device starten<\/strong><\/h3>\n
Ich \u00f6ffne den Ger\u00e4te Manager und starte ein bereits angelegtes Ger\u00e4t, in diesem Fall das Pixel 7 mit API 33.<\/p>\n
<\/p>\n
<\/p>\n
Anschlie\u00dfend lasse ich mir den Debug Build bauen und auf dem ausgew\u00e4hlten Device laufen:<\/p>\n
<\/p>\n
Das Ganze schaut dann so aus und wir haben ein Auswahlmen\u00fc bekommen in der ich zwischen den beiden Screens hin- und herschalten kann. Im Fall von Android befindet sich das Men\u00fc unten am Displayrand.<\/p>\n
 <\/p>\n
<\/a>App ausprobieren \u2013 unter Windows<\/strong><\/h3>\n
Um zu sehen, wie die App unter Windows aussieht, \u00e4ndere ich das Zielsystem auf Windows Machine und starte den Debug Vorgang.<\/p>\n
<\/p>\n
Auch hier erhalte ich zwei Displays und das Men\u00fc steht dieses Mail oben. Ich kann die App unter x86 Windows genauso bedienen wie auf dem Android Simulator.<\/p>\n
<\/p>\n
<\/p>\n
<\/a>Steuerelemente und M\u00f6glichkeiten<\/strong><\/h3>\n
Steuerelemente werden unter .NET MAUI nicht Controls, sondern Views genannt. Hier nur in der \u00dcbersicht. Weitere Details werde ich nach Bedarf nachtragen.<\/p>\n
Gr\u00f6\u00dfe und Position<\/strong><\/p>\n
Werden mit HeightRequest und WidthRequest angegeben!<\/p>\n
Zugriff<\/strong><\/p>\n
Ben\u00f6tigt x:Name = \u201exxxxx\u201c. Dann Zugriff \u00fcber xxxxx m\u00f6glich!<\/p>\n
Label<\/strong><\/p>\n
Dient der Darstellung von Text. Kann mit diversen Attributen versehen werden. Einfaches HTML ist m\u00f6glich. F\u00fcr komplexes HTML aber WebView verwenden!<\/p>\n
WebView<\/strong><\/p>\n
Kann komplette HTML Dokumente ausgeben<\/p>\n
ActivityIndicator<\/strong><\/p>\n
Info f\u00fcr den Benutzer, das etwas geschieht. Beispiel: ActivityIndicator1.IsRunning = true;<\/p>\n
ProgressBar<\/strong><\/p>\n
Info f\u00fcr den Benutzer \u00fcber einen laufenden Vorgang.<\/p>\n
Border \/ Shadow \/ Shapes<\/strong><\/p>\n
Rahmen um ein View. Schatten. Diverse Formen.<\/p>\n
Texteingaben Entry \/ Editor<\/strong><\/p>\n
Entry einzeilig. Editor mehrzeilige Eingaben.<\/p>\n
Button<\/strong><\/p>\n
Abfrage \u00fcber Eigenschaft CLICKED im xaml Code oder im Code Behind durch Konstruktor.<\/p>\n
Dazu die \u00fcblichen Verd\u00e4chtigen:<\/p>\n
RadioButton, CheckBox, Switch, Picker mit DatePicker \/ TimePicker<\/p>\n
<\/a>Die Sache mit der Datenbindung<\/strong><\/h3>\n
In der Standardprogrammierung werden Im XAML Code die Steuerelemente untergebracht, in der CS Datei als Code-Behind werden die Ereignisse definiert. Dieses Verfahren kann bei umfangreichen Programmen un\u00fcbersichtlich werden, so dass man ein Model-View-View Modell und eine Datenbindung einsetzt. Dieses Modell besteht aus den Komponenten:<\/p>\n
View<\/strong><\/p>\n
In der View werden die reinen Steuerelemente untergebracht<\/p>\n
ViewModel<\/strong><\/p>\n
Hier werden die Daten f\u00fcr die View bereitgestellt<\/p>\n
Model<\/strong><\/p>\n
Kapselt und verarbeitet die Daten. Hat aber keine Kenntnis von der View oder vom ViewModel.<\/p>\n
Umfangreiche Dokumentation findet sich im Internet. Ich werde mich hier zuerst einmal auf Apps mit XAML und Code-Behind CS Dateien beschr\u00e4nken und die Datenbindung in einem sp\u00e4teren Teil vertiefen.<\/p>\n
\n
Das Video zum Thema:<\/p>\n