XAML

Vorlage:Infobox Dateiformat/Wartung/magic fehltVorlage:Infobox Dateiformat/Wartung/standard fehltVorlage:Infobox Dateiformat/Wartung/website fehlt

Extensible Application Markup Language
Dateiendung	.xaml
MIME-Type	application/xaml+xml
Entwickelt von	Microsoft Corporation
Art	User Interface Markup Language
Erweitert von	XML

XAML (Aussprache: [zæ:mɛl], Abkürzung für EXtensible Application Markup Language), entwickelt von Microsoft, ist eine neue allgemeine Beschreibungssprache für die Oberflächengestaltung von Anwendungen. Die Sprache ist Case-sensitive, das heißt es wird zwischen Groß- und Kleinschreibung unterschieden. Zunächst wurde die neue deklarative Sprache für die Frameworks .Net 3.0 und .NET 3.5 in Windows Presentation Foundation (WPF) für WPF-Windows-Anwendungen entwickelt. In Windows Workflow Foundation (WF) wird XAML verwendet weil dort Workflows wiederum mit XAML definiert werden können. XAML dient auch in Silverlight-Anwendungen in etwas verringertem Funktionsumfang dem Aufbau der grafischen Benutzeroberfläche. XAML in Silverlight ist eine Untermenge des WPF UI Framework von .Net 3.5.

XAML WPF Anwendung

Übersicht

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 eingeführt als die Markup Sprache die in Windows Presentation Foundation, einer Desktop-orientierten Technologie, verwendet wird. WPF stellt für 2D und 3D Objekte den Einsatz von Rotationen, Animationen und einen Reihe anderer Effekte und Funktionalitäten die von XAML gerendert werden. XAML Elemente können direkt Common Language Runtime (CLR) Objektinstanzen abbilden wohingegen Attribute CLR Eigenschaften und Events auf diese Objekte abbilden können. Bei einer üblichen Verwendung werden XAML Dateien von optisch orientierten Design- und Developer-Tools wie Microsoft Expression Blend, Microsoft Visual Studio, XAML Pad oder dem Windows Workflow Foundation Visual Designer generiert.
Obwohl XAML als wesentlicher Teil von WPF eingeführt wurde, ist der XAML Standard an sich nicht spezifisch mit WPF oder .NET verknüpft. Mit XAML kann man unter Verwendung jeder beliebigen anderen API (Application Programming Interface) Anwendungen entwickeln, wobei XAML eine eigenständige Sprache darstellt. Der Hauptaspekt der 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]

Designer/Developer Workflow

Bei der Entwicklung von Silverlight-Anwendungen, grafischer Oberflächengestaltung bis hin zu Animation und Transformationen ist XAML sozusagen die gemeinsame Sprache zwischen Designer und Entwickler. Der Grafiker gestaltet mit den Designertools die Webanwendungsoberfläche 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 Webdesigner angelegt wurden, werden vom Entwickler im Programmcode angesprochen und mit weiterer Dynamik und Interaktivität versehen. Beide, Designer und Entwickler, können praktisch gleichzeitig am selben Projekt arbeiten und müssen nicht mehr über Umwege miteinander kommunizieren.

In einer Silverlight-Anwendung befinden sich unter anderem zwei wichtige miteinander verbundene Dateitypen, die dieses Teamworking zwischen Designer und Programmierer nicht nur symbolisieren, sondern praktisch umsetzen: die XAML-Datei (Dateierweiterung .xaml), die das hinterlegte grafische XAML-Markup 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 VB sind es die Extensions .xaml.cs bzw. .xaml.vb, in JavaScript heißt die Dateiendung .xaml.js.^[2]

XAML in Silverlight

In Webanwendungen wird XAML hauptsächlich in Form von Silverlight eingesetzt. Microsoft Silverlight ist eine Web-basierte Untermenge von WPF. Während der Entwicklung wurde es WPF/E genannt, was für “Windows Presentation Foundation Everywhere stand”. Das Silverlight Subset ermöglicht interaktive Web- und mobile Anwendungen mit demselben Code wie Windows .NET Anwendungen. 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. Das von Silverlight verwendete XAML unterscheidet sich vom Umfang her zu XAML in WPF, da es eine Web-orientierte Untermenge des vollständigen XAML ist, welches bei WPF für Desktop Anwendungen verwendet wird.

