© best_vector/Shutterstock.com
Windows Developer
Kolumne: XAML Expertise

Kolumne: XAML Expertise


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 Expertisen: „UWP: Visual States mit XAML Diff generieren“, „UWP: Das neue MenuBar-Steuerelement“ und „UWP: Eingabesteuerelemente abrunden mit CornerRadius“. Viel Spaß mit XAML 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 [1]. 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, wie in Listing 1 zu sehen. Der komplette XAML-Code der Page wird dann im XAML-Diff-Tool im oberen Bereich eingefügt.

Listing 1: Ein einfaches Rectangle-Steuerelement

<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.

Listing 2: Das Rectangle-Steuerelement erhält einen neuen Designzustand

<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.

biswanger_xaml_1.tif_fmt1.jpgAbb. 1: Visual S...
Windows Developer
Kolumne: XAML Expertise

Kolumne: XAML Expertise

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 Expertisen: „UWP: Visual States mit XAML Diff generieren“, „UWP: Das neue MenuBar-Steuerelement“ und „UWP: Eingabesteuerelemente abrunden mit CornerRadius“. Viel Spaß mit XAML Expertise.

Gregor Biswanger


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 Expertisen: „UWP: Visual States mit XAML Diff generieren“, „UWP: Das neue MenuBar-Steuerelement“ und „UWP: Eingabesteuerelemente abrunden mit CornerRadius“. Viel Spaß mit XAML 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 [1]. 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, wie in Listing 1 zu sehen. Der komplette XAML-Code der Page wird dann im XAML-Diff-Tool im oberen Bereich eingefügt.

Listing 1: Ein einfaches Rectangle-Steuerelement

<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.

Listing 2: Das Rectangle-Steuerelement erhält einen neuen Designzustand

<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.

biswanger_xaml_1.tif_fmt1.jpgAbb. 1: Visual S...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang