Alles Neue macht die Build – Was ist neu in XAML für Windows 8.1

logo_build13_heroDie Build 2013 in San Francisco ist fast vorbei. Allerdings ist jetzt schon klar, dass die vorgestellten Neuerungen und Erweiterungen für die XAML-Entwicklung beachtlich ausgefallen sind und die ausgerufene Strategie von Steve Balmer unterstreichen. Dieses Posting fasst die Highlights zusammen.

„Faster! Faster! Even Faster!“ – Das war der Leitspruch, den Steve Ballmer erst vor kurzem ausgerufen hat. Das User Experience Team hat sich dies auf die Fahne geschrieben und in XAML für Windows 8.1. genau in diese Richtung gearbeitet. Die meisten Neuerungen und Änderungen ziehen auf Performance ab. Und hier geht es nicht nur um die Performance von erstellten Apps, sondern auch um die Performance des einzelnen UI-Entwicklers beim Entwickeln in XAML. Die Änderungen lassen sich in zwei große Gruppen einteilen:

– Neue Controls und APIs, welche hauptsächlich dafür bereitgestellt werden, um eine gute Performance und User Experience zu gewährleisten

– Updates unter der Haube, welche die Design-Time-Experience sowie die generelle Entwickler-Performance verbessern sollen

Controls und API´s

Bei den Controls wurde ordentlich erweitert. Worüber sich die XAML-Gemeinde recht freuen sollte, sind die zwei neue Controls DatePicker und TimePicker.

DatePicker and TimePicker
Abbildung 1 DatePicker und TimePicker Controls in Action

Bei beiden Controls erfolgt die Darstellung in Comboboxes, die über Templates gestylt und angepasst werden können. Der DatePicker unterstützt alle gängigen Kalendertypen. Beim TimePicker kann zwischen den beiden Formaten „12 hours“ und „24 hours“ gewählt werden.

CalendarIdentifier ClockKind
Abbildung 2 verfügbare Kalender für den DatePicker und ClockIdentifier für den TimePicker

Ebenfalls ein neues Steuerelement (bzw. eine Familie von Elementen), welches im größeren Rahmen präsentiert wurde ist das Hub Control. Dieses ermöglicht, sehr schnell ansprechende Start-Pages für Apps zu erstellen, in denen Informationen in mehreren Hub-Sections gruppiert werden. Ein sogenanntes „Hero-Picture“ eröffnet die Sequenz der Hub-Sektionen. Dieses kann dafür genutzt werden, um Highlights im Content hervorzuheben. Bei vielen Sektionen mit größeren Inhalten wie z.B. detailreichen Bildern, kümmert sich das Hub Control automatisch um best performance beim Laden der Sektionen, ohne dass die Oberfläche darunter leidet. Betrachtet man die neuen Bing Apps in Windows 8.1. wie z.B. „Kochen & Genuss“, bekommt man ein gutes Gefühl dafür, wie Microsoft sich den optimalen Einsatz des Hub Controls vorstellt.

BingKochenScreenJPG

Abbildung 3 Das Hub Control in den neuen Bing Apps

Um Standardfunktionalitäten schneller implementieren zu können, wurden speziell hierfür einige neue Controls geschaffen. Erfreulicherweise haben es in diesem Zuge auch die Flyouts, welche man bisher über das NuGet-Paket von Callisto beziehen musste, als eigene Controls ins Framework geschafft. Für den Entwickler hat dies den Vorteil, dass in diesen Controls alle Guidelines, die Layout und Verhalten betreffen, perfekt implementiert sind. Auch die „Back Navigation“ ist bereits eingebaut. Flyouts können nun vom rechten bzw. auch linken Bildschirmrand eingefahren werden.

Auch das Arbeiten mit der AppBar inkl. deren Buttons wurde nun stark vereinfacht. Die neue Command Bar repräsentiert z.B. den rechten unteren Teil der AppBar. Wird eine App in der Snap View etc. angezeigt sorgt der Container automatisch bei allen enthaltenen AppBar-Buttons dafür, dass das Layout sinnvoll an die neuen Größenverhältnisse angepasst wird (schrumpft Ränder, entfernt Textlabels, etc.).

Neu hinzugekommen ist auch eine Search Box. Somit ist es nun auf sehr einfachem Weg möglich, die InApp-Suche direkt im UI der App zu integrieren. Alles was man aus der Suche in der Charms Bar kennt, ist hier bereits implementiert. So ist es nicht notwendig, Funktionalität wie IME-Integration selbst zu entwickeln.

Searchbox

Abbildung 4 Search Box

Auch unbedingt zu erwähnen ist das neue Media Element das es ins neue Framework geschafft hat. Bisher war hier kein Out-Of-The-Box Media Element enthalten. Gerade für die Wiedergabe von Videos war dies bisher etwas ärgerlich. Hierfür mussten bisher 3rd Party-Lösungen wie z.B. das Player Framework auf Codeplex herhalten. Das neue Media  Element übernimmt nun die Wiedergabe von Mediendaten wie Videos oder Audiomaterial als Datei oder Stream. Die Steuerung wurde simple gehalten und stellt nur die üblichen Playback-Funktionalitäten gepaart mit den Size-Options wie Fullscreen zur Verfügung. Das visuelle Aussehen des Players kann hier nicht weiter mit Templates  verändert werden.

mediaelement

Abbildung 5 Das Media Element

Im Bereich „Graphics“ bekam das SwapChainBackgroundPanel Verstärkung: Das neue SwapChainPanel erlaubt es, XAML-Elementen DirectX Interoperabilität beizubringen. Dies war auch schon mit dem SwapChainBackgroundPanel möglich, allerdings nur, wenn es sich um ein Root Element handelt. Mit dem SwapChainPanel ist dies nun überall in der Objekthierarchie möglich.

Verbesserungen

Vorgestellt wurde unter diesem Punkt das Theming. Hier ist es nun möglich einzelne Komponenten eines bestehenden Themes zu überschreiben. Zur Verbesserung der Performance wird nun zu Beginn erst das Standard-Theme geladen. Alles Weitere kommt erst dynamisch zum Einsatz, wenn es gebraucht wird.

Auch wenn das Web View Control nicht neu ist – die Tatsache dass es ab Windows 8.1. nicht mehr starr „on Top“ in der Objekthierarchie ganz oben liegt und alle anderen Controls überlagert, ist durchaus neu und herzlich Willkommen. Vorbei sind die Quälereien mit XAML-Entwickler an dieser Stelle schon so lange durchleben musste. Die ZOrder machts nun möglich.  Gut so! Außerdem ist es nun möglich, mit dem Web View Control lokalen Content laden. Dies geschieht unter der Berücksichtigung aller relativen Pfade, Java Scripts sowie eingebetteter Medieninhalte. Um zukünftig besser auf Ladeaktivitäten reagieren zu können (beispielsweise für eine Status-Anzeige), wurden neue Lifecycle-Events  NavigationStarting, NavigationFailed und NavigationCompleted implementiert.

Im Control der Textbox gibt es nun ein neues Property PlaceholderText. Dieser Text wird als Wasserzeichen in der Textbox angezeigt, solange das eigentliche Textattribut noch nicht bestückt wurde. Außerdem ist die Textbox nun auch in der Lage, Hyperlinks und farbige Fonts zu unterstützen.

Neu ist auch das signierte Appx-Format. Anders wie bisher wird dieses nicht mehr als text based markup, sondern in binary formatiert.

Des Weiteren wurde das Framework um eine Rendering API für PDF-Dokumente erweitert. Es ist somit nun möglich, mit dem Bordwerkzeug PDF-Dateien auszulesen und weiterzuverarbeiten.

Neues Projekt-Template

In Visual Studio 2013 wurde ein neues Projekt-Template integriert. Die „Hub App“ basiert auf den oben vorgestellten Hub-Controls und bietet eine Projekt-Schablone für Apps mit dem Look and Feel wie es zum Beispiel bei den neuen Bing Apps zum Einsatz kommt, die mit dem neuen Windows 8.1. ausgeliefert werden.

HubAppProjectTemplate

Abbildung 6 Das neue Hub App Template im Visual Studio 2013

Fazit

Die Neuerungen in XAML scheinen nicht enden zu wollen – Tonnen von neuen Features und Verbesserungen haben hier den Weg ins Framework geschafft. Es ist eine wahre Freude sich durch die neuen Controls und Features zu hangeln. Es  wurde auch viel auf Kritik reagiert, vielleicht sogar schneller als damals bei WPF. So gibt es nun endlich ein Media Element und ein Web View Control, das nicht mehr so widerspenstig auftritt. Das neue Hub Control inkl. Projekt-Templates ermöglicht es nun eine ganze Ecke schneller zu einer Windows Store App zu kommen, die sich „richtig“ anfühlt. Es wird hier in den nächsten Wochen und Monaten noch viel zu lesen und zu schreiben geben, um dem Thema gerecht werden zu können. XAML-Entwickler – Freut euch drauf!

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>