XAMl-Kolumne: WPF und Windows-Apps

XAML-Tipp: XAML-Code formatieren mit XAML Magic
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: „XAML: XAML-Code formatieren mit XAML Magic“.

Bei der Arbeit mit XAML kommt es immer mal wieder zu unangenehmen Workflows. Zum Beispiel kennt jeder XAML-Entwickler folgendes Szenario: Es wird erst ein bestimmtes Steuerelement gesucht und anschließend das benötigte Attribut. Oft ist es nicht auf den ersten Blick ersichtlich und Visual Studio überrascht nach dem Schreiben eines neuen Attributs mit dem Hinweis: Dieses Attribut existiert bereits.

XAML-Code formatieren mit XAML Magic

Es wird also eine bessere Übersicht benötigt, sodass man schneller und einfacher arbeiten kann. Zur Lösung dieses Problems existieren schon lange Best- Practices-Design-Guidelines. Diese beinhalten kurz zusammengefasst die folgenden drei Regeln zur Struktur:

  1. x:Name sollte immer an erster Stelle stehen.
  2. Attribute sollen je nach Priorität in eigenständigen Zeilen untereinanderstehen.
  3. Zusammenhängende Attribute wie Height und Width, oder HorizontalAlignment und VerticalAlignment, gehören immer gruppiert zusammen.

Fortgeschrittene XAML-Entwickler haben diese Regeln bereits fest verinnerlicht, dennoch gibt es oftmals weitere Probleme. Beim Speichern verändert Visual Studio einfach die Formatierung, oder man ist bei der Entwicklung so stark mit der Funktionalität beschäftigt, dass man sich nicht auf eine saubere Struktur konzentrieren kann. Ganz nach dem Motto: Das räume ich später auf, wenn ich mal wieder etwas mehr Zeit habe. Viel angenehmer wäre doch, wenn die Formatierung automatisch nach den Best Practices vonstattengehen würde.

Schnell und überall: Datenzugriff mit Entity Framework Core 2.0

Dr. Holger Schwichtenberg (www.IT-Visions.de/5Minds IT-Solutions)

C# 7.0 – Neues im Detail

Christian Nagel (CN innovation)

Genau diese „Magie“ bietet eine Visual-Studio-Extension namens XAML Magic. Sie ist ein Fork vom bekannten XAML Styler und ermöglicht etwas mehr Konfigurationsmöglichkeiten. Die Erweiterung gibt es hier zum Download. In Listing 1 wird ein etwas unschöner XAML-Code gezeigt und in Listing 2 der von XAML Magic formatierte Code, der schön säuberlich nach den Guidelines aufgeräumt wurde. XAML Magic startet man mit einem Rechtsklick im XAML-Editor, der sich an erster Stelle im Kontextmenü befindet (Abb. 1).

Listing 1: Eine XAML-Struktur, die man vermeiden sollte

<Grid>

<Grid HorizontalAlignment="Left" Height="224" Margin="59,65,0,0" VerticalAlignment="Top" Width="403">

<Grid.RowDefinitions>

<RowDefinition/>

<RowDefinition/>

</Grid.RowDefinitions>

<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="10,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="383"/>

<StackPanel HorizontalAlignment="Left" Height="92" Margin="10,10,0,0" VerticalAlignment="Top" Width="383" Grid.Row="1" Orientation="Horizontal">

<Button x:Name="CustomersButton" Content="Customers" Width="75"/>

<Button Content="Projects" x:Name="ProjectsButton" Width="75"/>

<Button Content="Money" Width="75" x:Name="MoneyButton"/>

</StackPanel>

</Grid>

</Grid>
Listing 2: XAML Magic formatiert XAML-Code automatisch nach Guidelines

<Grid>

<Grid

Width="403"

Height="224"

Margin="59,65,0,0"

HorizontalAlignment="Left"

VerticalAlignment="Top">

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

</Grid.RowDefinitions>

<Rectangle

Width="383"

Height="100"

Margin="10,10,0,0"

HorizontalAlignment="Left"

VerticalAlignment="Top"

Fill="#FFF4F4F5"

Stroke="Black" />

<StackPanel

Grid.Row="1"

Width="383"

Height="92"

Margin="10,10,0,0"

HorizontalAlignment="Left"

VerticalAlignment="Top"

Orientation="Horizontal">

<Button

x:Name="CustomersButton"

Width="75"

Content="Customers" />

<Button

x:Name="ProjectsButton"

Width="75"

Content="Projects" />

<Button

x:Name="MoneyButton"

Width="75"

Content="Money" />

</StackPanel>

</Grid>

</Grid>
Abb. 1: XAML Magic im XAML-Editor ausführen

Abb. 1: XAML Magic im XAML-Editor ausführen

 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -