Programmierung einer Windows Store App mit C# und XAML

Transkript

1 Neuer Abschnitt 1 Seite 1 Programmierung einer Windows Store App mit C# und XAML Einleitung In diesem Fachbericht der im Rahmen meines 8 Wochen langem Praktikums entstand geht es um die Programmierung von Windows Store Apps, die,man auf Windows 8 Geräten verwendet. Ich schreibe über dieses Thema, da ich in meinem Praktikum eine solche App programmiert habe und mich somit in dieses Thema und die beiden verwendeten Sprachen eingearbeitet habe. C# und XAML Vorerst möchte ich etwas zu den beiden verwendeten Sprachen, C# und XAML sagen. C# ist eine Programmiersprache die von Microsoft für den.net Bereich entwickelt wurde und Konzepte von verschiedenen Programmiersprachen, wie Java, C++, C, und Delphi aufgreift. C# zählt ebenfalls wie C++ zu den objektorientierten Programmiersprachen und wird bei der Programmierung der Windows Store Apps neben C++ und Visual Basic für die Umsetzung der Logik verwendet. Die andere von mir verwendete Sprache, XAML oder auch Extensible Application Markup Language, ist eine, wie der Name schon vermuten lässt, Markup Language die zur Gestaltung der App Oberflächen genutzt wird. XAML wurde ebenfalls von Microsoft entwickelt und basiert auf XML. Windows Store Apps Windows Store Apps können aus dem Windows Store heruntergeladen werden und in der Metro Oberfläche, die auf allen Geräten die Windows 8 oder Windows 8.1 verwenden vorhanden ist, gestartet werden. Um Windows Store Apps zu programmieren muss jedoch vorerst eine kostenlose Entwicklerlizenz über das Microsoft Konto angefordert werden. Grundlagen der Programmierung von Windows Store Apps Allgemeine Architektur In diesem Abschnitt gehe ich näher auf die Architektur von Windows Store Apps ein und beschreibe anhand dieser Projektmappe die standardmäßige Dateistruktur einer solchen App.

2 Neuer Abschnitt 1 Seite 2 Die erste Datei in dem Solution Explorer ist die AssemblyInfo.cs die unter Properties liegt. Da diese Datei die Endung.cs hat handelt es sich um eine Codebehind-Datei der Properties. In den Properties kann man Standartnamespaces festlegen oder zum Beispiel den Namen der Anwendung ändern. Diese werden dann in der Codebehind-Datei eingetragen. Im nächsten Abschnitt unter Verweise findet man Verweise auf verschiedene Erweiterungen. Diese Erweiterungen können zum Beispiel Steuerelemente enthalten oder erweiterte Designmöglichkeiten. In dem Ordner Assets sind Bilder enthalten die zum Beispiel das Logo der App in der Metro Oberfläche festlegen. Ebenfalls werden hier Bilder die in der App verwendet werden abgelegt. Die Dateien mit dem ich mich in diesem Fachbericht hauptsächlich beschäftigen werde sind die MainPage.xaml, in der die Oberfläche erstellt wird, und die MainPage.xaml.cs, in der die Logik mithilfe von C# realisiert wird. Oberflächen Elemente XAML bietet verschiedene Oberflächenelemente die verschiedene Funktionalitäten erfüllen. Zum einen gibt es typische Elemente wie zum Beispiel Textboxen, Buttons, Checkboxen und vieles mehr. Zum anderen gibt es aber auch nicht so häufig verwendete Elemente wie den Slider der eine Scroll Leiste darstellt oder das Grid das mehrere Elemente zusammenfügt. Dies dient zum einem der Übersicht jedoch kann man dadurch auch alle untergeordneten Elemente mithilfe eines Befehls in der Codebehind ansprechen. Dieser könnte zum Beispiel so aussehen: Grids.Children.Clear();

