Kolumne: XAML Expertise

XAML-Tipp: UWP – Visual States mit XAML Diff generieren
Keine Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „UWP: Visual States mit XAML Diff generieren“

Der Visual State Manager unter XAML ermöglicht den Wechsel von unterschiedlichen Designzuständen. Ein zeitverzögerter Übergang bewirkt einen Animationseffekt. Zum Erzeugen von unterschiedlichen Zuständen (Visual States) dient das kostenlose Tool Blend for Visual Studio. Einige Entwickler sind nicht mit Blend vertraut und schreiben mühevoll ihre eigenen Visual State Setter im XAML. Eine interessante Alternative zum Erzeugen von Visual States bietet die kostenlose Windows-10-App „XAML Diff“ von Fons Sonnemans. Die Idee dahinter ist, den unveränderten XAML-Code in das Tool einzufügen. Dann wird wie gewohnt in Visual Studio der XAML für den gewünschten Zustand verändert. Anschließend wird der neue XAML-Code ebenfalls kopiert und in XAML Diff eingefügt. Das Tool analysiert die Unterschiede zwischen beiden Versionen und generiert die gewünschten Visual States.

Als Beispiel betrachten wir ein einfaches Rectangle-Steuerelement, das wir dem XAML hinzufügen. Es erhält ein paar Standardeinstellungen (Listing 1). Der komplette XAML-Code der Page wird im XAML-Diff-Tool im oberen Bereich eingefügt.

<Rectangle x:Name="MyRectangle" 
           Fill="Azure"
           Width="400"
           Height="400"/>

Das Rectangle-Steuerelement erhält jetzt zusätzlich die Eigenschaften für eine dicke schwarze Umrandung (Listing 2). Der gesamte XAML-Code der Page wird jetzt ebenfalls kopiert und im XAML-Diff-Tool im unteren Bereich eingefügt.

<Rectangle x:Name="MyRectangle" 
           Fill="Azure"
           trokeThickness="12"
           Stroke="Black"
           Width="400"
           Height="400"/>

Durch Klicken auf den Generate-Button in XAML Diff werden die neuen Visual State Setters per Standard generiert (Abb. 1). Neben einfachen Visual State Setters gibt es noch weitere Einstellungsmöglichkeiten für die Generierung. Der gesamte XAML-Code soll mit Visual-State-Definitionen generiert werden: Visual State Groups, Visual State Group, Visual State oder Visual State Trigger.

Abb.1: Visual States mit XAML Diff generieren

Abb.1: Visual States mit XAML Diff generieren

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -