[Schumi’s Entwicklerwerkstatt] – Wie programmiere ich für Windows 10: Erste Schritte

 

*Support und Fragen für unsere spannende Serie, gibt es bei uns im FORUM. Schaut vorbei, Schumi, unser Forenteam und die Community kümmern sich um euch 🙂 *

Wie programmiere ich für Windows 10? In dieser kleinen Reihe werde ich versuchen, einen Einstieg in die Entwicklung von Apps für Windows 10 anzubieten – eine Anleitung oder Leitfaden, wenn ihr es so nennen mögt. Wer bereits Programmier-Erfahrung hat, ist hier genauso angesprochen wie die, die noch nie eine Zeile Code geschrieben haben, irgendwo muss man ja schließlich anfangen 😉

“Ich” ist an dieser Stelle Sebastian, einigen auch eher bekannt als schumi1331. Ich habe zu Schulzeiten mit dem Programmieren angefangen, schnell die Leidenschaft in mobilen Anwendungen gefunden und nach den ersten Jahren mit Symbian trieb mich die Kamera des Lumia 1020 zu Windows Phone und nun Windows 10 😉 Manch einer wird mich vielleicht durch die inoffizielle eBay Kleinanzeigen-App Kleine Anzeigen oder die Formel 1-App PitlaneOne kennen…

Im ersten Teil geht es nun erst einmal um die Installation der benötigten Software und eine erste Einführung in die Konzepte von XAML und C#. Zum Programmieren für Windows 10 ist eine installierte Version des Betriebssystems notwendig, mehr Vorkenntnisse brauchen wir nicht (von grundlegenden PC-Kenntnissen mal abgesehen).

---

 

Visual Studio: Die Installation

Um den Programmcode zu schreiben und später in Maschinencode umzuwandeln benötigen wir eine Entwicklungsumgebung, für Windows ist dies Visual Studio. Die Community-Version ist kostenlos über die Microsoft-Webseite erhältlich und reicht für unsere Zwecke vollkommen aus. Nach dem Herunterladen des Web-Installers beginnt die eigentliche Installation. Im Funktionen-Auswahlfenster sollte auf jeden Fall der Punkt Entwicklungstools für universelle Windows-Apps ausgewählt sein (dies erfordert auch die Installation der Allgemeinen Tools für Visual C++ 2015, welche automatisch mitausgewählt werden):

Dieser Screenshot entstammt aus der Enterprise-Version und schaut bei der Community-Installation womöglich anders aus, der zu installierende Punkt ist aber gleich. Je nach Auswahl erfordert das Setup insgesamt bis zu 20 Gigabyte an Speicher und kann je nach Internet-Geschwindigkeit und Festplatte bis zu zwei Stunden dauern – Geduld ist eine Tugend 😉

Nach der Fertigstellung der Installation folgt optional die Installation des englischen Sprach-Pakets, welches hier zu finden ist (die Sprach-Einstellung erfolgt in Visual Studio über Extras > Optionen > Internationale Einstellungen). Wie bereits erwähnt, ist dieser Schritt optional, da die meisten Foren, Tutorials, etc. auf Englisch sind, ist es sinnvoll, auch mit den entsprechenden Begriffen tagtäglich zu arbeiten. Nachfolgende Screenshots werden deshalb auch mit der englischen Version gemacht (über den Link gibt es VS 2015 auch direkt auf Englisch, wer die deutsche Version nicht benötigt).

Das erste Projekt

Nun können wir Visual Studio zum ersten Mal starten und etwas damit herumspielen. Die vielen Funktionen und Schaltflächen mögen zu Beginn etwas abschreckend sein, doch das legt sich mit der Zeit und viele Sachen werden auch nur selten benötigt. Um die Oberfläche im Produktivbetrieb zu sehen, erstellen wir nun erst einmal über den Explorer einen Projektordner, in dem wir alle unsere Projekte speichern werden. Für diese Reihe sei das zum Beispiel Dokumente/WindowsUnited.

