Extensible Application Markup Language

Extensible Application Markup Language (XAML, ausgesprochen [ˈzæ:mɛl]) ist eine von Microsoft entwickelte Beschreibungssprache zur Gestaltung grafischer Benutzeroberflächen sowie zur Definition von Workflows in der Windows Workflow Foundation (WF). Zunächst wurde die neue deklarative Sprache für das .Net-Framework 3.0 und 3.5 in Windows Presentation Foundation (WPF) für WPF-Windows-Anwendungen entwickelt. In WPF wird XAML verwendet, weil dort Workflows wiederum mit XAML definiert werden können. XAML dient auch in Silverlight-Anwendungen und unter Windows 8 in auf der Windows Runtime basierenden Windows-Store-Apps dem Aufbau der grafischen Benutzeroberfläche.

Übersicht[Bearbeiten | Quelltext bearbeiten]

XAML ist eine XML-basierte Sprache, die verwendet wird, um grafische Elemente, Benutzeroberflächen, Verhaltensweisen, Animationen, Transformationen, Darstellung von Farbverläufen, Abspielen von Mediadateien und vieles mehr zu definieren. XAML wurde von Microsoft als die in der Windows Presentation Foundation, einer Desktop-orientierten Technologie, zu verwendende Auszeichnungssprache eingeführt. WPF stellt für 2D- und 3D-Objekte den Einsatz von Rotationen, Animationen und eine Reihe anderer Effekte und Funktionalitäten, die von XAML gerendert werden. XAML-Elemente können direkt Common-Language-Runtime-Objektinstanzen (CLR) abbilden, wohingegen Attribute CLR-Eigenschaften und Ereignisse auf diese Objekte abbilden können. Bei einer üblichen Verwendung werden XAML-Dateien von optisch orientierten Design- und Entwicklerwerkzeugen wie Microsoft Expression Blend, Microsoft Visual Studio, XAML Pad oder dem Windows Workflow Foundation Visual Designer generiert.

Obwohl XAML als wesentlicher Teil der WPF eingeführt wurde, ist der XAML-Standard an sich nicht spezifisch mit der WPF oder .NET verknüpft. Mit XAML kann man unter Verwendung jeder beliebigen anderen Programmierschnittstelle (englisch application programming interface, API) Anwendungen entwickeln, wobei XAML eine eigenständige Sprache darstellt. Der Hauptaspekt dieser Technologie ist die verringerte Komplexität, die Programme haben müssen, um XAML zu verarbeiten, weil es sich im Grunde um einfaches XML handelt. Da XAML auf XML basiert, können Entwickler und Designer gemeinsam Inhalte austauschen und bearbeiten, da der Code erst zur Laufzeit kompiliert wird.^[1][2] Ebenso wie bei XML wird in XAML zwischen Groß- und Kleinschreibung unterschieden.

Designer-Entwickler-Arbeitsfluss[Bearbeiten | Quelltext bearbeiten]

Bei der Anwendungsentwicklung ist XAML sozusagen die gemeinsame Sprache zwischen Designer und Entwickler. Der Grafiker gestaltet mit den Designertools die Benutzerschnittstelle und generiert XAML-Code. Der Entwickler greift diesen XAML-Code auf und entwickelt in seiner Sprache der Wahl die Programmlogik dazu. XAML-Objekte, die vom Designer angelegt wurden, werden vom Entwickler mit programmlogischer Funktionalität versehen. Beide, Designer und Entwickler, können praktisch gleichzeitig am selben Projekt arbeiten und müssen nicht mehr über Umwege miteinander kommunizieren.

In Silverlight- und WPF-Anwendungen wird diese Zusammenarbeit von Designer und Entwickler u. a. an der Verwendung von zwei unterschiedlichen Dateitypen für Benutzerschnittstelle und Programmlogik deutlich: die XAML-Datei (Dateierweiterung .xaml), die die hinterlegten grafischen XAML-Beschreibungen enthält, und eine mit dieser Datei verbundene CodeBehind-Datei, die die Programmlogik für die deklarativen XAML-Objekte enthält. In .NET sind die CodeBehind-Dateien je nach Sprachwahl mit entsprechenden Dateiendungen versehen: In C# und Visual Basic sind es die Erweiterungen .xaml.cs bzw. .xaml.vb, in JavaScript heißt die Dateiendung .xaml.js.^[2]

XAML in Silverlight[Bearbeiten | Quelltext bearbeiten]

