Kapitel 3 - Einführung in XAML

3.1 Einführung

Grafische Tools können z.B. XAML-Code exportieren und auch direkt Visual Studio-Projekte nutzen (z.B. Expression Blend). Der XAML-Code wird dann in ein Projekt importiert (oder das Projekt wurde direkt bearbeitet) und der Entwickler heftet die Programmlogik an die bereits erstellte Oberfläche. Soweit zur Theorie.

XAML basiert auf der Syntax von XML. Dies bedeutet eine XAML-Datei besitzt ein Wurzelelement, welches alle anderen Elemente einschließt. Weiterhin müssen alle Elemente korrekte verschachtelt sein, z.B.

<StackPanel>
  <Button>
  ...
  <Button>
<StackPanel>

<StackPanel>
  <Button>
  ...
</StackPanel>    
  </Button>

<Button Width="100">

<?xml version="1.0" ?>

XAML oder Code

• Die Menge an Code für eine Beschreibung einer Oberfläche über XAML ist wesentlich kompakter als wenn Sie das gleiche Ergebnis mittels C#-Code erreichen wollen.
• XAML-Code lässt sich dynamisch zur Laufzeit aus Dateien laden.
• Ein Grafikdesigner kann attraktive Oberflächen für Anwendungen oder einzelne Komponenten erstellen und diese in XAML speichern (oder direkt in XAML erzeugen).
• Über Code lassen sich besser umfangreichere Benutzeroberflächen, Animationen oder 3D-Grafiken generieren.
• Die Ausdrucksmöglichkeiten über Code überwiegen die von XAML. Insbesondere sind die Integrationsmöglichkeiten von Code direkt in eine XAML-Datei begrenzt (und auch nicht sinnvoll).

3.1.2 XAML-Mapping

Einige Elemente verfügen über eine Eigenschaft Content, die genau ein beliebiges anderes Element aufnehmen kann. Die Klasse Window und die Klasse Button besitzen z.B. eine solche Eigenschaft. Damit in das Wurzelelement mehrere Elemente eingefügt werden können, fügt man zuerst ein Containerelement wie ein Grid oder ein StackPanel ein. Darin können weitere Elemente eingebettet werden, da diese Komponenten über eine Eigenschaft Children verfügen, die eine Collection von UIElement-Objekten verwaltet (d.h. sie können mehrere Komponenten aufnehmen). Andere Containerelemente sind z.B. Listen und Menüs. Allerdings besitzen diese keine Eigenschaft Children sondern sie verwenden eine Eigenschaft Items, die vom Typ ItemCollection ist und mehrere Menü- und Listeneinträge verwalten.

Die Bestandteile einer XAML-Datei sind Namespaces, Elemente und Attribute. Diese haben eine spezielle Bedeutung.

• Die Elemente (Tags) entsprechen immer einer WPF-Klasse. Von dieser Klasse wird dann eine Instanz über den Standardkonstruktor der Klasse erzeugt. Geben Sie in XAML z.B. ein Element <Button> an, wird an dieser Stelle eine Button-Instanz erzeugt.
• Die Attribute eines Elements werden auf die Eigenschaften oder die Ereignisse der betreffenden Klasse des neuen Objekts gemappt. Die Eigenschaften einer Klasse müssen public sein und Werttypen darstellen. Für alle anderen Typen muss ein so genannter Typkonvertierer bereitgestellt werden. Die WPF liefert bereits eine Anzahl solcher Typkonvertierer mit.

HINWEIS: Da die Angabe eines Elements in XAML zum Aufruf des Standardkonstruktors einer Klasse führt erkennen Sie an dieser Stelle schon einige Einschränkungen bei der Verwendung von XAML. Sie können z.B. keinen beliebigen Konstruktor aufrufen. Es ist ebenfalls nicht möglich neue, eigenständige Klassen zu definieren, da sich diese immer in der partiellen Klasse befinden würden, die durch die XAML-Datei definiert wird.

Namen

Weiterhin sind einige Elemente nur innerhalb anderer Elemente verfügbar. Die IntelliSense-Hilfe zeigt dies in den meisten Fällen auch korrekt an. In einigen Ausnahmen dürfen Sie aber auch Elemente/Attribute verwenden, die nicht angeboten und im Visual Studio-Editor unterstrichen dargestellt werden.

Im folgenden XAML-Code wird beispielsweise ein Button durch ein Button-Element definiert. Er entspricht dabei der Button-Klasse aus dem .NET Framework (und dabei nicht aus dem Namespace System.Windows.Forms sondern System.Windows.Controls). Des Weiteren wird im Element Button ein Attribut Width verwendet, um die Breite des Buttons festzulegen. Die Werte für ein Attribut werden immer in Anführungszeichen eingeschlossen. Eine notwendige Typumwandlung der Zeichenkette "100" in den Double-Wert 100.0 (es ist tatsächlich eine Gleitkommazahl) findet über einen Typkonvertierer automatisch statt.

<Button Width="100">Hallo</Button>

3.1.3 Schreibweise von Elementen und Attributen

<Button>
  <StackPanel>
    <TextBlock>Öffnen</TextBlock>
    <Image Source="Open.bmp" />
  </StackPanel>
</Button>

Attributschreibweise von Eigenschaften

<Button Background="LightBlue" Content="Hallo" />

Eigenschaftselementschreibweise

<Button Content="Hallo">
  <Button.Background>
    <LinearGradientBrush>
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Blue" Offset="1.0" />
    </LinearGradientBrush>
  </Button.Background>
</Button>

3.1.4 Namespaces

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:wpf="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
<wpf:Button>...</wpf:Button>

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Eigene Namespace-Mappings

xmlns:clr

xmlns:clr="clr-namespace:System"

xmlns:clr="clr-namespace:System;assembly=mscorlib"

namespace XAMLNamespacesProj
{
  public partial class Window1: System.Windows.Window
  {
    public Window1()
    {
      InitializeComponent();
    }
  }
  public class ZeichenFueller
  {
    private int anzahl;
    public int Anzahl
    {
      get { return anzahl; }
      set { anzahl = value; }
    }
    public override string ToString()
    {
      return new String('A', anzahl);
    }
  }
}

In die XAML-Datei des Fensters werden nun zwei zusätzliche Namespaces eingebunden. Statt den Wert der Eigenschaft Width über eine Zeichenkette anzugeben, soll er über den Datentyp Double aus dem Namespace System zugewiesen werden. Beachten Sie, dass auch in diesem Fall die Typkonvertierer zum Einsatz kommen, denn auch die Angabe 200 im clr:Double-Element ist letztendlich ein String. Der Namespace System befindet sich in der Assembly mscorlib, so dass zum Einbinden die Angabe clr-namespace:System;assembly=mscorlib verwendet wird. Als Präfix für den Namespace wird clr verwendet.

Um die selbst definierte Klasse zu verwenden, muss nur der Namespace der Klasse eingebunden werden, da er sich in der gleichen Assembly befindet. Als Präfix wird diesmal das Kürzel prj verwendet. Der öffentlichen Eigenschaft Anzahl wird der Wert 10 übergeben, so dass 10x der Buchstabe A über die Methode ToString() zurückgegeben wird. Zur Auswertung des erstellten ZeichenFueller-Objekts (es wird ein String an dieser Stelle erwartet) wird automatisch die Methode ToString() des Objekts aufgerufen, die ja in der Klasse überschrieben wurde.

<Window x:Class="XAMLNamespacesProj.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:clr="clr-namespace:System;assembly=mscorlib"
  xmlns:prj="clr-namespace:XAMLNamespacesProj"
  Title="XAMLNamespacesProj" Height="300" Width="300">
  <StackPanel>
    <Button>
      <Button.Width>
        <clr:Double>
          200
        </clr:Double>
      </Button.Width>
      <prj:ZeichenFueller Anzahl="10" />
    </Button>
    <TextBox Width="200">
      <clr:String>Hallo</clr:String>
    </TextBox>
  </StackPanel>
</Window>

3.2 Markup- und Spracherweiterungen

<Button Background="LightYellow" ...>

