Wie programmiere ich für Windows 10: TEIL I - Erste Schritte | Windows Entwickler Forum | WindowsUnited Forum

Avatar

Denke über eine Registrierung nach
Gast

sp_LogInOut Login sp_Registration Registrieren

Registrieren | Passwort vergessen?
Erweiterte Suche

— Forumbereich —




— Übereinstimmung —





— Forum Optionen —





Minimale Suchwortlänge beträgt 3 Zeichen - die maximale 84

sp_Feed Sprechblase-Icon-gr
Wie programmiere ich für Windows 10: TEIL I - Erste Schritte
Keine Berechtigung um zu posten
16. November 2015
16:05
Avatar
Benski
Administrator
Forenbeiträge: 655
Mitglied seit:
21. Oktober 2015
sp_UserOfflineSmall Offline

Wie kann ich für Windows 10 Universale Apps programmieren?

 

Darum dreht sich in den nächsten Anleitungen hier im Entwicklerbereich alles.
Sebastian, oder eher bekannt als schumi1331, versucht euch mit einfachen Anleitungen Schritt für Schritt die Kunst des Programmierens näher zu bringen.

Es spielt keine Rolle, ob ihr bereits Erfahrungen beim programmieren habt, oder absolute Neueinsteiger seid.
Diese und alle folgenden Anleitungen sind an alle gerichtet, die Spaß an den Apps sowie deren Erstellung für Windows 10 haben. Die erste Anleitung hier, stellt eine Kruzform der sehr ausführlichen Anleitung von Sebastian auf unserem Blog dar. Eigentlicher Gedanke dieses Threads ist es, Fragen und Probleme zur Anleitung hier stellen zu können, damit euch Sebastian oder andere erfahrene User unter die Arme greifen können.

 

Starten wir also mit Teil 1 der Serie: Erste Schritte

Die folgenden User sagen Danke an Benski für seinen Post:

Pitti
16. November 2015
16:15
Avatar
Benski
Administrator
Forenbeiträge: 655
Mitglied seit:
21. Oktober 2015
sp_UserOfflineSmall Offline

Diese Anleitung umfasst:

  • Installation der benötigten Software
  • Einführung in die Konzepte von XAML und C#

Um Apps für Windows 10 programmieren zu können, muss sich das Betriebssystem auch auf dem Rechner befinden. Mehr Vorkenntnisse, grundlegenden PC-Kenntnisse vorausgesetzt, sind nicht nötig.

 

Visual Studio installieren

 

  1. die kostenlose Community-Version von Visual Studio herunterladen und installieren
  2. Entwicklungstools für universelle Windows-Apps im Funktionen-Auswahlfenster aktivieren
  3. Allgemeinen Tools für Visual C++ 2015 mit installieren lassen

VS.pngImage Enlarger

–> der Screenshot kann abweichen, der zu installierende Punkt ist aber gleich. Das Setup kann bis zu 20 Gigabyte an Speicher belegen und bis zu zwei Stunden dauern

–> optional könnt ihr euch das englische Sprach-Paket installieren, hier zu finden ist (die Sprach-Einstellung ist unter Extras > Optionen > Internationale Einstellungen).

–> nachfolgende Screenshots sind alle aus der englischen Version (über den Link gibt es VS 2015 auch direkt auf Englisch)

 

Das erste Projekt

 

  • zuerst erstellen wir einen Projektordner via Explorer, zum Beispiel Dokumente/WindowsUnited
  • über „New Project…“ auf der linken Seite oder über File > New > Project erstellen wir ein neues Projekt
  • unter den Templates > Visual C# > Windows den Punkt Universal  > Blank App (Universal Windows) auswählen
  • Namen festlegen (hier: FirstCounter)
  • als Location den Projektordner auswählen
  • Haken bei Create directory for solution gesetzt lassen

Fertig sollte das Fenster nun so aussehen:

VS1.pngImage Enlarger

 

  • das Fenster sollte nun in vier Bereiche geteilt sein
  • im größten Fenster ist die Datei App.xaml.cs automatisch geöffnet
  • darunter befindet sich die Error List (fürFehler und Warnungen im Code)
  • rechts ist der Solution Explorer (zum Verwalten aller Dateien des Projekts inklusive Properties)
    –> aktuell noch leer, später für Einstellungen zu unterschiedlichen Objekten,ist bei der Erstellung der Benutzeroberfläche von Bedeutung
  • über View können die Bereich ebenfalls in die Oberfläche eingebunden werden

