Windows 8.1 Design Ressourcen (auch und gerade eben für Entwickler)

Ich persönlich entwickle von Beginn an für Windows 8 und finde das Design-Konzept, welches Microsoft definiert und deren Umsetzung von den Entwicklern einzuhalten ist, im Großen und Ganzen sehr gut. Damit es euch möglicherweise leichter fällt benutzbare Windows 8.1 Applikationen zu bauen möchte ich euch einige Ressourcen empfehlen, die mir sehr geholfen haben.

Generell möchte ich euch das Windows 8 Design Center besonders ans Herz legen.  Hier findet Ihr Photoshop Templates, Case-Studies, und jede erdenkliche Unterstützung, wie Windows 8.1 Applikationen zu erstellen sind.

Windows 8.1 Applikation-Design

Microsoft gibt vor, dass der Inhalt das Herz jeder Windows Store-App sein soll. Das bedeutet, dass ein wichtiger Aspekt des Designs von Windows Store-Apps der ist, dass der Inhalt wichtiger ist als irgendwelche Spielereien drumherum. Alles Weitere ist eben nur Zubehör – oder eben Spielerei –, mit dem die Interaktion mit dem Inhalt dargestellt und ermöglicht wird. Damit wir das auch hinbekommen, hat sich Microsoft viel Mühe gegeben und Design Guidelines veröffentlich. Dieses Dokument ist für jeden Windows 8.1 Entwickler ein MUSS.

Windows 8 - User experience guidelines 314 Seiten geballte Information, findet Ihr hier

MOC 40043 Windows 8 UX Design Workshop

Falls Ihr euch das lieber im Rahmen einer Schulung aneignen wollt, hat Microsoft auch hier vorgesorgt. Es gibt ein 2-Tages Training beim Microsoft Learning Partner eurer Wahl.
Der Inhalt des Seminars:

• Design-Grundlagen in Windows Store Applications
• Empfohlene Vorgehensweise und Prozesse für die Gestaltung des User Experience (UX) von Windows Store Applications
• Guidelines und Voraussetzungen für den Entwurf für Windows Store Application User Interfaces

Da Ihr jetzt fit seid, was das Applikation-Design betrifft, könnt Ihr loslegen und eure Windows 8.1 Applikationen planen. Dafür sind Mock-Ups hervorragend geeignet.

Mock-Ups mit Balsamiq

Wer kennt das nicht. Man sitzt beim Kunden, soll eine Windows 8.1 Applikation erstellen, aber es gibt keine klare Vorstellung, wie das denn nun aussehen soll. Hier hilft euch Balsamiq Mockup weiter. Das Teil kostet euch zwar $79,—für eine Einzellizenz, ist aber jeden Euro (sind dann ja gleich weniger als die $) wert. Unten seht ihr ein vorher <-> nachher Bild als Beispiel.
Mehr Infos findet Ihr hier
Mit dem Tool könnt Ihr hervorragend Mock-Ups für  verschiedenste Applikationen erstellen (Web, Desktop, iOS, Android).
Damit das auch für Windows 8.1 hervorragend klappt, braucht ihr noch etwas mehr:

Microsoft stellt alle Symbole, Controls und auch die korrekten Bilder für die Devices zur Verfügung um Mock-Ups für Windows 8 Applikationen zu erstellen. Den Download findet Ihr hier

Mock-Ups auf Papier

Interessant finde ich auch die Windows 8 Zeichen-Schablone, um seine Mock-Ups zeichnen zu können. Ihr habt richtig gelesen, so richtig zeichnen…ohne euren PC….mit Papier und Bleistift.
Auch die Vorlage für das Zeichenblatt  A4 findet ihr: hier

Windows 8 Stencil Kit $29,—hier zu bestellen

Zusammenfassung

Ich hoffe, dass ich euch mit diesem Blog weiter geholfen habe und Ihr von nun an richtig Spass daran habt Windows 8.1 Applikationen zu entwerfen und sich das an einer Menge von neuen Appliakationen im Windows Store nieder schlägt.

Windows 8.1 Theme Ressourcen und Templates

Wenn Ihr in Visual Studio eine Windows Store Applikation mit dem ‘Blank App (XAML)’ Template erstellt, dann habt Ihr eine Page (MainPage.xaml) zur Verfügung, die dank Microsoft schon recht nett (mit dem Hintergrund schwarz, genauer Color="#FF1D1D1D" ) aussieht.

ABER….woher kommt der Hintergrund für das Grid Control?
Öffnen wir dazu einmal die MainPage.xaml, dort sehen wir dann, dass dem Backgrond eine markup extension zugewiesen wird.

In Visual Studio 2012 (Store 8.0 App) sieht das so aus:

In Visual Studio 2013 (Store 8.1) sieht das nun so aus:

Egal, welche Version ihr habt, das Problem bleibt das Gleiche: Welchen Wert hat ApplicationPageBackgroundThemeBrush?
In Visual Studio 2012 kommen wir der Sache noch etwas näher, da haben wir im Verzeichnis Common die Datei StandardStyles.xaml.
Nur, da werden wir auch nicht fündig….und in Visual Studio 2013 (bzw. Windows 8.1 Projekten) gibt es diese Datei nicht mehr (Tipp: falls Ihr nun die Liste der verfügbaren Buttons sucht für den Segoe UI Symbol font, diese findet ihr hier), da die IDE euch kräftig unterstützt und die Ressourcen nun eher versteckt. Mit Visual Studio 2013 könnt Ihr die Styles nun so hinzufügen:

Rechte Maustaste im Designer und Edit Style, danach Apply Ressource – es werden euch alle vorhandenen Ressourcen angezeigt). Als Beispiel habe ich einen TextBlock in meinem Grid eingefügt, dann sieht das so aus wie in dem Bild rechts

ThemeResources

Des Rätsels Lösung ist, dass ApplicationPageBackgroundThemeBrush einer der  System Brush Ressourzen, das bedeutet, dass wir die Definition hier finden:
"c:\Program Files (x86)\Windows Kits\8.0\Include\winrt\xaml\design\themeresources.xaml"
bzw. für Windows 8.1 hier:
"c:\Program Files (x86)\Windows Kits\8.1\Include\winrt\xaml\design\themeresources.xaml"
ThemeResources.xaml enthält die resource dictionaries für den Dark (Default), Light und HighContrast Theme.
Die Datei Generic.xaml (die Ihr auch in dem Verzeichnis findet) enthält die default styles und Templates für die Meisten der XAML Controls.
Wenn Ihr in dieser Datei nach ApplicationPageBackgroundThemeBrush sucht, dann findet Ihr die System Ressouce:
<SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="#FF1D1D1D" />

Eigene Ressoucen

Ein kleiner Tipp, falls Ihr noch nicht so fit seit mit der XAML Syntax, versucht einmal eine eigene Definition anzulegen.

• Geht dazu zu den Eigenschaften des Grid Controls und sucht die BAckground Eigenschaft.
• Dort klickt Ihr auf das kleine Rechteck auf der rechten Seite und wählt Convert to New Resouce…
• In dem neuen Dialog vergebt einen sinnvollen Namen (z. B. NewBackgroundBrush) und klickt OK.
• Ändert nun den Wert für die Color von #FF1D1D1D auf z. B. #FF1DFF1D (das ergibt einen hellgrünen Hintergrund)

Das Resultat sieht dann so aus:

Aber zurück zu unseren System Ressourcen. Wir wissen nun, wo diese zu finden sind, aber wie kann man sich diese Liste vernünftig ansehen (wenn ReSharper nicht installiert ist, der im XAML Bereich großartige Unterstützung leistet)?

System Ressourcen in Blend

Hier kommt Expression Blend in’s Spiel. Öffnet Expression Blend und lassen wir uns die Liste anzeigen, das geht folgendermaßen:

• Rechstklick auf der Mainpage.xaml und Open in Blend...
• Achtet darauf, dass das Grid Control angewählt ist in Blend – am Besten Ihr klickt es einmal an
  (in "Objects and timeline" sollte das "[Grid]" aktiv (hellgrauer Hintergrund) sein.)