Vom Standpunkt eines Users aus gesehen wird es einen großen Sprung bezüglich leistungsfähiger Interfaces geben. Möglicherweise werden User die Unterschiede zwischen einer online Web-Anwendung und einer Desktop-Anwendung nur schwer erkennen. Eine Vielfalt von Medien können nun nahtlos in die neuen Oberflächen eingegliedert werden einschließlich Audio, Video und 2D-Grafiken. Wichtige grafische Gesichtspunkte durch XAML-Markup sind:

• Exakte Positionierung in den Panel-Elementen
• 2-D-Shape-Elemente (Rectangle, Ellipse etc.)
• Farbverläufe mit GradientBrushes
• Transformationen (Skalieren, Rotieren, Scheren, Matrixen)
• Animationen (DoubleAnimation, ColorAnimation, PointAnimation)
• Abspielen von Mediadateien^[1]

Aufbau & Features

Gliederung

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 Parent. Jedes Element kann eine unbegrenzte Anzahl von Children besitzen, nur bei einigen wenigen ist die Anzahl Restriktionen unterworfen, z. B. besitzt die Scrollbar kein einziges Child. In allen XAML-Anwendungen ist das Rootobjekt typischerweise ein Panel (oder eines seiner sechs Unterarten), das sich um Positionierung und Rendern jeglichen Inhaltes kümmert. Ein Panel kann wiederum mehrere Panels beinhalten.

Eigenschaften und Einstellungen z. B. eines Buttons werden wie bei XML bzw. HTML im Tag als Attribute aufgeführt. Wie jede XML-Datei besitzt XAML einen Root-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 Root-Tag entsprechende Attribute xmlns und xmlns:x besitzen, die dem Parser Informationen liefern über die zu verwendenden Namespaces.

XAML Namespaces

Silverlight

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 Namespace Information 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 Namespace. Er schließt verschiedene XAML Features 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 Namensraum Präfix vor den Elementnamen schreibt (z.B.: <x:ElementName>).^[3]

WPF

In diesem Fall verwendet man nicht den Namespace xmlns=http://schemas.microsoft.com/client/2007, da keine Silverlight-Anwendung angelegt wird, sondern man verweist lediglich auf den Presentation-Core von WPF, 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>

Verknüpfung von GUI und Code

Um z. B. Buttons 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):

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

Style-Sheets und Schemas

In XAML ist es möglich, die Oberfläche sehr einfach an individuelle Bedürfnisse anzupassen. Das fängt bei den Farben der einzelnen Buttons an und geht weiter bis zu den individuellen Formen von einzelnen Bildschirmelementen. Dazu kann man bestehende Schemas verwenden und sie mit geringem Aufwand modifizieren.

Beispiel

Innerhalb eines XAML Dokumentes definiert man sein eigenes Style-Sheet für einen Button:

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

Beim Erstellen eines neuen Buttons verweist man dann nur noch auf sein selbst erstelltes Style-Sheet:

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

Transformationen und Animationen

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

XAML bietet mehrere Features, die es ermöglichen, Dokumente besser zu betrachten, navigieren und paginieren. Für diesen Zweck stehen mehrere Kontrolleisten bereit, die bei Bedarf aktiviert werden können. Dazu gehört eine Seitenzahlanzeige, Vor- und Zurückbuttons, 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

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 das event-handling noch konsequenter in die tag-Struktur mit einbezogen. Während bei XAML der .NET-Compiler Oberflächen mit den Methoden / dem event-handling zusammenbindet, wird bei OpenLaszlo als Script-Sprache JavaScript eingesetzt und ein lauffähiges Adobe Flash-file (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>

Externe Links

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

Tutorials

• Scriptol.com(engl.) – Tutorials zu XAML
• Codeproject.com(engl.) – Tutorials zu WPF und XAML

Literatur

• Matthew MacDonald: Pro WPF in C# 2008. 2008, ISBN 978-1590599556
• Matthew MacDonald: Pro Silverlight in C# 2008. 2008, ISBN 978-1590599495
• M.Werner und B.Rieger: Interaktive Webanwendungen mit Silverlight 2 entwickeln. 2008, ISBN 978-3815830093

Quellen

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-3815830093
3. ↑ Matthew MacDonald: Pro Silverlight in C# 2008. 2008 ISBN 978-1590599495