{"id":6000,"date":"2015-06-17T12:00:17","date_gmt":"2015-06-17T10:00:17","guid":{"rendered":"http:\/\/www.centigrade.de\/blog\/?p=6000"},"modified":"2019-01-21T09:15:37","modified_gmt":"2019-01-21T08:15:37","slug":"kontextsensitive-user-interfaces-mit-der-universal-windows-platform","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/kontextsensitive-user-interfaces-mit-der-universal-windows-platform\/","title":{"rendered":"Kontextsensitive User Interfaces mit der Universal Windows Platform"},"content":{"rendered":"

Vor kurzem habe ich auf der dotnet Cologne<\/a>\u00a0und auch\u00a0auf der DWX Developer Week<\/a> einen Vortrag mit dem Titel „4K und andere Herausforderungen – Next Generation Desktop UIs f\u00fcr Windows 10“ gehalten. Der Vortrag hat den Begriff der Universal App Platform<\/em> auf Windows 10 beleuchtet und was ein Entwickler dieser entlocken kann, um zukunftsorientierte User Interfaces umzusetzen. Folgender Blogbeitrag soll nicht nur diejenigen erreichen, die meine Session besuchen konnten, sondern auch diejenigen, die nicht vor Ort waren. Der Artikel soll dar\u00fcber hinaus noch tiefergehende Informationen zur Thematik liefern. Analog zu meiner Session, in der es gegen Ende einen Live-Coding-Teil gab, wird es auch hier schlie\u00dflich Code geben, wobei ein paar der neuen Universal App Features exemplarisch zu sehen sind.<\/p>\n

R\u00fcckblick auf Windows 8<\/h3>\n
\"Windows

Windows 8 Startbildschim (Quelle: Microsoft News Center<\/a>)<\/p><\/div>\n

One UI to rule them all<\/em>, das war der Eindruck, den Windows 8 im Jahr 2012 wohl bei den meisten Anwendern vermittelte. Die neue touch-orientierte, grelle Kacheloberfl\u00e4che und das fehlende Startmen\u00fc stellten f\u00fcr viele Nutzer einen starken Konsistenzbruch dar. F\u00fcr den Endbenutzer weniger sichtbar, tat sich zu der Zeit auch aus Entwicklersicht einiges. Im Sinne der Platform Convergence Journey<\/a> wurde mit Einf\u00fchrung von Windows 8 der Betriebssystem-Kernel zwischen Xbox, Windows 8 und Windows Phone 8 vereinheitlicht. Mit Windows 8.1 wurde dann das App-Modell zusammengef\u00fchrt. Bereits damals war es unter dem Begriff Universal App<\/em><\/a> schon m\u00f6glich eine Windows Store App mit einer App Identit\u00e4t und m\u00f6glichst gleicher Codebasis f\u00fcr Desktops und Smartphones zu erschaffen, wenn auch etwas umst\u00e4ndlich.<\/p>\n

\"Platform

Platform Convergence Journey (Quelle: Screencapture Microsoft Virtual Academy<\/a>)<\/p><\/div>\n

Die Windows 10 Philosophie<\/h3>\n
\"Windows

Windows 10 Desktop und Startmen\u00fc (Quelle: Microsoft News Center<\/a>)<\/p><\/div>\n

Mit Windows 10 erscheint es zun\u00e4chst so, als gehe Microsoft wieder einen Schritt zur\u00fcck. Aus Sicht eines Desktopnutzers ist dies sicherlich richtig. Windows Store Apps k\u00f6nnen im Fenster laufen, es gibt wieder ein klassisches Startmen\u00fc in Verbindung mit einigen Kacheln und Touchbedienung ist nun nicht mehr der Standardfall. Nur wenn Windows beispielweise auf einem Tablet l\u00e4uft, wird das UI spezifisch angepasst. Aus Entwicklersicht geht man jedoch weiterhin einen konsequenten Weg in Richtung Vereinheitlichung: K\u00fcnftig gibt es keine Trennung mehr von Windows Versionen f\u00fcr verschiedene Ger\u00e4te. Das Windows 10<\/em> wird auf allen Ger\u00e4ten gleicherma\u00dfen laufen, ob Smartphone, Desktop, Xbox, Surface Hub und sogar HoloLens oder IoT Ger\u00e4te wie der RaspberryPi. Unter der sogenannten Universal Windows Platform<\/a> wird auch eine k\u00fcnftige Windows App auf allen Ger\u00e4ten gleicherma\u00dfen laufen – und dies im Sinne von write once, deploy everywhere<\/em>.<\/p>\n

\"Universal

Universal Windows Platform (Quelle: Microsoft Blog<\/a>)<\/p><\/div>\n

Der Entwickler entwickelt fortan eine App \u2013 wirklich ein Binary \u2013 welche auf allen Ger\u00e4ten ver\u00f6ffentlicht wird und direkt lauff\u00e4hig ist. Dies soll jedoch auf keinen Fall bedeuten, dass die Anwendung auf allen Ger\u00e4ten gleich erscheint. Vielmehr sollen die Entwickler die UI an die verschiedenen Endger\u00e4te anpassen, sei es eine Smartwatch, eine mobile Line-of-Business App, eine Desktop-Anwendung oder ein UI f\u00fcr eine K\u00fchlschranksteuerung im Internet of Things. Durch das MVVM Pattern<\/a> und eine saubere Schichtentrennung ist dies sehr gut m\u00f6glich, da sich die interne Gesch\u00e4ftslogik von der austauschbaren, anpassbaren und hochoptimierten Darstellungsschicht trennen l\u00e4sst.<\/p>\n

\"MVVM:

MVVM: Model-View-ViewModel Softwareschichtung<\/p><\/div>\n

Spezialisierte UIs<\/h3>\n

Wie sieht nun diese Spezialisierung aus? Wo und welche Anpassungen sind f\u00fcr verschiedene Ger\u00e4te n\u00f6tig? Welche Mittel bieten sich mir als Entwickler meine UI anzupassen? Wie filtere ich technisch verschiedene Ger\u00e4teklassen und nehme diesbez\u00fcglich Anpassungen vor?<\/p>\n

Die intuitivste Komponente, die einem in den Sinn kommt, wenn man an verschiedene Ger\u00e4te denkt, sind die verschiedenen Formfaktoren, wie Displaygr\u00f6\u00dfe, Aufl\u00f6sung und daraus resultierend die physikalische \u2013 sprich vom Ger\u00e4t gegebene \u2013 Pixeldichte. Nicht zu vergessen ist in diesem Zusammenhang auch die Entfernung zum Betrachter: der Sichtabstand. Um dies kurz zusammen zu fassen, kann man sagen, eine h\u00f6here physikalische Aufl\u00f6sung<\/a> auf kleinerer physikalischer Bildschirmdiagonalen bedeutet eine h\u00f6here Pixeldichte, auch PPI (pixel per inch) genannt. Diese wird umso wichtiger, je n\u00e4her der Betrachter dem Ger\u00e4t ist. Daher sind hochaufl\u00f6sende Displays bei Smartphones keine Besonderheit mehr. Man kann h\u00f6here PPI nutzen, um entweder mehr Inhalt auf gleicher Fl\u00e4che unterzubringen, was nur bis zu einem bestimmten Grad sinnvoll ist, oder man kann gleichen Inhalt in besserer Qualit\u00e4t darstellen. Runde Formen, die auf digitalen Ger\u00e4ten immer nur Ann\u00e4herungen sind, k\u00f6nnen so ihrer Idealdarstellung immer n\u00e4her kommen. F\u00fcr den Nutzer erscheint die Anwendungsoberfl\u00e4che dann crisp und smooth.<\/p>\n

Es reicht oft aber nicht, nur diese Faktoren zu betrachten. Mit dem aus dem Web stammenden Responsive Design<\/em><\/a> unterscheidet man beispielsweise Desktop und Smartphone anhand der Aufl\u00f6sung und macht beispielsweise zweispaltigen Inhalt einspaltig, zeigt nur noch die essentiellen Inhalte an oder verschiebt sie in sekund\u00e4re Navigationslevel. Dies ist ein erster Schritt, der jedoch schnell an seine Grenzen st\u00f6\u00dft. Responsive Design ist relativ technisch motiviert und ber\u00fccksichtigt zun\u00e4chst nur Ger\u00e4teparameter. Bezieht man beim UX Design die Benutzerrolle und den aktuellen Nutzungskontext mit ein, kommt man zu deutlich besseren, intuitiveren Ergebnissen. Diese essentielle Ber\u00fccksichtigung des Nutzers nennt sich kontextsensitives Design.<\/p>\n

Kontextsensitives Design<\/h3>\n
\"Microsoft

Microsoft HoloLens (Quelle: Microsoft News Center<\/a>)<\/p><\/div>\n

Extrembeispiele, die von kontextsensitivem Design profitieren w\u00e4ren beispielsweise Anwendungen f\u00fcr Virtual Reality und Augmented Reality Ger\u00e4te. Denn was bedeutet der Begriff Aufl\u00f6sung f\u00fcr diese Ger\u00e4teklassen? F\u00fcr eine VR-Brille ist eine hohe Aufl\u00f6sung in erster Linie wichtig damit der Benutzer kein st\u00f6rendes Fliegengitter<\/em> vor seinem Auge erkennt, schlie\u00dflich ist das Display in sehr geringem Abstand davor. Viel wichtiger ist an dieser Stelle die wahrgenommene Aufl\u00f6sung und wie das UI in der 3D-Szene der VR- oder AR-Anwendung platziert ist. Wie in Microsofts Keynote der Build 2015<\/a> zu sehen, k\u00f6nnten zum Beispiel UI Elemente im realen Raum platziert werden. Mit klassischem Responsive Design l\u00e4sst sich solch eine Herausforderung nur schlecht l\u00f6sen.<\/p>\n

\"Microsoft

Microsoft HoloLens: Konzept einer Augmented Reality Anwendung (Quelle: Microsoft News Center<\/a>)<\/p><\/div>\n

Dabei gen\u00fcgt es bereits sich, allein den Desktop \u2013 also ein station\u00e4rer Rechner \u2013 zu betrachten, sei es ein B\u00fcro-PC, ein Konferenzmonitor oder ein gro\u00dfer Screen in einer Leitwarte einer Raumstation. Auch hier kommt man schnell in Situationen, die mit Responsive Design allein nicht zu l\u00f6sen sind.<\/p>\n

\"Kontrollraum

Kontrollraum der esa Raumstation (Quelle: esa Homepage<\/a>)<\/p><\/div>\n

Es gibt so manche Entwickler, die mit Monitoren in hochkant-Ausrichtung arbeiten. Gibt es Anwendungen, die darauf eingehen, ob der Monitor hochkant gestellt wurde? Pair-Programming Sessions oder walkthrough-artige Codereviews finden mit mehreren Personen vor einem Bildschirm statt. Dabei stehen manche Personen eventuell n\u00e4her am Bildschirm, andere weiter weg. Welche Anwendungen ber\u00fccksichtigen diese Szenarien?<\/p>\n

\"Ein

Ein typischer Desktop?<\/p><\/div>\n

Microsofts Surface Hub<\/a> ist ein riesiger Konferenzbildschirm mit 84 Zoll, mehreren Kameras, ausgerichteten Mikrofonen und Stifteingabe. Der Pr\u00e4sentator steht direkt vor dem Ger\u00e4t und kann \u00fcber einen Stift direkt in Anwendungen zeichnen, viele Betrachter sitzen in einiger Entfernung und beobachten das Geschehen und es k\u00f6nnen sogar Teilnehmer nur remote zugeschaltet sein, die aber gleichen Inhalt auf Ihrem heimischen PC sehen. Bisher ist mir keine Meeting-Anwendung bekannt, die ohne Umstellungen auf solch einen Fall optimiert w\u00e4re.<\/p>\n

\"Microsoft

Microsoft Surface Hub in Meetings (Quelle: Microsoft News Center<\/a>)<\/p><\/div>\n

Solche Herausforderungen, die sich breit ausgerichteten Universal Apps stellen, k\u00f6nnen nur durch kontextsensitives Design auf dem UI gel\u00f6st werden. Dabei kennt die Anwendung ihren Nutzungskontext und reagiert dementsprechend. Durch im Ger\u00e4t vorhandene Eye-Tracking-Sensoren k\u00f6nnte der Sichtabstand des Betrachters erkannt und Anwendungen dementsprechend angepasst werden. Eine App wei\u00df, ob sie auf einem hochkant ausgerichteten Monitor l\u00e4uft und optimiert Ihren Inhalt auf dieses Szenario. Erst wenn das Ger\u00e4t \u00fcber ein Mikrofon als Eingabeger\u00e4t verf\u00fcgt, wird beispielsweise Push-To-Talk-Funktionalit\u00e4t eingeblendet. Es gibt hier zahlreiche Herausforderungen, die nur gut gel\u00f6st werden k\u00f6nnen, wenn man den Nutzer nicht aus den Augen verliert. Aus technischer Sicht h\u00f6rt sich das f\u00fcr einen Entwickler jedoch nach sehr viel Zusatzarbeit an. Das Auslesen von Eye-Tracking Informationen und darauf reagierende Layout- und Inhaltsoptimierungen erscheinen wie eine Herkulesaufgabe. Der Entwickler bekommt mit Windows 10, Visual Studio 2015 und der Universal App Platform neue Features, die eine gute Unterst\u00fctzung bieten, um kontextsensitive Software mit guter User Experience entwickeln zu k\u00f6nnen. Im Folgenden sollen ein paar dieser Werkzeuge betrachtet werden.<\/p>\n

UWP Features unter Windows 10<\/h3>\n

Wie schon in WPF die device independent pixels<\/a>, geht Microsoft bei der UWP einen Schritt weiter in Hinsicht eines abstrakten Pixelbegriffs und f\u00fchrt die sogenannten effective pixels<\/em><\/a> ein. Diese basieren auf der Pixeldichte des Ger\u00e4tes und eines heuristischen Sichtabstands. Daraus ergibt sich eine abstrakte Pixelinformation, sodass der Entwickler sich nicht mehr um diese physikalischen Details k\u00fcmmern muss. Auf allen Ger\u00e4ten erscheinen<\/em> dem Betrachter demnach die Elemente in gleicher Gr\u00f6\u00dfe.<\/p>\n

Weiterhin gibt es mit dem RelativePanel<\/a> einen neuen Layoutcontainer, der es recht einfach m\u00f6glich macht, die Elemente innerhalb des Containers in Relation zueinander anzuordnen. Das ist besonders hilfreich, wenn sich das Layout dynamisch verhalten soll. Musste man fr\u00fcher ein Custom-Panel implementieren oder recht komplexe Umstellungen eines Grids durchf\u00fchren, so kann man nun das RelativePanel verwenden.<\/p>\n

Um auf verschiedene Ger\u00e4teklassen und Formfaktoren zu reagieren, wollen wir uns im Folgenden die sogenannten VisualState-Trigger<\/a> etwas genauer anschauen. Der von Microsoft vorgeschlagene Weg f\u00fcr ein adaptives Layout ist die Verwendung des VisualState-Managers und VisualStates f\u00fcr unterschiedliche Zust\u00e4nde der View.<\/p>\n

Beispielimplementierung: Ein eigener VisualState-Trigger<\/h2>\n

Stellen wir uns einmal folgendes Szenario vor: Der Nutzer besitzt einen Monitor mit der M\u00f6glichkeit den aktuellen Sichtabstand zu messen (z.B. \u00fcber eine Webcam, ein Headtracking-System, Infrarot, die Kinect o.\u00e4.). Als Entwickler einer Anwendung m\u00f6chte ich nun, dass die Schrift in meiner Anwendung auf den Sichtabstand des Betrachters angepasst wird. Diese sollte f\u00fcr ihn immer gleich gro\u00df erscheinen. Ob er nun sehr nah am Bildschirm (weil er z.B. Notizen mit einem Stift auf einem touch-sensitiven Monitor macht), in normalen Abstand davor oder in einer Pair-Session in etwas Entfernung davon sitzt. Als UI Entwickler m\u00f6chte ich diese \u00c4nderung technisch \u201eerkennen\u201c k\u00f6nnen, um anschlie\u00dfend in XAML recht einfach darauf zu reagieren. Dies soll nun beispielhaft umgesetzt werden. Dabei liegt der Fokus weniger auf der Ausarbeitung einer sch\u00f6nen und vollst\u00e4ndigen Anwendung als vielmehr darauf, die zur Verf\u00fcgung stehenden Features zu demonstrieren.<\/p>\n

Zun\u00e4chst erstellen wir ein neues Windows Universal App<\/em> Project, \u00f6ffnen dort die MainPage.xaml<\/span> und platzieren unseren Text dort. Gleichzeitig f\u00fchren wir examplarisch zwei Visual States ein, f\u00fcr den nahen und fernen Sichtabstand:
\n<\/code><\/p>\n

<<\/span>Grid<\/span> Margin<\/span>=\"25\"<\/span> Background<\/span>=\"White\"<\/span>><\/span>\r\n   <<\/span>VisualStateManager.VisualStateGroups<\/span>><\/span>\r\n      <<\/span>VisualStateGroup<\/span> x:Name<\/span>=\"CommonStates\"<\/span>><\/span>\r\n         <<\/span>VisualState<\/span> x:Name<\/span>=\"Near\"<\/span>><\/span>\r\n            <!-- Trigger and reaction missing for now. --><\/span>\r\n         <\/<\/span>VisualState<\/span>><\/span>\r\n         <!-- Here could be more states \u2026 --><\/span>\r\n         <<\/span>VisualState<\/span> x:Name<\/span>=\"Far\"<\/span>><\/span>\r\n            <!-- Trigger and reaction missing for now. --><\/span>\r\n         <\/<\/span>VisualState<\/span>><\/span>\r\n      <\/<\/span>VisualStateGroup<\/span>><\/span>\r\n   <\/<\/span>VisualStateManager.VisualStateGroups<\/span>><\/span>\r\n   <<\/span>TextBlock<\/span> x:Name<\/span>=\"Output\"<\/span>\r\n      FontSize<\/span>=\"20\"<\/span>\r\n      Text<\/span>=\"Lorem ipsum dolor sit amet, consetetur\u2026\"<\/span>\r\n      TextTrimming<\/span>=\"CharacterEllipsis\"<\/span>\r\n      TextWrapping<\/span>=\"Wrap\"<\/span> \/><\/span>\r\n<\/<\/span>Grid<\/span>><\/span>\r\n<\/pre>\n
 <\/p>\n
<<\/span>VisualState<\/span> x:Name<\/span>=\"Near\"<\/span>><\/span>\r\n   <<\/span>VisualState.StateTriggers<\/span>><\/span>\r\n      <<\/span>triggers:ViewDistanceTrigger<\/span> MaxViewDistance<\/span>=\"12\"<\/span> \/><\/span>\r\n   <\/<\/span>VisualState.StateTriggers<\/span>><\/span>\r\n   <!-- What to do? --><\/span>\r\n<\/<\/span>VisualState<\/span>><\/span>\r\n<\/pre>\n
 <\/p>\n
public<\/span> class<\/span> ViewDistanceTrigger : StateTriggerBase\r\n{\r\n   public<\/span> double<\/span> MinViewDistance { get<\/span>; set<\/span>; } = 0;\r\n   public<\/span> double<\/span> MaxViewDistance { get<\/span>; set<\/span>; } = double<\/span>.PositiveInfinity;\r\n\r\n   private<\/span> IViewDistanceDetector viewDistanceDetector;\r\n\r\n   public<\/span> ViewDistanceTrigger()\r\n   {\r\n      viewDistanceDetector = new ViewDistanceDetector();\r\n      viewDistanceDetector.ViewDistanceChanged +=\r\n\t     ViewDistanceDetector_ViewDistanceChanged;\r\n   }\r\n\r\n   private<\/span> void ViewDistanceDetector_ViewDistanceChanged\r\n      (object<\/span> sender, ViewDistanceChangedEventArgs eventArgs)\r\n   {\r\n      double<\/span> currentViewDistance = eventArgs.ViewDistanceInInch;\r\n   \r\n      if<\/span>((currentViewDistance >= MinViewDistance)\r\n\t     && (currentViewDistance <= MaxViewDistance))\r\n      {\r\n         SetActive(true<\/span>);\r\n      }\r\n      else<\/span>\r\n      {\r\n         SetActive(false<\/span>);\r\n      }\r\n   }\r\n}\r\n<\/pre>\n
 <\/p>\n
<<\/span>VisualState<\/span> x:Name<\/span>=\"Near\"<\/span>><\/span>\r\n   <<\/span>VisualState.StateTriggers<\/span>><\/span>\r\n      <<\/span>triggers:ViewDistanceTrigger<\/span> MaxViewDistance<\/span>=\"12\"<\/span> \/><\/span>\r\n   <\/<\/span>VisualState.StateTriggers<\/span>><\/span>\r\n   <<\/span>VisualState.Setters<\/span>><\/span>\r\n      <<\/span>Setter<\/span> \r\n         Target<\/span>=\"Output.FontSize\"<\/span>\r\n         Value<\/span>=\"{StaticResource FontSize.Small}\"<\/span> \/><\/span>\r\n   <\/<\/span>VisualState.Setters<\/span>><\/span>\r\n<\/<\/span>VisualState<\/span>><\/span>\r\n<<\/span>VisualState<\/span> x:Name<\/span>=\"Far\"<\/span>><\/span>\r\n   <<\/span>VisualState.StateTriggers<\/span>><\/span>\r\n      <<\/span>triggers:ViewDistanceTrigger<\/span> MaxViewDistance<\/span>=\"25\"<\/span> \/><\/span>\r\n   <\/<\/span>VisualState.StateTriggers<\/span>><\/span>\r\n   <<\/span>VisualState.Setters<\/span>><\/span>\r\n      <<\/span>Setter<\/span> \r\n         Target<\/span>=\"Output.FontSize\"<\/span>\r\n         Value<\/span>=\"{StaticResource FontSize.Large}\"<\/span> \/><\/span>\r\n   <\/<\/span>VisualState.Setters<\/span>><\/span>\r\n<\/<\/span>VisualState<\/span>><\/span>\r\n<\/pre>\n
 <\/p>\n
Selbstverst\u00e4ndlich w\u00e4ren ein animierter, fl\u00fcssiger \u00dcbergang und noch mehrere Zwischenzust\u00e4nde hier w\u00fcnschenswert. Um jedoch sehr knapp zu zeigen, wie man in einer Universal App eigene Trigger schreibt und kontextsensitive Anpassungen am UI vornimmt, sollte das an dieser Stelle gen\u00fcgen. Selbstverst\u00e4ndlich kann dieses Konzept auf eine Reihe anderer kontextbezogener Informationen ausgeweitet werden: Ist mein Monitor hochkant orientiert? Habe ich ein Mikrofon zur Spracheingabe zur Verf\u00fcgung? Ist ein Xbox Controller an meinem Ger\u00e4t angeschlossen? L\u00e4uft meine Anwendung auf einer bestimmten Ger\u00e4teklasse? All diese Informationen k\u00f6nnte man komfortabel in solche Trigger auslagern. Zu hoffen ist auch, dass Microsoft noch weitere eigene Trigger mitliefert und den Entwicklern einen Teil des Implementierungsaufwands abnimmt.<\/p>\n
Fazit<\/h3>\n
Windows 10 und die Universal App Platform liefern uns \u2013 wie eben gezeigt \u2013 Hilfsmittel, die UI f\u00fcr verschiedene Endger\u00e4te zu optimieren. Wenn Microsoft verspricht, dass eine App auf allen Ger\u00e4ten gleicherma\u00dfen laufen soll, m\u00fcssen sie dies auch tun. Andererseits kann man diese Tools auch nutzen, um schon allein das Desktop-Erlebnis seiner Anwendung zu optimieren. Erkenntnisse bez\u00fcglich verschiedener Nutzungsszenarien und \u2013rollen, die man bei der Entwicklung von Smartphone UIs kennengelernt hat, kann man auch auf den Desktop \u00fcbertragen. Auch in station\u00e4ren Umgebungen gibt es eine Vielzahl von Kontexten und unterschiedlichen Interaktionsm\u00f6glichkeiten auf die jeweils geeignet reagiert werden muss. Der Desktop ist, was das UX Design betrifft, in vielen F\u00e4llen noch nicht am Ende angekommen. Hier verstecken sich noch viele innovative Konzepte. Diese sollte man entdecken, nutzen und am Ende durch eine herausragende Anwendung beeindrucken.<\/p>\n
Download<\/h3>\n
Wer meine Session\u00a0zu Next Generation Desktop UIs f\u00fcr Windows 10 noch ein Mal anhand der Vortragsfolien nachvollziehen m\u00f6chte, kann das hier tun. Ich stelle auch gerne die Code Samples\u00a0von der Live Demo auf der DWX und Code Snippets aus diesem Blogbeitrag zum Download:<\/p>\n
Der Einfachheit wollen wir an dieser Stelle lediglich die FontSize unseres TextBlocks \u00e4ndern. Mit den neuen Setters im VisualState<\/a> ist diese diskrete \u00c4nderung sogar ohne komplexe Definition von Storyboards m\u00f6glich. Ein Feature was vor allem bei initialen Zustandswechseln hilfreich ist:
\n<\/code><\/p>\n
Dieser Trigger muss nun implementiert werden. Dazu kann man von StateTriggerBase<\/a><\/span> ableiten und innerhalb der Klasse \u00fcber die Methode SetActive<\/span> diesen (de)aktivieren. Der im XAML definierte VisualState wird aktiv, sobald SetActive(true)<\/span> im aufgerufen wird.
\nDer Trigger k\u00f6nnte beispielsweise eine Komponente IViewDistanceDetector<\/span> benutzen, welche f\u00fcr die Erkennung des Sichtabstands zust\u00e4ndig ist:
\n<\/code><\/p>\n
Momentan ist der AdaptiveTrigger<\/a><\/span> der einzige Trigger, den Microsoft mitliefert. Damit ist es lediglich m\u00f6glich, auf die Gr\u00f6\u00dfe des Bildschirms (gegeben in effective pixels) zu reagieren. Es gibt zun\u00e4chst keine M\u00f6glichkeit auf die hier gestellten Anforderungen zu reagieren. Gl\u00fccklicherweise k\u00f6nnen wir jedoch eigene Trigger schreiben und diese in XAML benutzen. Wir wollen beispielweise in unseren Near-State wechseln, sobald die ViewDistance 12 Zoll unterschreitet und dies per Trigger folgenderma\u00dfen abbilden:
\n<\/code><\/p>\n