Schnellstart: Erstellen einer Benutzeroberfläche mit XAML
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

Schnellstart: Erstellen einer Benutzeroberfläche mit XAML

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Wenn Sie sich dafür entscheiden, Ihre App in Microsoft Visual Basic, C# oder mit Visual C++-Komponentenerweiterungen (C++/CX) zu entwickeln, definieren Sie die Benutzeroberfläche mit XAML. XAML ist eine deklarative Sprache, mit der Sie App-UI-Elemente wie Steuerelemente, Formen, Text und andere auf dem Bildschirm angezeigte Inhalte erstellen. Wenn Sie sich mit Webprogrammierung auskennen, können Sie sich XAML als eine Entsprechung von HTML vorstellen. Wie HTML setzt sich auch XAML aus Elementen und Attributen zusammen. XAML basiert jedoch auf XML. Deshalb müssen Sie die Regeln von XML befolgen, die z. B. Wohlgeformtheit vorschreiben. Sie werden sich vielleicht fragen, warum Sie sich mit XAML beschäftigen sollten, wenn Sie doch Tools wie Microsoft Visual Studio oder Blend für Visual Studio für das Erstellen Ihrer UI verwenden möchten. Auch wenn es Tools für das Erstellen von Markup gibt, sollten Sie einige Grundlagen kennen, um den XAML-Code verstehen oder anpassen zu können. Darüber hinaus ist es auch einfacher, die UI von Hand zu codieren, wenn Sie alles genau bestimmen oder einfach wissen möchten, was passiert.

Roadmap: Wie hängt dieses Thema mit anderen zusammen? Siehe:

Voraussetzungen

Es wird davon ausgegangen, dass Sie mit Visual Basic, C# oder C++ eine einfache Windows-Runtime-App erstellen können. Anweisungen zum Erstellen der ersten Windows-Runtime-App finden Sie unter Erstellen Ihrer ersten Windows Store-App mit C++, C# oder Visual Basic.

XAML-Beispiel

Dies ist ein einfaches XAML-Beispiel, das eine Schaltfläche erstellt.


<Grid Margin="12,0,12,0">
    <Button Content="Click Me"/>
</Grid>

Verwenden Sie das <Button>-Element, um das Button-Steuerelement anzugeben. Wenn möglich, lassen Sie die Größe der Unterseite automatisch festlegen, oder verwenden Sie die Attribute Width und Height, um bei Bedarf eine exakte Größe anzugeben. Wenn Sie in Visual Studio eine neue Windows-Runtime-App mit C++, C# oder Visual Basic erstellen, wird das <Grid> generiert und zum Anordnen der Objekte verwendet. Weitere Informationen zum XAML-Layout finden Sie unter Schnellstart: Definieren von Layouts.

Sie können den XAML-Code mit Visual Studio generieren. Sie können z. B. eine Schaltfläche aus der Toolbox auf die Entwicklungsoberfläche ziehen oder in der Toolbox auf die Schaltfläche doppelklicken.

Benutzeroberfläche der Toolbox

Diesen XAML-Code könnte Visual Studio erzeugen.


<Grid>
    <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>

Visual Studio fügt einige zusätzliche Attribute hinzu, z. B. HorizontalAlignment und mitunter Margin, um die Schaltfläche zu positionieren. Es empfiehlt sich unter Umständen, dieses zusätzliche Markup nicht aufzunehmen, wenn Sie sehr spezielle Anforderungen haben oder später eine Überarbeitung vornehmen möchten. Löschen Sie in diesem Fall das Attribut einfach.

Ein Verwendungsaspekt einer deklarativen Sprache wie XAML ist eine Trennung zwischen dem Markup für die UI und dem Code für die Funktionen, die die App ausführt. Auf diese Weise kann z. B. ein Entwickler in Ihrem Team eine UI entwickeln und dann den XAML-Code an den Entwickler weitergeben, der den prozeduralen Code schreibt. Und selbst wenn Designer und Entwickler dieselbe Person sind (wie dies häufig vorkommt), können Sie die visuellen Objekte in XAML-Dateien (.xaml) und den prozeduralen Code in CodeBehind-Dateien (.cs und .vb) speichern.

XAML ist prozeduraler Code (wenn auch einfacher).

XAML-Elemente wie <Button /> entsprechende instanziierten Objekten in prozeduralem Code. Sehen Sie sich z. B. diesen XAML-Code an.


<Grid x:Name="ContentPanel" Margin="12,0,12,0">
    <Button Height="72" Width="160" Content="Click Me" />
</Grid>

Im Folgenden wird gezeigt, wie Sie diesen XAML-Code teilweise durch in C# oder Visual Basic geschriebenen Code ersetzen.


// Initialize the button
Button myButton = new Button();
// Set its properties
myButton.Width = 160;
myButton.Height = 72;
myButton.Content = "Click Me";
// Attach it to the visual tree, specifically as a child of
// a Grid object (named 'ContentPanel') that already exists. In other words, position
// the button in the UI.
ContentPanel.Children.Add(myButton);

