Heimweh in Blend 2015! Die Oberfläche wieder zurück zu den Wurzeln von Blend führen- so geht’s

Das neue Blend for  Visual Studio 2015, welches mit der aktuellen Preview-Version von Visual Studio 2015 ausgeliefert wird, bietet viele neue Features, auf die UI-Developer lange gewartet haben. Ein vollwertiger Solution- und Team-Explorer, Code-Behind-Editor der endlich IntelliSense versteht und natürlich die Vorschau auf das live XAML-Editing im Debugmode für WPF heben das Produkt auf eine neue Stufe. Doch leider war in den meisten Fällen der erste Eindruck durch einen anderen Umstand geprägt – die Angleichung der Oberfläche an Visual Studio und die Kritik der Nutzer, die aus dem Design-Umfeld kommen. Aber mit einigen Handgriffen lässt sich das Look&Feel an die alte Welt angleichen.

Gerade für die UI-Designer, deren Tagesgeschäft auch in großen Teilen aus dem Tooling von Adobe besteht, war der Cut recht hart. Microsoft gleicht das Look&Feel von Blend an Visual Studio an. Betrachtet man die Synergien die durch diesen Zusammenschluss entstehen, macht das durch die Brille von Microsoft durchaus Sinn. So muss nur ein einziger Anwendungs-Rahmen entwickelt und gepflegt werden. Außerdem wurden so Features wie der Solution Explorer oder Code-Behind-Editor mit IntelliSense erst möglich. Den UI-Designern hilft diese Begründung aber nur bedingt, war das Blend-Look&Feel bisher immer an großen Designer-Lösungen auf dem Markt angelehnt und so leicht zugänglich für Nutzer, die in beiden Welten unterwegs waren.

Blend 2015 Preview (Klick für Vollbild)

Blend2015Untouched

Blend 2013 (Klick für Vollbild)

Blend2013

Dank der Customzing-Möglichkeiten, die der Visual Studio Anwendungsrahmen ausliefert, kann Blend 2015 in den selben Einstellungen angepasst werden. Dies ermöglicht eine weitestgehende Annäherung an die Anmutung von Blend 2013, wenn auch mit einigen Abstrichen.

Step 1 – Theming

Blend 2015 hat ein gleichnamiges eigenes Theme bekommen, welches den Anwendungsrahmen nahezu schwarz einstellt. Es ist noch einmal eine ganze Ecke dunkler gehalten, als das Dark-Theme von Visual Studio. Im Vergleich zu Blend 2013 ist das Dark-Theme von Visual Studio näher an dessen Farbschema, als das wesentlich dunklere „Blend“-Theme in Blend 2015. Unter „Tools-Options“ findet sich die Einstellung zum Theming.

OptionsChangeTheme

Aber Vorsicht: Wird ein Theme gewählt, dass auch in Visual Studio verfügbar ist (quasi alle Themes außer dem „Blend“-Theme), wirken sich alle weiteren Änderungen dieses Blog-Postings auf die Darstellung in Visual Studio aus. Ich empfehle deshalb, für ein erstes Herantasten an die kommenden Optionen das Blend-Theme zu verwenden.

Step 2 – Ausrichtung der Tool-Fenster

Wie im ersten Screenshot zu sehen, wird die Blend 2015 Preview, was die Ausrichtung der Docking-Fenster angeht, so angeordnet ausgeliefert wie in Visual Studio. Zusätzliche Tool-Fenster wie „Data“ (Sample-Data Feature), die in Visual Studio nicht enthalten sind, wurden dazu noch unglücklich dort angesiedelt, wo sie in der Vorgängerversion nicht zu finden sind. Dank der leichten Bedienung der Visual Studio Docking Fenster, ist in wenigen Handgriffen die Blend-typische Ordnung wieder hergestellt, und sollte dann in etwa so aussehen:

BlendAfterRearrangeTools

 Step 3 – Anpassung der Quick-Tool-Leisten

Was sich in Blend leider nicht vollständig wie in Blend 2013 konfigurieren lässt, ist das Verhalten der Quick-Tool-Leisten. Gerade die Leiste für den schnellen Werkzeug-Zugriff am linken Rand des visuellen Editor lässt sich nicht wie in Blend 2013 oder anderen Designer-Tools wie z.B. Adobe Illustrator am ganz linken Rand des Fensters andocken. Anders ist es bei den Quick-Tool-Leisten unter dem Anwendungsmenü. Diese können über „Tools-Customize“ ausgeblendet (oder zusätzliche eingeblendet werden), so dass nur noch das Anwendungsmenü verfügbar ist.

CustomizeToolbar

