Wie programmiere ich f√ľr Windows 10: TEIL I - Erste Schritte | Windows Entwickler Forum | 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:
https://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:
15 Gast/Gäste

Momentan betrachten diese Seite:
1 Gast/Gäste

Top Autoren:

D3f3kt: 294

STP: 68

LinusWP: 65

MichaG: 58

Morbus86: 50

Abdullah: 48

Lightspeed: 43

Marcel: 42

Elektroenchen: 39

Tobias: 39

Mitgliederstatistiken

Gastbeiträge: 4

Mitglieder: 6937

Moderatoren: 3

Administratoren: 3

Forumsstatistiken

Gruppen: 4

Foren: 23

Themen: 1142

Beiträge: 4641

Neuste Mitglieder:

jogg20, beppo31, wurli, heri68, hinok1, duderino, hanno47, portboy, nfriderici, redniwo

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

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