Bei UI ist XAML einfacher zu lesen und kompakter als prozeduraler Code. In seltenen Fällen ist es jedoch erforderlich, prozeduralen Code zu verwenden, um UI dynamisch zu erstellen.

Eigenschaften

Es existieren zwei Möglichkeiten, um Eigenschaftenwerte in XAML anzugeben.

  • Attributssyntax
  • Syntax für Eigenschaftselemente

Die Attributsyntax ist die attribute="value"-Syntax, die Sie bereits in früheren Beispielen kennengelernt haben und mit der Sie vielleicht schon durch HTML vertraut sind. Im nächsten Beispiel erstellen wir ein rotes Rectangle. Wir legen das Attribut Fill auf einen vordefinierten Farbnamen fest, den der XAML-Parser in ein SolidColorBrush-Objekt konvertiert, das für die Fill-Eigenschaft geeignet ist.


<Rectangle Fill="Red" />

Sie könnten den Farbwert stattdessen auch mit der Syntax für Eigenschaftselemente festlegen.


<Rectangle>
    <Rectangle.Fill>
        <SolidColorBrush Color="Red"/>
    </Rectangle.Fill>
</Rectangle>

In diesem Fall geben Sie explizit das SolidColorBrush-Objekt an, das den von der Fill-Eigenschaft vorausgesetzten Typ aufweist, anstatt einfach die Zeichenfolge "Red" zu verwenden. Sie könnten aufgrund dieses Beispiels evtl. annehmen, dass die Syntax für Eigenschaftselemente nur ein komplizierterer Weg ist, der zum gleichen Ziel führt. Es können aber nicht alle Eigenschaftenwerte mit einer einfachen Attributzeichenfolge angegeben werden. Nicht alle Typen verfügen über Typkonvertierer aus Zeichenfolgen. Wenn Sie zudem mehrere Eigenschafen für ein Objekt angeben müssen, das als Wert für eine Eigenschaft verwendet wird, sind Sie gezwungen, die Syntax für Eigenschaftselemente zu verwenden. Dieses Beispiel erstellt ein Rectangle, bei dem aber anstelle einer einfachen roten Farbe ein von einem LinearGradientBrush generierter Farbverlauf als Füllung verwendet wird.


<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1.0" />
        </LinearGradientBrush> 
    </Rectangle.Fill>
</Rectangle>

Mehrfarbiger Farbverlauf

Die Fill-Eigenschaft verwendet zum Erstellen des Farbverlaufs das komplexe Objekt LinearGradientBrush. In Fällen wie diesem müssen Sie die Syntax für Eigenschaftselemente verwenden, da Sie nicht einfach den Wert als Zeichenfolge übergeben können, der einem Attribut zugeordnet ist.

XAML und die visuelle Struktur

Ihnen stehen bei XAML Elemente wie <Button> und <Grid> zur Verfügung, die andere Elemente (Knoten) enthalten können (untergeordnete Elemente). Diese Beziehung legt auch verschiedene Dinge fest, z. B. wie Objekte auf dem Bildschirm positioniert werden und wie sie auf Ereignisse reagieren, die der Benutzer auslöst. Sehen Sie sich das folgende Beispiel an.


<Grid x:Name="ContentPanel" Background="Red" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel Margin="20" Background="Blue">
        <TextBlock x:Name="firstTextBlock" FontSize="30">First TextBlock</TextBlock>
        <TextBlock x:Name="secondTextBlock" FontSize="30">Second TextBlock</TextBlock>
        <TextBlock x:Name="thirdTextBlock" FontSize="30">Third TextBlock</TextBlock>
    </StackPanel>
</Grid>

Das blaue StackPanel ist in einem roten Grid enthalten. Die TextBlock-Elemente sind im StackPanel enthalten (diese TextBlock-Elemente sind untergeordnete Elemente von StackPanel). Darüber hinaus sind die TextBlock-Elemente übereinander gestapelt, und zwar in der Reihenfolge ihrer Deklaration in XAML.

Diese Baumstruktur veranschaulicht die Beziehungen zwischen den Elementen.

Baumstruktur der Elementhierarchie

Neben der Festlegung, wie der Inhalt dargestellt wird, kann die visuelle Struktur auch Einfluss darauf haben, wie Ereignisse behandelt werden. Viele Ereignisse in Zusammenhang mit der UI und Eingaben, leiten die Ereignisse in der Struktur weiter nach oben. Sie können beispielsweise dem StackPanel einen Ereignishandler zuweisen, der das Drücken/Klicken des Benutzers auf TextBlock-Objekte behandelt. Hier sehen Sie, wie Sie den PointerPressed-Ereignishandler "commonHandler" dem StackPanel aus der Struktur hinzufügen.


<Grid Background="Red" x:Name="ContentPanel" Margin="12,0,12,0">
    <StackPanel Margin="20" Background="Blue" PointerPressed="commonHandler">
        <TextBlock x:Name="firstTextBlock" FontSize="30" >First TextBlock</TextBlock>
        <TextBlock x:Name="secondTextBlock" FontSize="30" >Second TextBlock</TextBlock>
        <TextBlock x:Name="thirdTextBlock" FontSize="30" >Third TextBlock</TextBlock>
    </StackPanel>