3 Neuer Abschnitt 1 Seite 3 Grids.Children.Clear(); Dieser Code würde sobald er aufgerufen wird jedes Element oder auch Children eines Grids löschen. Events Eine weitere Möglichkeit die XAML bietet ist das Hinzufügen eines Events zu einem Element. In Visual Studio hat man 2 Möglichkeiten dies Umzusetzen, zum einen im XAML Code oder in dem Eigenschaftenfenster des Elements. Da Zweiteres langweilig wäre zeige ich hier nur die erste, meiner Meinung nach schnellere und bessere, Methode. Im XAML Markup wird für jedes Element eine Zeile angelegt. Für ein Button wäre dies zum Beispiel <Button x:name="buttonname" \>. Diese Zeile kann man nun beliebig erweitern zum Beispiel mit Content="ButtonInhalt" oder Margin="0,0,0,0". Diese Befehle legen den Inhalt des Buttons fest der Später in der Anwendung angezeigt wird und Richten in diesem Falle den Button mit 0 Pixeln Abstand zu jeder Seite aus was in diesem Falle einen ganzseitigen Button entsprechen würde. Das Event über das ich eigentlich schreiben wollte fügt man zum Beispiel mit dem Befehl Click="ClickEventName" hinzu. Durch diesen Befehl führt die Anwendung bei jedem Click auf den Button das Click Event, welches in der Codebehind realisiert wird, aus. Natürlich gibt es auch andere Eventhandler wie zum Beispiel Holding welches ein Event beim Halten eines Buttons auslöst. Events in der Codebehind private void Button_1_Click(object sender, RoutedEventArgs e) Ausgabe.Text += "1"; So sieht zum Beispiel ein Event in der Codebehind aus. Zuerst wird eine neue Funktion ohne Rückgabewert erstellt. Es ist wichtig das die Funktion den gleichen Namen hat wie der vorher festgelegte Eventhandler ansonsten kann der Compiler die Funktion nicht zuordnen. Die Beiden Übergabewerte werden standartmäßig übergeben sind jedoch in diesem Beispiel nicht von Nutzen und übergeben lediglich Informationen über das Element, im späteren Verlauf des Berichtes wird von mir das Objekt sender benutzt um den Inhalt des Buttons auszulesen, mehr dazu später. In den geschweiften Klammern verbirgt sich die Logik des Events. In diesem Falle wird dem Text einer Textbox mit dem Name Ausgabe eine 1 hinzugefügt. Nachdem man weiß wie man Elementen ein Eventhandler hinzufügt kann man mit der ersten Anwendung beginnen. Die erste App Um was für eine App handelt es sich? In diesem Kapitel erkläre ich wie man einen einfachen Taschenrechner, den ich während meiner Einarbeitungsphase in meinem Praktikum erstellt habe, in Form einer Windows Store App erstellen kann. Die App soll wie ein einfacher Taschenrechner funktionieren und zwei Zahlen zusammenrechnen. Mit dem Ergebnis soll danach natürlich ebenfalls weitergerechnet werden können.

4 Neuer Abschnitt 1 Seite 4 weitergerechnet werden können. Zusätzlich soll der Taschenrechner mehrere Funktionen aufweisen wie zum Beispiel eine Wurzelfunktion oder eine Delete Funktion die das letzte Zeichen löscht Die Oberfläche Dies ist die Oberfläche des Taschenrechners den ich in den folgenden Abschnitten erklären werde. Das XAML Markup Da es deutlich zu viel wäre jede einzelne Zeile des Markups zu erklären, werde ich in dem folgendem Abschnitt die einzelnen Markupzeilen für die verschiedenen Elemente erklären. <Button x:name="button_3" Content="3" HorizontalAlignment="Left" Height="74" Margin="386,136,0,0" Grid.Row="1" VerticalAlignment="Top" Width="108" Click="Button_Zahl_Click"/> Dieses Markup initialisiert zum Beispiel einen Button mit dem Inhalt 3 der durch "Content="3"" festgelegt wird. Der Inhalt wird später auf dem Button angezeigt. Der Rest in dieser Zeile legt die Ausrichtung und Form des Buttons fest, bis auf Click=" ". Durch "Click" wird, wie im Abschnitt Events schon beschrieben, ein Event festgelegt welches ich im späterem Verlauf vorstellen werden. Diesen Button kann man nun mit abweichendem Event, Name und Inhalt erstellen bis man alle benötigten Buttons zusammen hat. Für eine Vernünftige Ausgabe des Ergebnisses muss noch ein "TextBlock" erstellt werden. Dies habe ich in diesem Fall so gelöst: <TextBlock x:name="ausgabe" HorizontalAlignment="Left" Height="64" Margin="126,32,0,0" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Top" Width="586" Foreground="#FFEEE1E1" FontSize="48"/> Für diesen Text Block muss kein Event festgelegt werden, somit wird lediglich Ausrichtung und Aussehen der Schrift definiert und dem Element ein Name gegeben. In diesem Falle ist es wichtig dem Element auch einen Namen zuzuordnen damit man es