In Webanwendungen wird XAML hauptsächlich in Form von Silverlight eingesetzt. Microsoft Silverlight ist eine veränderte, im Umfang reduzierte Untermenge von WPF. Während der Entwicklung wurde es WPF/E genannt, was für „Windows Presentation Foundation Everywhere“ stand. Microsoft Silverlight ermöglicht es, WPF-Anwendungen als Rich Internet Applications mit demselben oder minimal verändertem Programmcode online verfügbar zu machen, ohne dass auf dem Clientcomputer das gesamte .NET Framework installiert sein muss. 3D-Funktionen werden derzeit noch nicht unterstützt, aber XPS, vektorbasierte Grafiken und Hardwarebeschleunigung, demzufolge ist das Rendern von Rich User Interfaces für Webseiten möglich.

Eine Vielfalt von Medien kann nun nahtlos in die neuen Oberflächen eingegliedert werden einschließlich Audio, Video und 2D-Grafiken. Wichtige grafische Gesichtspunkte durch XAML-Beschreibung sind:

• Automatisches Layout
• 2D-Shape-Elemente (Rectangle, Ellipse etc.)
• Farbverläufe mit GradientBrushes
• Transformationen (Skalieren, Rotieren, Scheren, Matrizen)
• Animationen (DoubleAnimation, ColorAnimation, PointAnimation)
• Abspielen von Mediendateien^[1]

XAML in der Windows Runtime[Bearbeiten | Quelltext bearbeiten]

Beginnend mit Windows 8 kommt XAML neben WPF für Windows Store-Apps, die unter der neuen Windows Runtime ausgeführt werden, zum Einsatz. XAML in der Windows Runtime ist, ebenso wie Microsoft Silverlight, eine veränderte und im Umfang angepasste Untermenge der Windows Presentation Foundation. Der Hauptunterschied zu den bisherigen Implementierungen besteht jedoch darin, dass es sich hierbei um eine völlig neue, auf nativem Code und COM basierende Schnittstelle handelt, die über sogenannte Projektionen für mehrere Programmiersprachen, darunter C++, C# und Visual Basic direkt verwendbar ist. Der Vorteil gegenüber WPF und Silverlight, die beide auf der Common Language Runtime aufbauen, ist eine gesteigerte Ausführungsgeschwindigkeit, da hier die Übersetzung in den nativen Maschinencode des Prozessors zur Laufzeit (Just-in-time-Kompilierung) entfällt.

Windows Store-Apps werden derzeit immer als Vollbildanwendung ausgeführt und das vordefinierte Aussehen der Steuerelemente wurde für eine Bedienung per Touch optimiert, was sich in standardmäßig größeren und einfacher mit den Fingern zu bedienenden Elementen widerspiegelt.

Aufbau & Merkmale[Bearbeiten | Quelltext bearbeiten]

Gliederung[Bearbeiten | Quelltext bearbeiten]

XAML-Dateien sind hierarchisch strukturiert.

Ein oder mehrere Elemente können, abhängig von ihrer Ordnung, das Layout und Verhalten der Oberfläche beeinflussen. Jedes Element besitzt nur ein Elternelement (englisch parent). Jedes Element kann eine unbegrenzte Anzahl von Kindelementen (englisch children) besitzen, nur bei einigen wenigen ist die Anzahl eingeschränkt, z. B. besitzt die Scrollbar kein einziges Kind. In allen XAML-Anwendungen ist das Wurzelobjekt typischerweise ein Panel (oder eines seiner sechs Unterarten), das sich um Positionierung und Rendern jeglichen Inhaltes kümmert. Ein Panel kann wiederum mehrere andere Panels beinhalten.

Eigenschaften und Einstellungen z. B. einer Schaltfläche werden wie bei XML bzw. HTML im Tag als Attribute aufgeführt. Wie jede XML-Datei besitzt XAML ein Wurzel-Tag. Bei XAML nimmt man ein Vaterobjekt (z. B. ein <Window>), in das man weitere Kinder (also Elemente) einfügen kann. Für das Vaterobjekt muss das Wurzel-Tag entsprechende Attribute xmlns und xmlns:x besitzen, die dem Parser Informationen liefern über die zu verwendenden Namensräume.

XAML-Namensräume[Bearbeiten | Quelltext bearbeiten]

Silverlight[Bearbeiten | Quelltext bearbeiten]

Wenn man in einer Silverlight-Anwendung ein Element wie <UserControl> in XAML verwendet, erkennt der Silverlight-Parser, dass man eine Instanz der UserControl-Klasse erschaffen will. Aber er erkennt nicht zwingend welche UserControl-Klasse er verwenden soll. Man muss also einen Weg finden eine Silverlight-Namensrauminformation anzugeben, um ein Element verwenden zu können.

<UserControl x:Class="SilverlightApplication1.Page"  xmlns="http://schemas.microsoft.com/client/2007"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  <Grid x:Name="LayoutRoot" Background="White">   </Grid> </UserControl> 

• http://schemas.microsoft.com/client/2007 ist der Kern des Silverlight-2-Namensraums. Er umfasst alle Silverlight-2-Klassen, einschließlich UserControl und Grid. Gewöhnlich wird der Namensraum ohne ein Präfix deklariert, somit wird er der Standard-Namensraum für das ganze Dokument. Das bedeutet jedes Element wird automatisch in diesem Namensraum platziert bis man es anderweitig spezifiziert.
• http://schemas.microsoft.com/winfx/2006/xaml ist der XAML-Namensraum. Er schließt verschiedene XAML-Merkmale ein, die einem erlauben Einfluss darauf zu nehmen wie das Dokument interpretiert wird. Dieser Namensraum ist an das Präfix X gebunden. Das bedeutet man kann ihn geltend machen, indem man das Namensraumpräfix vor den Elementnamen schreibt (z. B.: <x:ElementName>).^[3]

Windows Presentation Foundation[Bearbeiten | Quelltext bearbeiten]

In diesem Fall verwendet man nicht den Namensraum xmlns=http://schemas.microsoft.com/client/2007, da keine Silverlight-Anwendung angelegt wird, sondern man verweist lediglich auf den Presentation Core der Windows Presentation Foundation, xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation.^[2]

<Window x:Class="WpfApplication1.Window1"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Title="Window1" Height="300" Width="300">  <Grid>   </Grid> </Window> 

Windows Runtime[Bearbeiten | Quelltext bearbeiten]

Die für Windows Store-Apps unter Windows 8 verwendeten Namensräume entsprechen denen der Windows Presentation Foundation, mit dem Unterschied, dass als Standardelement für Benutzeroberflächen Page anstatt Window verwendet wird und dieses sich auf die Implementierung in der Windows Runtime (Windows.UI.Xaml) bezieht. Höhen- und Breitenangaben entfallen ebenso, da Windows Store-Apps immer als Vollbildanwendung ausgeführt werden.

<Page x:Class="HelloWorld.BlankPage"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  <Grid>   </Grid> </Page> 

Verknüpfung von GUI und Code[Bearbeiten | Quelltext bearbeiten]

Um z. B. Schaltflächen mit einer Methode zu verknüpfen schreibt man nun z. B. in Visual Basic oder C# so genannte partial classes. Sie teilen sich denselben Namensraum. Der Compiler erstellt dann die notwendigen Verknüpfungen. Wenn man – entgegen der klaren Empfehlung, Oberfläche und Code zu trennen – doch Code im XAML Dokument unterbringen möchte, kann man dies auch tun: <x:Code> leitet den entsprechenden Bereich ein. Damit der Parser nun die entsprechenden Zeilen nicht auch noch interpretiert, muss er unbedingt in <![CDATA[...]]> eingeschlossen sein (Beispiel aus msdn):^[4]

<Canvas xmlns...>  <Button Name="button1" Click="Clicked">Click Me!</Button>  <x:Code><![CDATA[     void Clicked(object sender, RoutedEventArgs e)  {  button1.Content = "Hello World";  }  ]]></x:Code> </Canvas> 

Styles und Templates[Bearbeiten | Quelltext bearbeiten]

In XAML ist es möglich, die Oberfläche sehr einfach an individuelle Bedürfnisse anzupassen. Dies fängt bei den Eigenschaften von UI-Elementen an, welche man leicht mit Styles ändern kann und geht weiter bis hin zur vollständigen Kontrolle über das Aussehen und Verhalten eines UI-Elementes durch die Templates.

Beispiel: Style[Bearbeiten | Quelltext bearbeiten]

Innerhalb eines XAML-Dokumentes definiert man sein eigenes Stylesheet für eine Schaltfläche:

<Style def:Name="MyStyle">  <Button Background="Red" FontSize="24"/> </Style> 

Beim Erstellen einer neuen Schaltfläche verweist man dann nur noch auf sein selbst erstelltes Stylesheet:

<Button Style="{MyStyle}">Styled</Button> 

Beispiel: Template[Bearbeiten | Quelltext bearbeiten]

Innerhalb eines XAML-Dokumentes definiert man ein eigenes Control-Template für eine Schaltfläche:

<ControlTemplate x:Key="MyButtonTemplate"  TargetType="{x:Type Button}">   <Border BorderBrush="{TemplateBinding BorderBrush}"  BorderThickness="{TemplateBinding BorderThickness}"  Background="{TemplateBinding Background}">   <!-- Der ContentPresenter zeigt den Inhalt an, welcher über TemplateBinding abgerufen wird -->  <ContentPresenter  Content="{TemplateBinding Content}"  ContentTemplate="{TemplateBinding ContentTemplate}"  Margin="{TemplateBinding Padding}"  HorizontalAlignment="{TemplateBinding  HorizontalContentAlignment}"  VerticalAlignment="{TemplateBinding  VerticalContentAlignment}" />   </Border> 

Transformationen und Animationen[Bearbeiten | Quelltext bearbeiten]

XAML unterstützt Transformationen, wie sie bereits aus Flash oder SVG bekannt sind. Bei den Animationen sieht es dagegen etwas anders aus. Von Haus aus unterstützt die XAML-Syntax keine weit reichende Animation. Um dies dennoch zu bewerkstelligen muss man die Mapping- und xmlns-Konstrukte verwenden, um einen eigenen Namensraum spezifisch für Windows Vista zu laden:

<?Mapping XmlNamespace="animC" ClrNamespace="MSAvalon.Windows.Media.Animation" Assembly="PresentationCore" ?> <?Mapping XmlNamespace="animF" ClrNamespace="MSAvalon.Windows.Media.Animation" Assembly="PresentationFramework" ?> 

Document Services[Bearbeiten | Quelltext bearbeiten]

XAML bietet mehrere Merkmale, die es ermöglichen, Dokumente besser zu betrachten, navigieren und paginieren. Für diesen Zweck stehen mehrere Kontrollleisten bereit, die bei Bedarf aktiviert werden können. Dazu gehört eine Seitenzahlanzeige, Vor- und Zurück-Schaltfläche, etc. die der PageViewer anbietet.

Darüber hinaus kann man mit dem Document Layout Service Texte mit einfachen Tags versehen, um jederzeit auf jedem Bildschirm ein angemessenes und leicht zu lesendes Layout zu installieren.

Vergleiche mit anderen XML-basierten (Programmier-)Sprachen[Bearbeiten | Quelltext bearbeiten]

Dem deklarativen Konzept von XAML und der Vereinigung von XML-codierten Objekten ähnlich arbeitet die Sprache LZX (OpenLaszlo). Hier werden die Methoden und Eigenschaften, sowie die Ereignisbehandlung noch konsequenter in die Tag-Struktur mit einbezogen. Während bei XAML der .NET-Compiler Oberflächen mit den Methoden bzw. der Ereignisbehandlung zusammenbindet, wird bei OpenLaszlo als Script-Sprache JavaScript eingesetzt und eine lauffähige Adobe-Flash-Datei (oder wahlweise DHTML) erzeugt.

Codebeispiel (vergleiche oben):

<canvas debug="true">  <button name="button1" text="Click me !">  <handler name="onclick">          parent.button1.setAttribute("text","Hello, World !"); // JavaScript-Code  </handler>  </button> </canvas> 

Siehe auch[Bearbeiten | Quelltext bearbeiten]

• XML User Interface Language (XUL)
• FXML Deklarative GUI-Beschreibung für JavaFX

Literatur[Bearbeiten | Quelltext bearbeiten]

• Matthew MacDonald: Pro WPF in C# 2008. Springer, 2008. ISBN 978-1-59059-955-6
• Matthew MacDonald: Pro Silverlight in C# 2008. Apress, 2008. ISBN 978-1-59059-949-5
• M. Werner und B. Rieger: Interaktive Webanwendungen mit Silverlight 2 entwickeln. Data Becker, 2008. ISBN 978-3-8158-3009-3

Weblinks[Bearbeiten | Quelltext bearbeiten]

• XAML in der MSDN Library
• XAML in der MSDN Library (englisch)
• Coverpages.org (englisch) – Artikel, Papers und News zu XAML

Anleitungen

• Scriptol.com (englisch) – Anleitungen zu XAML
• Codeproject.com (englisch) – Anleitungen zu WPF und XAML

Quellen[Bearbeiten | Quelltext bearbeiten]

1. ↑ ^{a b} www.codeproject.com. Abgerufen am 15. März 2009. 
2. ↑ ^{a b c} M. Werner und B. Rieger: Interaktive Webanwendungen mit Silverlight 2 entwickeln. 2008, ISBN 978-3-8158-3009-3.
3. ↑ Matthew MacDonald: Pro Silverlight in C# 2008. 2008 ISBN 978-1-59059-949-5
4. ↑ CDATA-Abschnitte. Microsoft, archiviert vom Original am 3. April 2015; abgerufen am 2. April 2019.