Anschließend erstellen wir unser erstes Projekt, entweder über „New Project…“ auf der linken Seite oder über File > New > Project…. Links finden wir unter den Templates > Visual C# > Windows den Punkt Universal, woraufhin wir folgende Projektarten zur Auswahl finden, unter anderem Blank App (Universal Windows), welche wir auch auswählen. Darüber hinaus legen wir unten den Namen fest (hier: FirstCounter) und wählen als Location den Projektordner, welchen wir weiter oben erstellt haben. Der automatisch gesetzte Haken bei Create directory for solution sorgt dafür, dass im Projektordner ein Ordner für das Projekt selbst erstellt wird. Fertig sollte das Fenster nun so aussehen:

Nach dem Erstellen sollte das Fenster nun in vier Bereiche geteilt sein. Automatisch geöffnet wurde im größten Fenster die Datei App.xaml.cs, darunter finden wir die Error List, die uns Fehler und Warnungen im Code anzeigt, rechts den Solution Explorer zum Verwalten aller Dateien des Projekts und darunter wiederum die Properties. Dieser Bereich ist aktuell noch leer, hier gibt es später Einstellungen zu unterschiedlichen Objekten, was insbesondere bei der Erstellung der Benutzeroberfläche von Bedeutung sein wird (sollte einer der Bereiche nicht vorhanden sein, lässt er sich über View in die Oberfläche miteinbinden).

Schauen wir uns nun mal die von Visual Studio erstellten Dateien für das Projekt einmal im Solution Explorer genauer an:

• Unter References finden wir Verweise zu Bibliotheken (Libraries), die für unser Projekt benötigt werden. Die wichtigste gerade ist Universal Windows mit allem, was wir im Laufe der nächsten Zeit an Funktionalität benötigen und verwenden werden. Wir werden später auch eigene Libraries erstellen.
• Unter Assets finden wir unterschiedliche Grafiken unserer App, für Live Tiles, den Splash-Screen, das App-Icon und das Store-Logo.
• Die Datei App.xaml beinhaltet den Programmcode, der beim Start der App ausgeführt wird. Klickt man auf das kleine Dreieck neben dem Dateinamen öffnet sich ein Verweis zur dazu verknüpften App.xaml.cs (cs für C Sharp => C#). Ich hatte oben bereits XAML und C# erwähnt, die beiden Programmier-/Designsprachen, die wir nachfolgend verwenden werden. Dabei definiert XAML das Aussehen der Oberfläche und C# die Funktionalität dahinter. Durch die Verknüpfung der .xaml– und der .xaml.cs-Datei wird die Verbindung zwischen beidem umgesetzt.
• Die Datei MainPage.xaml (samt verknüpfter MainPage.xaml.cs) ist die erste Seite, die beim Start der App aufgerufen wird und die, die wir gleich bearbeiten werden.
• In der Package.appxmanifest befinden sich unter anderem Einstellungen, wie die App im Store erscheint, welche Rechte sie hat, etc.

Wir wollen diesen ersten Rundgang mit einem fundamentalen Schritt abschließen, nämlich dem Starten der App. Dazu dient im oberen Bereich des Visual Studio-Fensters der Button, der mit einem grünen Pfeil aus der Menge hervorsticht:

Sollte neben dem Pfeil bereits Local Machine stehen, können wir durch Klick auf diesen Button die App auf unserem PC starten. Das oben markierte linke Auswahlfeld stellt ein, ob die Anwendung im Debug- oder Release-Modus ausgeführt werden soll. Im Debug-Modus ist die Fehlersuche einfacher und besser möglich, weshalb wir diesen nachfolgend immer aktiv haben.

Im Auswahlfeld daneben lässt sich die Prozessorart einstellen, für die unser Code in Maschinencode umgewandelt (kompiliert) werden soll. Zur Auswahl stehen hier x86 (32 bit-Desktopsysteme), x64 (64 bit-Desktopsysteme) und ARM (mobile Prozessoren). Abhängig davon werden auch die Optionen neben dem „magischen grünen Play-Icon“ angepasst, denn für ARM kompilierte Programme können nicht auf x86- oder x64-Prozessoren ausgeführt werden (dies genau anders herum ist die Ursache, warum gewöhnliche x86-/x64-Programme nicht auf einem Surface RT (mit ARM-Prozessor) ausgeführt werden konnten).

Wählt man hier ARM und Device aus, lässt sich die App auf dem eigenen Windows 10 Mobile-Smartphone installieren und testen, sofern dieses als Entwicklergerät aktiviert wurde (worauf ich hier aber gerade nicht eingehe).

Für uns soll x86 oder x64 und Local Machine aber ausreichen. Haben wir alles richtig gemacht, öffnet sich nun ein weißes Fenster mit nichts weiter drin – schließlich haben wir ja noch nichts programmiert 😉

Unsere erste Benutzeroberfläche

Nachfolgend wollen wir die FirstCounter-App um die Funktionalität erweitern, die der Name der App andeutet: Einen Zähler, um zum Beispiel Besucher am Eingang zählen zu können und dies auf der Oberfläche darstellen zu können. Dazu werden wir nachfolgend erst die MainPage.xaml bearbeiten und die Benutzeroberfläche erstellen. Ganz simpel soll der Nutzer einen Button haben, um den Zähler zu erhöhen und einen Text-Bereich, in dem der aktuelle Wert des Zählers angezeigt wird.

Öffnen wir nun einmal die MainPage.xaml, sehen wir zwei Bereiche. Eine (die obere) zeigt die Oberfläche, wie sie aussehen wird (der Designer) und die zweite den XAML-Code. Auf den ersten Blick hat dieser eine Ähnlichkeit mit XML: Ein Objekt wird durch einen öffnenden und einen schließenden Tag definiert, hier <Page></Page>, wobei der Tag mit dem „/“ der schließende ist. Zwischen den beiden Tags befinden sich dazugehörige Elemente (es entsteht so eine Baumstruktur), innerhalb des ersten Tags weitere Parameter für dieses Objekt.

In unserem Fall gibt es das Page-Objekt und darin ein Grid-Objekt (mehr oder weniger eine Tabelle) mit dem zusätzlichen Parameter Background, welcher die Hintergrundfarbe des Grids definiert. Der Wert für Background ist hier der etwas komplexe Ausdruck {ThemeResource ApplicationPageBackgroundThemeBrush}, welcher bedeutet, dass aus den Ressourcen des aktuellen Themes der Wert ApplicationPageBackgroundThemeBrush geladen werden soll. Dieser entspricht hier weiß, würde man das Theme auf Dunkel ändern, wäre es schwarz. Wer etwas experimentieren möchte, kann den gesamten Ausdruck mit den geschweiften Klammern durch eine fixe Farbe ersetzen, zum Beispiel Blue (Visual Studio schlägt an dieser Stelle mögliche Werte vor). Ebenfalls möglich ist eine genaue Definition mittels RGB- oder ARGB-Wert (blau wäre als RGB-Wert #0000FF).

Für unseren Counter fügen wir in das Grid ein StackPanel ein. Mit diesem ist es möglich, mehrere Objekte nebeneinander oder übereinander zu stapeln (standardmäßig werden diese übereinander gestapelt, festgelegt wird dies über den Parameter Orientation).

Darin fügen wir zwei TextBlock-Objekte und ein Button-Objekt ein. Der erste TextBlock (dieser Objekt-Typ dient zur Darstellung von Text) fungiert als Überschrift, der zweite zeigt den Zählerwert an. Ein Klick auf den Button wird den Zählerwert erhöhen.

[xml]<StackPanel>
<TextBlock Text="Aktueller Zählerstand:" />
<TextBlock Text="0" />
<Button Content="Zähler erhöhen" />
</StackPanel>[/xml]

Beim TextBlock definiert der Parameter Text, welcher Text angezeigt werden soll. Beim Button ist hierfür der Parameter Content zuständig, da es auch möglich ist, andere Inhalte im Button darzustellen (Hinweis zur Schreibweise: <TextBlock /> entspricht dem gleichen wie <TextBlock></TextBlock>, nur, dass sich dann darin keine Elemente mehr platzieren lassen, was hier aber auch nicht notwendig ist). Optisch sieht das noch ziemlich unspektakulär aus:

Wir wollen die gesamten Inhalte zentriert darstellen und die Schriftgröße und –dicke des Zählerwertes ändern. Mit dem Parameter HorizontalAlignment bestimmen wir die horizontale Ausrichtung des jeweiligen Elements. Der Standard-Wert ist Stretch (fülle die gesamte Fläche), mögliche andere Werte sind Left, Center und Right. Ändern wir <TextBlock Text=”0″ /> zu <TextBlock Text=”0″ HorizontalAlignment=”Center” />, ist der Text nun mittig. Beim Zählerwert verändern wir die Schriftgröße über den FontSize-Parameter und die Schriftdicke über den FontWeight-Parameter.

Außerdem spendieren wir dem Button einen Abstand (Margin) zum mittleren Zählerwert-TextBlock, damit der Zählerstand mittig zwischen der Überschrift und dem Button ist. Wie auch in CSS ist es in XAML möglich, den Margin auf drei verschiedene Arten anzugeben: Mit Margin=”12″ hat das Objekt rechts, links, oben und unten einen Abstand von 12. Mit Margin=”12,4″ beträgt der Abstand rechts und links 12 und oben und unten 4. Last but not least kann auch jede Seite einzeln festgelegt werden, also Margin=”4,8,12,16″. Der erste Wert ist dabei für die linke Seite, der zweite für die obere, der dritte für die rechte und der vierte für die untere (von links angefangen im Uhrzeigersinn). Eine Anmerkung: Die Werte hier entsprechen nicht Pixeln, aber dazu an anderer Stelle mehr.

Zuletzt müssen wir dem Zählerwert-TextBlock einen Namen geben, damit wir vom Code auf diesen zugreifen und den Wert verändern können. Dies geschieht mit dem x:Name-Parameter.

Nach der vertikalen Zentrierung des gesamten StackPanels (VerticalAlignment) sieht das ganze aufgehübscht nun so aus:

[xml]<StackPanel VerticalAlignment="Center">
<TextBlock Text="Zählerstand:" HorizontalAlignment="Center" />
<TextBlock x:Name="CounterTextBlock" Text="0" HorizontalAlignment="Center" FontSize="100" FontWeight="Light" />
<Button Content="Zähler erhöhen" HorizontalAlignment="Center" Margin="0,24,0,0" />
</StackPanel>[/xml]

In Visual Studio schaut das schon deutlich besser aus:

Wer kein Fan vom manuellen Code schreiben ist oder die möglichen Parameter eines Elements herausfinden will, wird im eingangs erwähnten Properties-Fenster rechts unten fündig, denn all diese Parameter können auch darüber gesetzt werden und werden automatisch dem XAML-Code hinzugefügt.

Wenn man jetzt die App über den „Play“-Button ausführt schaut sie so aus wie in Visual Studio, nur in interaktiv, was bedeutet, dass sich der Button klicken lässt und dies entsprechend animiert wird. Dabei passiert jedoch noch nichts und genau das wollen wir nun ändern.

Der erste Code

Dazu schreiben wir gleich unsere ersten Schnipsel C#-Code in der MainPage.xaml.cs. Zuvor müssen wir jedoch noch die Verknüpfung zwischen XAML und C# erstellen. Genauer gesagt lassen wir Visual Studio die Methode generieren, die aufgerufen wird, wenn der Button gedrückt wird. Dafür fügen wir dem Button den Parameter Click hinzu. Hier lässt sich die praktische Auto-Vorschlagsfunktion nutzen: Nach dem Eintippen von Cl sehen wir Click als Vorschlag. Den aufmerksamen fällt daneben der Blitz auf, denn dabei handelt es sich um ein Event und keine Eigenschaft wie zum Beispiel der Margin. Bestätigen wir den Vorschlag mit Enter, kriegen wir den nächsten Vorschlag angezeigt, nämlich <New Event Handler>. Auch das Bestätigen wir mit Enter.

Auf den ersten Blick hat sich nicht viel getan, der Wert von Click beträgt nun Button_Click. Wer genauer hinschaut, sieht jedoch, dass Visual Studio nun die MainPage.xaml.cs von selbst geöffnet hat und darin die Methode Button_Click hinzugefügt hat:

(dieser Absatz richtet sich an echte Anfänger, die noch nie programmiert haben) Kurz gesagt führt eine Methode mehrere Anweisungen aus. In den meisten Fällen ruft sie selbst andere Methoden auf. Die erste Zeile einer Methode (private void …) definiert diese, und zwar ihre Sichtbarkeit für andere (hier: private, also nur sichtbar für diese Klasse), ihren Rückgabetyp (hier: void, also nichts), den Namen (hier: Button_Click) und die Parameter, die sie erfordert (hier: object sender und RoutedEventArgs e). Zwischen den geschweiften Klammern steht das, was die Methode bei Aufruf tut. Da Button_Click ein schlechtes Beispiel für eine erste Methode ist, kurz zur Erklärung dieses:

[csharp]public int addiere(int a, int b) {
int c = a + b;
return c;
}
[/csharp]

Diese öffentliche Methode mit dem Namen addiere bekommt beim Aufruf die beiden Variablen a und b vom Typ int (also Integer, eine ganze Zahl) übergeben und gibt bei Ende der Durchführung der Methode einen Wert vom Typ int zurück (zweites Wort, erste Zeile). In der Methode selbst werden die Werte der Variablen a und b addiert und in der Variable c gespeichert (erste Zeile) und das wird wiederum zurückgegeben (return).

Widmen wir uns wieder Button_Click. Die Methode soll den aktuellen Zählerwert auslesen, um eins erhöhen und anzeigen. Erstes machen wir, in dem wir auf den Text-Parameter von unserem TextBlock zugreifen, welchen wir oben CounterTextBlock genannt haben. Da Text eine Reihe von Buchstaben (dies entspricht dem Typ string) und keine Zahl ist, müssen wir den Wert in das richtige Format/den richtigen Typ konvertieren:

[csharp]int wert = Convert.ToInt32(CounterTextBlock.Text);[/csharp]

Nun erhöhen wir den Wert um 1, was sehr unspektakulär ist:

[csharp]wert = wert + 1;     // Kurzschreibweise: wert++; (oder ++wert; )[/csharp]

Die zwei Querstriche hier sind der Beginn eines Kommentars, der nicht in Maschinencode umgewandelt wird, den wir aber nutzen können, um einen Vermerk dazulassen. Bei mehrzeiligen Kommentaren kann

[csharp]/* <mein Kommentar> */[/csharp]

verwendet werden. Abschließend weisen wir unserem CounterTextBlock den neu errechneten Wert zu. Leider ist das nun nicht so einfach wie erwartet, denn

[csharp]CounterTextBlock.Text = wert;[/csharp]

wird nicht funktionieren. Dies liegt daran, dass sich eine Zahl nicht direkt als Text umwandeln lässt. Wir können das auf eine schmutzige Weise oder eine schönere Weise lösen:

[csharp]CounterTextBlock.Text = wert + "";         // Die schmutzige
CounterTextBlock.Text = wert.ToString();   // Die schönere ;)[/csharp]

Die gesamte Methode schaut nun wie folgt aus:

[csharp]private void Button_Click(object sender, RoutedEventArgs e) {
int wert = Convert.ToInt32(CounterTextBlock.Text);
wert++;
CounterTextBlock.Text = wert.ToString();
}[/csharp]

Starten wir die App jetzt und drücken den Button, erhöht sich der Wert des Zählers um 1 🙂

Da dies eine universelle App ist, funktioniert sie auch auf einem Windows 10-Smartphone, einem Windows 10-Tablet, dem Surface Hub oder auf der Xbox One (sobald diese die Ausführung von Windows 10-Apps unterstützt).

Wer jetzt damit etwas weiter herumspielen will, kann zum Beispiel einen Button zum Herunterzählen oder zum Zurücksetzen einfügen, den maximalen Zählwert beschränken oder auch mal ausprobieren, was geschieht, wenn aus <TextBlock Text=”0″ … /> <TextBlock Text=”Test” … /> wird… 😉

Für diesen ersten Teil soll es nun aber gewesen sein. Für Fragen und Feedback bin ich immer offen und demnächst fangen wir dann unser erstes großes Projekt an…

 

---

Support fürs Programmieren und allgemeine Fragen zur Serie Schumi’s Entwicklerwerkstatt, gibt es bei uns im FORUM!