5 Neuer Abschnitt 1 Seite 5 In diesem Falle ist es wichtig dem Element auch einen Namen zuzuordnen damit man es später in der Codebehind auch ansprechen kann. Somit hätte man alle wichtigen Elemente erstellt und kann nun die Logik für das Programm entwickeln. Der C# Code In diesem Abschnitt werde ich die Logik des Taschenrechners genauer erklären. Als erstes fange ich mit den Nummernblock an. Der Code für diesen Nummernblock sieht folgender maßen aus: private void Button_Zahl_Click(object sender, RoutedEventArgs e) Ausgabe.Text += (string)((button)sender).content; In dieser Funktion wird dem Textblock Ausgabe mithilfe einer Operatorüberladung der Aktuelle Content also der Inhalt des geklickten Buttons hinzugefügt. Ausgabe.Text beschreibt hier den Text der in dem Textblock steht. Diesem wird durch die Operatoren "+=",die dem ursprünglichem Text ein Zeichen oder einen String hinzufügen, der Inhalt des aktuellen Buttons als String hinzugefügt. Der Inhalt des aktuellen Buttons wird durch ((Button)sender).Content angesprochen und durch (string) als String festgelegt. Somit wird dem Ausgabestring die im Content enthaltende Zahl hinzugefügt. Nun erkläre ich anhand des folgenden Codes wie Operatoren hinzugefügt werden und was dabei alles passiert. private void Button_Min_Click(object sender, RoutedEventArgs e) zahl_1 = Convert.ToDouble(Ausgabe.Text); Ausgabe.Text = String.Empty; oper += "-"; In dieser Funktion wird der aktuelle String zu einem Double-Wert konvertiert und in der variable zahl_1 abgespeichert. Hiernach wird der Ausgabestring gelöscht bzw. geleert durch String.Empty und die Variable oper wird gleich "-" gesetzt. Dies geschieht jedoch nur wenn die Länge des Ausgabestrings größer als Eins ist da die Anwendung sonst auf einen Fehler laufen würde und abstürzt. Der Fehler entsteht dadurch das in Ausgabe.Text kein Wert vorhanden ist und Convert.ToDouble somit auf einen Fehler verursacht weil die Konvertierung fehlschlägt. Die anderen Operatoren werden ebenso behandelt nur das in der Variable ein anderer Wert eingespeichert wird. Das Event das beide Zahlen zusammenrechnet wird durch einen Klick auf den Button mit dem Gleichheitszeichen ausgelöst und sieht folgendermaßen aus: private void Button_Gleich_Click(object sender, RoutedEventArgs e) zahl_2 = Convert.ToDouble(Ausgabe.Text);

6 Neuer Abschnitt 1 Seite 6 if (oper == "+") Ausgabe.Text = Convert.ToString(zahl_1 + zahl_2); zahl_1 = zahl_2 + zahl_1; if (oper == "-") Ausgabe.Text = Convert.ToString(zahl_1 - zahl_2); zahl_1 = zahl_2 - zahl_1; if (oper == "*") Ausgabe.Text = Convert.ToString(zahl_1 * zahl_2); zahl_1 = zahl_2 * zahl_1; if (oper == "/" && zahl_2!=0) Ausgabe.Text = Convert.ToString(zahl_1 / zahl_2); zahl_1 = zahl_2 / zahl_1; if (oper == "/" && zahl_2 == 0) Errorfield.Text="Error"; In diesem Event wird zuerst überprüft ob etwas in dem String steht der später in Zahl 2 abgespeichert werden soll da die Anwendung sonst auf den vorhin erklärten Fehler laufen würde. Danach wird der aktuelle Ausgabestring in zahl_2 abgespeichert und überprüft welcher Operator ausgewählt wurde. Je nachdem welche Auswahl getroffen wurde werden die beiden Zahlen zusammengerechnet und der Ausgabestring wird mit dem Ergebnis der Rechnung überschrieben, somit erscheint die Lösung in dem Textblock. Um eine Falscheingabe anzuzeigen habe ich im XAML- Markup ein weiteren Textblock hinzugefügt in dem Error angezeigt wird sobald durch 0 geteilt wird. Am Ende des Events wird nun das Ergebnis in der Variable Zahl_1 abgespeichert damit mit dem Ergebnis weitergerechnet werden kann. Damit hätte ich bis hierhin die Grundfunktionen des Taschenrechners erklärt, fehlen also noch die zusätzlichen Funktionen. Zum einen wäre da die Wurzelfunktion in ihr wird lediglich die Wurzel aus dem aktuellem

7 Neuer Abschnitt 1 Seite 7 Zum einen wäre da die Wurzelfunktion in ihr wird lediglich die Wurzel aus dem aktuellem Ausgabestringwert gezogen und ausgegeben hierbei wird diese kurzzeitig zu einem Double-Wert konvertiert und danach wieder zu einem String da ein Textblock nur Strings verarbeiten kann. private void Button_Click_2(object sender, RoutedEventArgs e) Ausgabe.Text = (Convert.ToString(Math.Sqrt(Convert.ToInt32(Ausgabe.Text)))); Die nächste Funktion die ich erklären möchte ist die Deletefunktion die das letzte Zeichen löscht. Da ich Zeit und Nerven sparen wollte habe ich es mit bereits vorhandenen Funktionen realisiert. private void Button_Click_1(object sender, RoutedEventArgs e) Ausgabe.Text = Ausgabe.Text.Remove(Ausgabe.Text.Length - 1); Diese Funktion löscht den letzten Wert aus dem String und verkürzt ihn somit um 1 Zeichen. Schlusswort In diesem Praktikum habe ich viel an Apps gearbeitet und dabei viel gelernt, leider konnte ich mein Hauptarbeitswerk aus rechtlichen Gründen nicht verwenden und musste diesen Bericht leider auf dem Taschenrechner beruhen lassen. Ich hoffe das dieser Bericht dadurch nicht weniger informativ ist und einen guten Einblick in die Programmierung von Windows Store Apps verschafft.