Einige werden sich jetzt fragen, wer sollte das tun? In den ersten beiden Screenshots fällt auf, dass der verfügbare Platz für den Content (Visual Designer wie auch Code-Behind-Editor) auf dem Screen in der neuen Blend-Version geringer ausfällt. Das kann bei großen Full-Screen-Views schnell störend sein. Glücklichweise sind die Tastatur-Shortcuts für die ausgeblendeten Tools analog denen in Visual Studio.

BlendWithoutToolbars

Step 4 – Anpassen der Code-Editoren

Blend 2015 Preview unterscheidet sich optisch jetzt schon besser von Visual Studio 2015. Vorher war es wesentlich schwerer die beiden Umgebungen visuell schnell voneinander zu unterscheiden. Es war notwendig auf die Unterschiede in den Features und Ankerpunkten wie Titelleiste oder App-Icon zu achten, um wirklich sicher zu wissen, ob man sich gerade in Blend befindet oder nicht. Mit den bisher gemachten Änderungen fällt die Unterscheidung „aus dem Augenwinkel“ schon wesentlich leichter. Ein großer Unterschied zwischen Visual Studio und Blend war bis zur Version 2013, dass in Blend mit Dark Theme,  anders als in  Visual Studio in dessen Dark Theme , die Editoren für XAML-Code und Code-Behind einen weißen Hintergrund haben. (Siehe Screenshot 2). Durch die Änderung des Hintergrundes ist allerdings auch die Anpassung aller Farben für die unterschiedlichen Codebausteine notwendig. Unter Tools-Options finden sich alle Einstellungen, die verändert werden müssen.

SetColors

 

Für die Anpassung des XAML-Editor sind folgende „Display Items“ und Werte erforderlich, um die Ansicht auf den Stand von Blend 2013 zu trimmen:

– PlainText
Item background = White
Item foreground = Black (Die Cursorfarbe im Editor)

– Highlight Current Line (active)
Item background = White
Item foreground = White (foreground definiert hier den Rahmen um die Markierung und die Zeile)

– Highlight Current Line (inactive)
Item background = White
Item foreground = White

– XAML Attribute
Item foreground = Red

– XAML Attribute Value
Item foreground = Blue

– XAML Comment
Item foreground = Green

– XAML Name
Item foreground = Maroon

– XAML Delimiter
Item foreground = Blue (färbt die gschweiften Klammern vor Bindings auch ein, lässt sich leider nicht getrennt einstellen)

– XAML Markup Extension Class
Item foreground = Eigene Farbe R:184, G:134, B:11

– XAML Markup Extension Parameter Name & …Value
Item foreground = Eigene Farbe R:184, G:134, B:11  (sofern nicht vielleicht sogar der Defaultwert gelassen werden sollte, da die visuelle Abgrenzung zur Extension Class besser ist)

Das Resultat sollte danach etwa so aussehen:

ColorChangeWithoutLineNumbers

Die Einstellungen welche für „PlainText“ geändert wurden, greifen allerdings nicht nur im XAML-Editor. sondern auch im Editor für das CodeBehind-File.

CsharpEditor

Im CodeBehind-Editor fällt auf, dass die gewählten Vordergrund-Farben für die unterschiedlichen Code-Bausteine viel dezenter sind, um mit dem ursprünglichen dunklen Hintergrund zu harmonieren. Auch diese Einstellungen können wie oben mit den entsprechenden „Display Items“ geregelt und nach Herzenslust konfiguriert werden.

Step 5 – Zeilennummern im XAML-Editor

Der umgestaltete XAML-Editor sieht jetzt Blend 2013 schon recht ähnlich. Nach genauerem Hinsehen fällt auf, dass noch eine wichtige Eigenschaft abtrünnig – Blend 2015 Preview zeigt keine Zeilennummern. Dies liegt allerdings glücklicherweise nicht daran, dass keine Zeilennummern verfügbar wären, sie sind nur deaktiviert. Über das Options-Menü können diese ganz leicht aktiviert werden:

EnableLineNumbers

 Mit diesen Einstellungen ist das Look&Feel von Blend 2015 Preview nun sehr nah an der Vorgänger-Version 2013. Der einzige letzte große Unterschied ist die Ausrichtung der Tabs in den Tool-Fenstern, welche im Visual Studio Anwendungsrahmen generell, und somit auch in der neuen Version von Blend, sich am unteren Ende befindet, und nicht onTop. Dieser Umstand lässt sich mit dem Bordwerkzeug (bisher) nicht anpassen. Den „techy“-Resteindruck, der durch das gewählte Styling der UI-Elemente entsteht, kann auch nicht vollständig weggewischt werden.

Wer noch mehr Neuigkeiten über Blend 2015 erfahren möchte, kann hier auch auf den MSDN-TechTalk den ich mit Daniel Meixner (Technical Evangelist DX) von Microsoft Deutschland für Channel 9 geführt habe nutzen.

Viel Spaß damit!

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>