Diese spezielle Schreibweise wird Markup-Erweiterung genannt. Dazu wird die Zeichenkette, deren Aufbau abhängig von der Erweiterung ist, in geschweifte Klammern gesetzt. Bei den beiden folgenden Buttons wird die Hintergrundfarbe nur beim ersten Button auf einen konkreten Wert gesetzt. Im zweiten Button wird über ein Binding die Farbe des ersten Buttons verwendet. Der Elementname entspricht dabei dem Namen des ersten Buttons und der Wert von Path der Eigenschaft, an die angebunden werden soll.

<Button Background="LightYellow" Name="BtnVorgabe" />
<Button Background="{Binding ElementName=BtnVorgabe, Path=Background}" />

... Background="{Binding ...}"

<Button.Background>
  <Binding ElementName="BtnVorgabe" Path="Background" />
</Button.Background>

<TextBox Text="{}{hier steht Text}" />

3.2.1 Markup-Erweiterungen von XAML

<x:Array Type="clr:String"
  <clr:String>Eintrag 1</clr:String>
  <clr:String>Eintrag 2</clr:String>
  <clr:String>Eintrag 3</clr:String>
</x:Array>

<Button Background="{x:Null}" />

<Button Background="{x:Static Brushes.Blue}" />

<Style TargetType="{x:Type Button}">

Tabelle 3.1: Markup-Erweiterungen von XAML

3.2.2 Markup-Erweiterungen der WPF

Erweiterung	Beschreibung
Binding	Definiert eine Datenbindung für den Wert eines Attributs (wird im Kapitel Data Binding besprochen).
DynamicResource	Der Wert des Attributs stammt aus einer Ressource, wobei sich der Wert der Ressource ändern kann (wird im Kapitel Ressourcen besprochen).
StaticResource	Der Wert des Attributs stammt aus einer Ressource, wobei der Wert der Ressource nur einmal zu Beginn ausgewertet wird (wird im Kapitel Ressourcen besprochen).
TemplateBinding	Weist einer Eigenschaft in einem ControlTemplate einen Wert zu, der an anderer Stelle definiert wird (wird im Kapitel Styles besprochen)

Tabelle 3.2: Auswahl der wichtigsten WPF-Markup-Erweiterungen

3.2.3 XAML-Spracherweiterungen

Attribut/Direktiven	Beschreibung
x:Class	Das Attribut stellt eine Beziehung zwischen dem Wurzelelement einer XAML-Datei und einer partiellen Klasse her, z.B. x:Class="Namespace.Klasse" Die Angabe von x:Class ist immer dann notwendig, wenn in der partiellen Klasse Code hinterlegt wird (auch wenn dieser in XAML eingebettet wird) und wenn Sie XAML-Elemente mit einem Namen versehen haben.
x:Code	Definiert einen Code-Bereich innerhalb einer XAML-Datei.
x:FieldModifier	Um den automatisch generierten Zugriffsmodifizierer für ein Objekt zu ändern, geben Sie den neuen Modifizierer an, z.B. public. Standardmäßig ist er internal. Das Element muss dazu einen Namen besitzen. <Button Name="Btn1" x:FieldModifier="public" />
x:Key	Vergibt einen Schlüsselnamen für ein Element einer Ressource.
x:Name	Hiermit können Sie Elementen einen Namen vergeben, die nicht über eine Eigenschaft Name verfügen und auf die Sie später verweisen wollen. <GradientBrush x:Name="Grad1" ...>
x:XData	Hiermit können Sie eine XML-Dateninsel erstellen, die z.B. Daten für das Data Binding bereitstellt (siehe Kapitel Data Binding).

Tabelle 3.3: Auswahl von XAML-Attributen und -Direktiven

HINWEIS: Um in einem Elementinhalt die Whitespace-Zeichen zu erhalten, wird das Attribut xml:space mit dem Wert preserve angegeben. Der Standardwert default entfernt die Leerzeichen. Dieses Attribut wird allerdings über XML und nicht durch XAML definiert.

<clr:String xml:space="preserve">   Hallo    </clr:String>

nach oben

3.3 XAMLPad

Sie finden XAMLPad nach der Installation des Windows SDKs im Programmordner START - PROGRAMME - MICROSOFT WINDOWS SDK - TOOLS. Im unteren Bereich geben Sie den XAML-Code in einem eher rudimentären Editor ein, der leider keine Syntaxhilfe unterstützt. Nach dem Start wird immer der zuletzt beim Schließen eingegebene XAML-Code angezeigt. Dazu speichert XAMLPad den zuletzt gültigen Code im Verzeichnis [LW]:\Programme\Microsoft SDKs\Windows\v6.0\Bin in der Datei Xaml-Pad_Saved.xaml.

Haben Sie gültigen Code eingegeben wird dieser sofort interpretiert und das Ergebnis im oberen Bereich angezeigt. Als Wurzelelement wird normalerweise ein Page-Element verwendet, damit es in XAML-Pad eingebettet werden kann. Sie können aber auch einen Layoutcontainer wie Grid oder StackPanel als Wurzelelement verwenden. Verwenden Sie Window als Wurzelelement, wird ein neues Fenster mit dem Inhalt geöffnet.

Fehler werden ganz unten in einem Statusbereich angezeigt. Sie können diese Vorgehensweise allerdings durch das Deaktivieren der Schaltfläche AUTO PARSE links oben aufheben. Über die Schaltfläche SHOW VISUAL TREE (in der Abbildung 3.1 nicht sichtbar) kann die komplette interne Verwaltung einer XAML-Seite betrachtet werden (1) und (2).

Abbildung 3.1: XamlPad mit Editor, Ausgabebereich und geöffnetem Visual Tree

nach oben

3.4 Loose XAML

<Button xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        Background="AliceBlue" Content="Loose XAML" />

Wozu ist das nützlich? Wenn Sie einfache Beispiele für XAML-Code erstellen und anzeigen möchten und diese vielleicht noch über das Internet bereitstellen, ist dies sicher eine sehr geeignete Lösung (Sorry Firefox-User). Statt einfachen Beispielen lassen sich aber auch komplexe 3D-Grafiken mit Animationen in einer XAML-Datei verpacken. So könnten Sie eine Kursentwicklung oder eine Wetterkarte mit XAML erstellen und im Internet bereitstellen.

Innerhalb einer HTML-Seite können Sie über IFrames auch mehrere XAML-Dateien gleichzeitig laden und anzeigen. Dazu wird jede XAML-Datei in ein iframe-Element eingeschlossen. Diese Vorgehensweise macht natürlich auch nur im Internet Explorer Sinn, da momentan nur dieser Browser den XAML-Code über das Plug-In ausführen kann.

<html<>
  <head>
    <title>Loose XAML - Beispiele</title>
  </head>
  <body>
    <table>
      <tr>
        <td><h3>Überschrift 1</h3>
            <iframe src="Datei1.xaml"></iframe>
        </td>
        <td><h3>Überschrift 2</h3>
            <iframe src="Datei2.xaml"></iframe>
        </td>
      </tr>
    </table>
  </body>
</html>

nach oben

3.5 Verwendung des WPF Designers

Standardmäßig wird eine XAML-Datei im Visual Studio mit dem WPF Designer geöffnet. Wenn Sie einen anderen Standardeditor definieren wollen, öffnen Sie den Kontextmenüpunkt OPEN WITH einer XAML-Datei und wählen einen anderen Standardeditor aus.

Abbildung 3.2: Einen anderen Standard-XAML-Editor auswählen

nach oben

3.6 Dependency und Attached Properties

• eine automatische Aktualisierung
• eine integrierte Validierung
• die Deklaration von Standardwerten
• den Aufruf von Callback-Methoden, wenn Wertänderungen aufgetreten sind

• Animationen
• Data Binding
• Styles

Attached Properties

Durch den folgenden Code wird ein Button in einem Tabellengitter in der 1. Spalte und 2. Zeile positioniert. Die Eigenschaften Column und Row werden aber nicht durch die Button-Klasse sondern durch die Klasse Grid definiert. Aus diesem Grund muss vor den Attributen auch der Klassenname angegeben werden, z.B. Grid.Column.

<Grid>
  <Button Grid.Column="0" Grid.Row="1" Name="BtnImGrid">

Grid.SetColumn(BtnImGrid, 0);
Grid.SetRow(BtnImGrid, 1);

nach oben