</Grid>

Dies ist der prozedurale Code zu Behandlung des Ereignisses.


private void commonHandler(object sender, PointerRoutedEventArgs e)
{
FrameworkElement feSource = e.OriginalSource as FrameworkElement;
switch (feSource.Name)
{
    case "firstTextBlock":
        firstTextBlock.Text = firstTextBlock.Text + " Click!";
        break;
    case "secondTextBlock":
        secondTextBlock.Text = secondTextBlock.Text + " Click!";
        break;
    case "thirdTextBlock":
        thirdTextBlock.Text = thirdTextBlock.Text + " Click!";
        break;
    }
}

Wenn Sie dieses Beispiel ausführen und auf einen TextBlock drücken/klicken, wird dieses Ereignis vom TextBlock erfasst, aber dann an das übergeordnete Element (den StackPanel) weitergeleitet, der das Ereignis behandelt.

Diese Abbildung zeigt das Weiterleiten von Ereignissen in der Struktur nach oben.

Darstellung der visuellen Struktur und des nach oben Weiterleitens von Ereignissen

Da das Ereignis in der Struktur nach oben weitergegeben wird, könnten Sie auch im Grid-Element auf das PointerPressed-Ereignis überwachen.

Weitere Informationen zu Routingereignissen und zum Schreiben von Handlern finden Sie unter Übersicht über Ereignisse und Routingereignisse.

Kurzanleitung für XAML-Attribute und Markupelemente

Wenn Sie XAML-Code in einem Editor erstellen oder untersuchen, der mit den Entwicklungstools von Visual Studio erzeugt wurde, verwenden Sie häufig bestimmte Markupkonzepte, die es nur bei XAML gibt und die in der zugrunde liegenden Programmiersprache nicht direkt widergespiegelt werden. Dies ist eine Liste dieser Konzepte.

  • Das x:Name-Attribut. Fügen Sie dieses Attribut für alle XAML-Objektelemente hinzu, in denen Sie in der CodeBehind-Logik auf die erstellte Runtime-Instanz verweisen möchten. Die für x:Name angegebene Zeichenfolge wird der Name der erstellten Instanz, und zwar in den partiellen Klassen, die mit Ihrem XAML-Code zusammenhängen. Sie können dann mit diesem Namen auf die Instanz verweisen. Visual Studio oder Blend für Visual Studio fügen das x:Name-Attribut häufig automatisch dem XAML-Code hinzu.
  • Das x:Key-Attribut. Fügen Sie dieses Attribut nur dann für XAML-Objektelemente hinzu, wenn Sie die in einem XAML-ResourceDictionary-Element enthaltenen Ressourcen definieren. Weitere Informationen finden Sie unter ResourceDictionary- und XAML-Ressourcenverweise.
  • Das x: in x:Key und x:Name gibt an, dass diese Elemente vom XAML-Namespace für XAML selbst definiert werden. Dadurch können diese Attribute auf jedes XAML-Objektelement angewendet werden, also auch auf Elemente, die von Ihnen definierte Klassen enthalten.
  • {Binding} ist eine XAML-Markuperweiterung, mit der Sie in XAML einen Verweis auf eine Datenbindung einfügen. Weitere Informationen zu Konzepten zur Datenbindung finden Sie unter Schnellstart: Datenbindung an Steuerelemente oder Übersicht Datenbindung.
  • {TemplateBinding} stellt eine spezielle Form der Deklaration einer Bindung dar, bei der die Eigenschaften einer Vorlage mit den Laufzeiteigenschaften der Klasse verbunden werden, die die Vorlage anwendet. RelativeSource ist die zugehörige Markuperweiterung, mit der die {RelativeSource}-Eigenschaft einer Bindung im Markup festgelegt werden kann.
  • {StaticResource} ist eine Markuperweiterung, mit der Sie in einem XAML-ResourceDictionary-Element auf beliebige in XAML definierte Ressourcen verweisen können. {StaticResource} verwendet ein einziges Argument, das dieselbe Schlüsselzeichenfolge wie das x:Key-Attribut angibt, mit dem Sie die Ressource im ResourceDictionary-Element bestimmen.
  • Falls Sie in XAML einen null-Wert angeben müssen, verwenden Sie die Zeichenfolge {x:Null}.

Weitere Informationen finden Sie unter Anleitung zur grundlegenden XAML-Syntax, Sprachfeatures für XAML-Namespace (x:) oder Windows-Runtime-Namespaceerweiterungen für XAML

Verwandte Themen

Roadmap für Windows-Runtime-Apps mit C# oder Visual Basic
ResourceDictionary- und XAML-Ressourcenverweise
Übersicht über XAML
Anleitung zur grundlegenden XAML-Syntax

 

 

Anzeigen:
© 2018 Microsoft