VS2.pngImage Enlarger

 

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

  • References: 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.
  • Assets: unterschiedliche Grafiken für unserer App, für Live Tiles, den Splash-Screen, das App-Icon und das Store-Logo.
  • 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#). XAML definiert 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.
  • MainPage.xaml (samt verknüpfter MainPage.xaml.cs): ist die erste Seite, die beim Start der App aufgerufen wird
  • Package.appxmanifest: zB. Einstellungen, wie die App im Store erscheint, welche Rechte sie hat, etc.

Zum Starten der App dient im oberen Bereich des Visual Studio-Fensters der Button, der mit einem grünen Pfeil aus der Menge hervorsticht:

VS3.pngImage Enlarger

 

  • steht dem Pfeil bereits Local Machine kann durch Klick auf diesen Button die App auf dem PC gestartet werden
  • das 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 dieser nachfolgend immer aktiv ist.
  • die Prozessorart, die unser Code in Maschinencode umgewandelt (kompiliert), ist im Auswahlfeld daneben zu finden
  • zur Auswahl stehen:
    • x86 (32 bit-Desktopsysteme)
    • x64 (64 bit-Desktopsysteme)
    • ARM (mobile Prozessoren)
      –> für ARM kompilierte Programme können nicht auf x86- oder x64-Prozessoren ausgeführt werden
      –> 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

Für uns soll x86 oder x64 und Local Machine aber ausreichen. Ist alles richtig , öffnet sich nun ein weißes Fenster mit nichts weiter drin – es wurde noch nichts programmiert Wink

 

die erste Benutzeroberfläche

 

Ziel der FirstCounter-App (vorläufig):

Zählfunktion auf der Oberfläche der App darstellen
–> Bearbeitung der MainPage.xaml
–> Erstellung der Benutzeroberfläche

  • MainPage.xaml öffnen
    –> der obere Bereich zeigt die Oberfläche, wie sie aussehen wird (der Designer), der untere den XAML-Code
    • XAML-Code ähnlich wie XML:
      Ein Objekt wird durch einen öffnenden und einen schließenden Tag definiert, hier [] , wobei der Tag mit dem „/“ der schließende ist
      Zwischen den Tags befinden sich dazugehörige Elemente (es entsteht so eine Baumstruktur), innerhalb des ersten Tags weitere Parameter für dieses Objekt
  • Page-Objekt und enthaltenes Grid-Objekt (Tabelle) + Background Parameter (definiert Hintergrundfarbe des Grids)
    –> der Wert für Background ist hier der etwas komplexe Ausdruck {ThemeResource ApplicationPageBackgroundThemeBrush}
    • aus den Ressourcen des aktuellen Themes soll der Wert ApplicationPageBackgroundThemeBrush geladen werden
    • entspricht hier weiß, würde man das Theme auf Dunkel ändern, wäre es schwarz
      –> Ausdruck mit den geschweiften Klammern kann durch eine fixe Farbe ersetzt werden (zum Beispiel Blue)
      • möglich ist auch 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).
  • da hinein kommen zwei TextBlock-Objekte und ein Button-Objekt
    • der erste TextBlock (dieser Objekt-Typ dient zur Darstellung von Text) fungiert als Überschrift
    • der zweite zeigt den Zählerwert
      –> Ein Klick auf den Button wird den Zählerwert erhöhen

VS3a.png

  • TextBlock: Parameter Text definiert, welcher Text angezeigt werden soll
  • Button: ist hier für den Parameter Content zuständig,
    –> Es ist auch möglich, andere Inhalte im Button darzustellen
    (Hinweis zur Schreibweise: [] entspricht dem gleichen wie [], 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:

 VS4-1.pngImage Enlarger

 

  • HorizontalAlignment: bestimmt die horizontale Ausrichtung des jeweiligen Elements
    • Standard-Wert ist Stretch (fülle die gesamte Fläche)
    • mögliche andere Werte sind: Left, Center und Right
    • ändern wir [] zu [] ist der Text mittig
    • für den Zählerwert verändert man die Schriftgröße über den FontSize-Parameter und die Schriftdicke über den FontWeight-Parameter
  • der Button erhält einen Abstand (Margin) zum mittleren Zählerwert-TextBlock
    –> wie 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
    • mit Margin=“4,8,12,16″ kann auch jede Seite einzeln festgelegt
      –> 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.

  • x:Name-Parameter: vergibt dem Zählerwert-TextBlock einen Namen
    –> damit wir vom Code auf diesen zugreifen und den Wert verändern können

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

 

VS4a.pngImage Enlarger

 

In Visual Studio schaut das schon deutlich besser aus:

 

VS5.pngImage Enlarger

 

  • Properties-Fenster:
    • befindet sich rechts
    • alle oben genannten 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

 

  • zuerst Verknüpfung zwischen XAML und C# erstellen
    –> die Methode wird von Visual Studio generiert, wenn der Button gedrückt wird
    • dazu wird dem Button der Parameter Click hinzugefügt
      –> 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 [] . Auch das Bestätigen wir mit Enter.

VS6.pngImage Enlarger

 

  • der Wert von Click beträgt nun Button_Click
  • Visual Studio nun die MainPage.xaml.cs von selbst geöffnet
  • Visual Studio hat darin die Methode Button_Click hinzugefügt

 

VS7.pngImage Enlarger

 

  • für Einsteiger: eine Methode führt 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:

VS8.png

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).

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:

VS9.png

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

VS10.png

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

VS11.png

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

VS12.png

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:

VS13.png

Die gesamte Methode schaut nun wie folgt aus:

VS14.png

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

VS15.pngImage Enlarger

 

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 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…

sp_PlupAttachments Anhänge
24. April 2016
17:34
Avatar
rene84828
Neues Mitglied
Mitglied
Forenbeiträge: 1
Mitglied seit:
11. Februar 2016
sp_UserOfflineSmall Offline

Hallo,

Ich finde das Thema programmieren durchaus Interessant habe aber leider 0,00 Erfahrung. Diese Anleitung finde ich toll nur ohne die Bilder ist es doch schon ziemlich schwierig für mich einen Einstieg zu finden.

Könnte man die Bitte wieder hochladen.

Auch würde mich interessieren wann bzw. ob Teil 2 erscheint.

MfG

24. April 2016
20:11
Avatar
Benski
Administrator
Forenbeiträge: 655
Mitglied seit:
21. Oktober 2015
sp_UserOfflineSmall Offline

hey.
Danke dir für den Hinweis. Die Bilder sind wohl bei dem letzten großen Server-Crash abhanden gekommen. Ich werde versuchen, sie zeitnah wieder herzustellen.

Bis dahin kann ich dir empfehlen, diese Anleitung auf unserem Blog nachzulesen:
http://windowsunited.de/2015/1…..-schritte/

 

Edit: sehe gerade, dass auch da die Blider nicht mehr verfugbar sind… Confused

18. Mai 2016
14:46
Avatar
Benski
Administrator
Forenbeiträge: 655
Mitglied seit:
21. Oktober 2015
sp_UserOfflineSmall Offline

Hinweis

 

Schumi kann leider aus privaten Gründen seine Anleitung zum programmieren von Windows Apps nicht fortsetzen.
Die gute Nachricht ist aber, mit unserem Communitymitglied Julian haben wir jemanden gefunden, der euch das programmieren ebenfalls etwas näher bringen will.

Nutzt dazu einfach seinen Thread, hier im Entwicklerbereich:
Programmieren für Einsteiger – Auf dem Weg zur eigenen App

Zeitzone des Forums: Europe/Berlin

Am meisten Mitglieder online: 388

Zurzeit Online:
21 Gast/Gäste

Momentan betrachten diese Seite:
1 Gast/Gäste

Top Autoren:

D3f3kt: 294

STP: 68

LinusWP: 65

MichaG: 62

Morbus86: 50

Abdullah: 48

Lightspeed: 43

Marcel: 42

Elektroenchen: 39

Tobias: 39

Mitgliederstatistiken

Gastbeiträge: 4

Mitglieder: 7005

Moderatoren: 3

Administratoren: 3

Forumsstatistiken

Gruppen: 4

Foren: 23

Themen: 1147

Beiträge: 4661

Neuste Mitglieder:

[email protected], robertlassen, specki1958, kenzo5678, eva, stef950, acde, frum, dustintest2, dustintest

Moderatoren: Leonard Klint: 53, Sigi: 560, Ulrich B.: 204

Administratoren: : 142, Königsstein: 48, Benski: 655

Melde dich hier mit deinen Benutzerdaten an

Registriere dich hier für WindowsUnited

Passwort zurücksetzen

Bitte gebe Email oder Nutzername ein, um dein Passwort zurückzusetzen.