Keine Angst vor XAML

Inhalt:

Weitere Links:

Einführung in XAML

In diesem kleinen Tutorial will ich versuchen eine kurze Einführung in XAML zu geben, so dass Anwender, die bisher ausschließlich mit der Designer-Oberfläche von Blend für Visual Studio arbeiten und mit Respekt einen großen Bogen um die XAML-Darstellung machen, auch ein grobes Verständnis davon haben und bei Bedarf die Vorteile der Code-Darstellung nutzen können.

XAML steht für Extensible Application Markup Language und wurde von Microsoft 2009 erstmalig veröffentlicht. Es handelt sich dabei um eine XML-basierte Sprache zur deklarativen Beschreibung von Benutzeroberflächen im weitesten Sinne.

Microsoft verwendet XAML in unterschiedlichen Derivaten im Zusammenhang mit folgenden Technologien: WPF, Silverligt, Xamarin, UWP, WinUI. Auch für die zukünftige Technologie mit dem Arbeitstitel „Code Reunion“ wird XAML verwendet.

XAML-Darstellung in Blend für Visual Studio einschalten

Mit Hilfe der Symbole in der Fußleiste lässt sich die XAML-Darstellung ein- und ausblenden.

Typischer Weise empfiehlt sich die „Horizontale Teilung“, alternativ ist auch eine „Vertikale Teilung“ des Fensters möglich.

Wesentliche Eigenschaften von XAML

XAML-Dateien bestehen aus sogenannten Elementen, welche durch Tags beschrieben werden. Auf ein Start-Tag muss zwingend ein End-Tag folgen, dazwischen ist der Inhalt (Content) eingebettet.

Leere Elemente, die keine Kind-Elemente haben, können mit einem abweichenden Tag, welches mit „<“ beginnt und mit „/>“ endet, ausgezeichnet werden, es kann aber auch die oben dargestellte Auszeichnung verwendet werden.

XAML-Dateien sind hierarchisch strukturiert, die Hierarchie wird durch „Einrücken“ der Kind (Child)-Elemente verdeutlicht. Das Einrücken ist aber nicht das entscheidende Kriterium für die Eltern-Kind-Beziehung, sondern dient nur der besseren Lesbarkeit. Es ist daher dringend anzuraten das „Einrücken“ auch korrekt anzuwenden, ansonsten werden XAML-Dateien schnell unlesbar.

Jedes Element besitzt nur ein Elternelement (Parent).
Die Groß­/Kleinschreibung muss beachtet werden.

Eigenschaften und Einstellungen werden im Element als Attribut geführt. Im Beispiel oben ist also „Header“ ein solches Attribut, dem der Wert „Gruppe1“ zugeordnet wird. Werte von Attributen sind generell in Anführungszeichen (") eingeschlossen.

Vodergrund, Hintergrund (Z-Order)

Hierzugibt es in der XAML-Datei eine ganz einfache Festlegung. Da die Datei sequentiell von oben nach unten abgearbeitet wird, überlappen oder überzeichnen Elemente weiter unten in der Datei andere Elemente, die weiter oben definiert sind. Um ein Element mehr in den Vordergrund zu bringen, kann man es also einfach ausschneiden und weiter oben in der Datei wieder einfügen.

Insight Facilities (Made in Germany)

Insight Facilities die herstellerneutrale modulare Management-Bedienebene (MBE) für die Gebäudeautomation (Building Automation) mit Vektorgrafik auf Basis XAML. Sie erfüllt die Anforderungen einer BACnet Operator Workstation (B-OWS).

Insight Facilities in der Gebäudeautomation

Intellisense, IntelliCode (Experten im Hintergrund)

„IntelliSense“ bezeichnet die Eingabehilfen in Microsoft-Produkten, z.B. Office oder Visual Studio. IntelliSense ist ein allgemeiner Begriff für verschiedene Codebearbeitungsfunktionen, einschließlich: Code-Vervollständigung, Parameterinformationen, Kurzinformationen und Mitgliederlisten. IntelliSense-Funktionen werden manchmal mit anderen Namen aufgerufen, z. B. ‚Code-Vervollständigung‘, ‚Inhaltsunterstützung‘ und ‚Code-Hinweise‘.

Bezogen auf die XAML-Codierung in Blend für Visual Studio verhält es sich wie folgt:
Gibt man in einer neuen Zeile „<“ für den Beginn eines neuen Starttags ein, öffnet sich eine Auswahlbox, die eine mögliche Auswahl anbietet. Ganz oben mit * gekennzeichnet sind die sogenannten IntelliCode-Einträge, die besonders empfohlen werden.

Wenn man nun ein paar Zeichen des gewünschten Tags eingibt, wird die Auswahl auf die passenden Einträge reduziert. Die eingegebenen Zeichen müssen dabei nicht zwingend die Anfangsbuchstaben des Tags sein.

Wir wählen in unserem Beispiel mal das Tag „Button“ aus. und geben anschließend ein weiteres Leerzeichen ein, es erscheint nun die Auswahlliste der möglichen Attribute mit Icon=Schraubenschlüssel sowie weiterer Elemente.

Wir wählen hier „Content“ aus, geben anschließend den gewünschten Text „Weiter“ ein und schließen das Tag mit „/“ ab, worauf automatisch auch „>“ eingetragen wird. Das Tag ist nun fertig und sieht wie folgt aus.

Eingaben in den verschiedenen Fenstern werden weitestgehend sofort auf andere Fenster synchronisiert, so dass man sofort die Auswirkungen der jeweiligen Änderung nachverfolgen kann.

Kommentare

Im XAML-Code können auch Kommentare eingegeben werden, somit besteht die Möglichkeit ein Bild generell oder bestimmte Teile davon zu kommentieren oder zu dokumentieren.

Auch hier hilft uns wieder IntelliSense. Wir geben „<“ ein und wählen dann den Eintrag“!–“ aus.

Der fertige Kommentar sieht wie folgt aus

Alternativ können auch beliebige Zeilen im Code markiert werden und dann zu Kommentar umgewandelt werden. Hierzu markieren wir mal die folgenden beiden Zeilen

und verwenden nun die Funktion um Code zu kommentieren.

Hierbei erhalte wir das folgende Ergebnis.

Es ist jedoch zu beachten, dass beim Bearbeiten von Bildern im Designer durch Einfügen, Löschen und Verschieben von Elementen der Bezug des Kommentars (in der Regel zu nachfolgenden Elementen) verloren gehen kann.