Adaptive Design mit Windows 10 UWP Apps und Blend

User Interfaces die sich an die Größe des Gerätes anpassen werden responsive (Bootstrap) oder adaptive Design genannt. Für die neue Universal Windows Platform liefert Microsoft die nötigen Features für alle UX Anwendungsfälle mit. Für den Design Prozess hilft Expression Blend 2015. In diesem Blogpost wird Schritt für Schritt erklärt wie man dank der neuen Adaptiven Trigger Userinterfaces ganz ohne Code gestalten kann.

Der einfache Anwendungsfall blendet ein UI Element, in dem Fall ein Button, aus wenn der nutzbare Bereich der App einen Grenzwert unterschreitet. In der Praxis werden häufig ganze Spalten mit Content ausgeblendet, wenn der Benutzer zb ein Smartpone nutzt.

In einem Universal Projekt wird ein Button in den XAML Dokument Tree per Drag und Drop aus der Objekt Liste (Toolbar) eingefügt.

image

Die Eigenschaft des Buttons wird im Eigenschaftsfenster (Property) verändert. Die Visibility auf Collapsed. Der Button ist damit nicht sichtbar.

Nun wird das Element Grid im Objekt und Zeitachse Fenster ausgewählt. Im Fenster Zustände (States) von Blend für Visual Studio wird zuerst eine Visual State Gruppe (1) hinzugefügt und dann ein Status ergänzt. Dieser wird hier mit dem Namen gross benannt.

image

Rechts im UI Designer ist das Formular rot umrandet. Das zeigt an, das nun der Recording Modus aktiv ist und jede Änderung des UI’s Bestandteil der Statusgruppe ist. Also Vorsicht.

Als nächstes wird das erste Icon mit dem Blitz neben dem Status “Edit Adaptive Triggers” geclickt. Im Folgenden StateTriggerBase Auflistungs-Editor wird ein Adaptive Trigger hizugefügt. In den Eigenschaften rechts, wird der Schwellwert von MinWindowWidth auf 1000 eingestellt.

image

Nun muss noch die Aktion definiert werden, die Sichtbarkeit des Buttons zu ändern. Dazu wird der nächste Button “Übergang hinzufügen” gewählt. ( Plus Zeichen –Pfeil nach rechts). Man kann den Statuswechsel als Kriterium auswählen- hier von irgendwo (Stern) nach gross.

image

Der Button wird ausgewählt (zb per Objekte und Zeitachse Fenster) und in den Eigenschaften die Visibility auf Visible gesetzt.

image

Blend zeigt über das schwarze Quadrat an, das im XAML die Eigenschaft Visibility explizit definiert ist.

Zu Kontrolle kann im Designer die XAML Ansicht genutzt werden.

   1:       <VisualStateManager.VisualStateGroups>
   2:              <VisualStateGroup x:Name="VisualStateGroup">
   3:                  <VisualStateGroup.Transitions>
   4:                      <VisualTransition GeneratedDuration="0" To="gross"/>
   5:                  </VisualStateGroup.Transitions>
   6:                  <VisualState x:Name="gross">
   7:                      <VisualState.Setters>
   8:                          <Setter Target="button.(UIElement.Visibility)" Value="Visible"/>
   9:                      </VisualState.Setters>
  10:                      <VisualState.StateTriggers>
  11:                          <AdaptiveTrigger MinWindowWidth="1000"/>
  12:                      </VisualState.StateTriggers>
  13:                  </VisualState>
  14:              </VisualStateGroup>
  15:          </VisualStateManager.VisualStateGroups>

 

Dem erfahrenen XAML Entwickler fällt nun auf das im Vergleich zu WPF der Code wesentlich kürzer ist. Es werden keine Storyboards verwendet sondern einfache Setter.

Zu dem Thema Windows 10 UWP Apps Entwickeln erfahren sie mehr auf der ADC. Eine passende Blend oder XAML Schulung findet sich auf den ppedv Seiten.

Kommentare sind geschlossen