• Rechts oben im Properties-Fenster solltet Ihr bereits auf Brush stehen.
• Darunter steht "Background: No brush"
• Darunter sind 5 Buttons.
• Dort sollte der Button ganz rechts angewählt sein ("Brush resources").

Voila, hier ist die Liste mit den zugehörigen Farben zu sehen:

Zusammenfassung

Ich hoffe mit diesem Blog-Eintrag euch ein klein wenig weiter geholfen zu haben und euch ist nun etwas klarer, was die XAML System Ressourcen sind und wo diese zu finden sind aber vor allem auch, welche Einträge es gibt, damit Ihr diese effektiv in euren Windows 8.1 Applikationen anwenden könnt.

Windows Phone 8 Emulator und IIS Express

Falls Ihr mit dem WP8 Emulator (xde) auf den IIS Express zugreifen wollt, so funktioniert das erst einmal nicht. Der Grund ist, dass der IIS Express all eure Web Applikationen, die Ihr in Visual Studio erstellt nur für den localhost zur Verfügung stellt.

*) Dazu öffnet Ihr folgende xml-Datei: applicationhost.config

*) Diese findet Ihr hier: %userprofile%\documents\IISExpress\config

Jetzt sucht Ihr in dieser Datei nach dem Namen eurer Visual Studio Applikation. In meinem Beispiel wäre das "WebSample". Kontrolliert bitte unter dem binding tag den Port, dieser muss der Gleiche sein, wenn Ihr die Applikation aus Visual Studio heraus startet.

Damit eure Applikation vom WP8 Emulator aus erreichbar ist, müsst Ihr ein weiteres Binding hinzufügen, und zwar mit eurer IP-Adresse. Also in meinem Fall ist das 192.168.1.103. Das sieht dann so aus:

Im nächsten Schritt erkären wir, dass der verwendete Port durchaus in Ordnung ist, wenn da jemand darauf zugreifen möchte, und zwar macht ihr das wieder in einem command prompt als Administrator:

netsh advfirewall firewall add rule name="IISExpressWeb" dir=in protocol=tcp localport=euerappport profile=private remoteip=localsubnet action=allow

also für mein oberes Beispiel:
netsh advfirewall firewall add rule name="IISExpressWeb" dir=in protocol=tcp localport=33081 profile=private remoteip=localsubnet action=allow

Jetzt müsst Ihr den IIS Express beenden und neu starten (also z. B. durch Starten der Applikation aus Visual Studio heraus). Falls Ihr einen Fehler bekommt, dann startet Visual Studio bitte erneut als Administrator, dann sollte das klappen.

Jetzt gebt einmal die URL in euren WP8 Emulator ein (optional ändert einfach nur die URL von localhost zur IP - vergesst nicht den Port stehen zu lassen - und ihr solltet eure Applikation auch vom WP8 Emualtor aus erreichen können.

Öffnen des Windows Phone 8 Emulators ohne Visual Studio

Momentan entwickle ich recht viele HTML5/JavaScript Applikationen mit Visual Studio 2013 (unter Verwendung von JQuery Mobile, oder KendoUI). 

Das macht mittlerweile schon unheimlich viel Spass, etwas lästig ist das Testen für die verschiedenen Plattformen. Eine meiner Lieblingsplattformen ist natürlich WP8, da wäre es manches mal recht hilfreich den Emulator per Hand starten zu können.

Das funktioniert eigentlich recht einfach:

1) Das WP8 SDK muss natürlich auf eurer Maschine installiert sein (entwickelt einfach schnell eine neue WP8 Applikation in Visual Studio und deployed diese zu eurem WP8 Device.

2) Wenn Schritt 1 erfolgreich war, dann öffnet eine Command Shell (als Administrator) und wechselt in das folgende Verzeichnis: cd C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0

3) Jetzt noch den WP8 Emulator (xde) starten, und zwar das erste Mal mit folgender Befehlszeile:
xde -vhd "C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Emulation\Images\Flash.vhd"

4) Ab nun reicht es, wenn ihr einfach nur xde.exe aufruft (also eine cmd-Datei mit xde.exe und Startpfad C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0)