Language: HTML | XAML

Schnellstart: Hinzufügen von Steuerelementen und Behandeln von Ereignissen (XAML)

Applies to Windows and Windows Phone

Sie erstellen die Benutzeroberfläche für Ihre App mit Steuerelementen wie Schaltflächen, Textfeldern und Kombinationsfeldern. Hier zeigen wir Ihnen, wie Sie Ihrer App Steuerelemente hinzufügen. Beim Arbeiten mit Steuerelementen wenden Sie normalerweise folgendes Muster an:

  • Sie fügen der Benutzeroberfläche der App ein Steuerelement hinzu.
  • Sie legen Eigenschaften für das Steuerelement fest, z. B. Breite, Höhe und Vordergrundfarbe.
  • Sie binden Code in das Steuerelement ein, sodass dieses eine Aktion ausführt.

Roadmap: Wie hängt dieses Thema mit anderen zusammen? Informationen finden Sie unter:

Voraussetzungen

Es wird davon ausgegangen, dass Sie mit Microsoft Visual Basic, C# oder C++ und XAML (Extensible Application Markup Language) eine einfache App erstellen können. Anweisungen zum Erstellen Ihrer ersten App finden Sie unter Erstellen Ihrer ersten Windows Store-App mit C# oder Visual Basic oder unter Erstellen Ihrer ersten Windows Store-App mit C++.

Hinzufügen eines Steuerelements

Es gibt mehrere Möglichkeiten, einer App ein Steuerelement hinzuzufügen:

  • Verwenden Sie ein Entwicklungstool wie Blend für Visual Studio oder den XAML-Designer in Microsoft Visual Studio.
  • Fügen Sie das Steuerelement dem XAML-Markup im XAML-Editor in Visual Studio hinzu.
  • Fügen Sie das Steuerelement im Code hinzu. Im Code hinzugefügte Steuerelemente sind bei der Ausführung der App, jedoch nicht im Visual Studio-XAML-Designer sichtbar.

Die Dokumentation für die einzelnen Steuerelemente beinhaltet ein Thema zur Vorgehensweise zum Hinzufügen eines Steuerelements in XAML oder Code oder mithilfe eines Entwicklungstools. Informationen zum Hinzufügen eines Button-Steuerelements finden Sie unter So wird's gemacht: Hinzufügen einer Schaltfläche.

Hier verwenden wir Visual Studio als Entwicklungstool. Sie können diese und weitere Aufgaben jedoch auch in Blend für Visual Studio ausführen. Weitere Informationen finden Sie unter Erstellen einer UI mithilfe des XAML-Designers.

Wenn Sie in Visual Studio Steuerelemente in Ihrer App hinzufügen und bearbeiten, können Sie viele Features des Programms nutzen, u. a. die Toolbox, den XAML-Designer, den XAML-Editor und das Eigenschaftenfenster.

In der Toolbox von Visual Studio werden viele Steuerelemente angezeigt, die Sie in Ihrer App verwenden können. Wenn Sie der App ein Steuerelement hinzufügen möchten, doppelklicken Sie in der Toolbox auf das gewünschte Steuerelement. Wenn Sie beispielsweise auf das TextBox-Steuerelement doppelklicken, wird der XAML-Ansicht das folgende XAML hinzugefügt.


 <TextBox HorizontalAlignment="Left" Text="TextBox" VerticalAlignment="Top"/>

Sie können das Steuerelement auch aus der Toolbox in den XAML-Designer ziehen.

Festlegen des Namens eines Steuerelements

Wenn Sie mit einem Steuerelement im Code arbeiten möchten, legen Sie das Attribut x:Name fest und verweisen im Code anhand des Namens darauf. Sie können den Namen im Eigenschaftenfenster von Visual Studio oder in XAML festlegen. Hier wird veranschaulicht, wie Sie den Namen des derzeit ausgewählten Steuerelements über das Textfeld Name am oberen Rand des Eigenschaftenfensters ändern.

Hh465336.wedge(de-de,WIN.10).gifSo benennen Sie ein Steuerelement

  1. Wählen Sie das zu benennende Element aus.
  2. Geben Sie im Eigenschaftenpanel einen Namen in das Textfeld Name ein.
  3. Drücken Sie die Eingabetaste, um den Namen zu übernehmen.
Festlegen des Namens im Designer

Hier wird erläutert, wie Sie den Namen eines Steuerelements im XAML-Editor, indem Sie das x:Name-Attribut ändern.


<Button x:Name="Button1" Content="Button"/>

Festlegen von Steuerelementeigenschaften

Mithilfe von Eigenschaften geben Sie das Erscheinungsbild, den Inhalt sowie weitere Attribute von Steuerelementen an. Wenn Sie ein Steuerelement mit einem Entwicklungstool hinzufügen, werden manche Eigenschaften, die Größe, Position und Inhalt steuern, möglicherweise von Visual Studio für Sie festgelegt. Sie können einige Eigenschaften ändern, z. B. Width, Height und Margin, indem Sie das Steuerelement in der Entwurfsansicht auswählen und bearbeiten. In der Abbildung werden einige der in der Entwurfsansicht verfügbaren Größenanpassungstools veranschaulicht.

TextBox im Designer

Sie können Größe und Position des Steuerelements auch automatisch festlegen lassen. In diesem Fall können Sie die von Visual Studio festgelegten Eigenschaften für Größe und Position zurücksetzen.

Hh465336.wedge(de-de,WIN.10).gifZurücksetzen einer Eigenschaft

  1. Klicken Sie im Bereich Eigenschaften auf den Eigenschaftsmarker neben dem Eigenschaftswert. Das Eigenschaftenmenü wird geöffnet.
  2. Klicken Sie im Eigenschaftsmenü auf Zurücksetzen.

    Eigenschaftsmenü

Sie können Steuerelementeigenschaften im Eigenschaftenfenster, in XAML oder im Code festlegen. Wenn Sie beispielsweise die Vordergrundfarbe für eine Button ändern möchten, legen Sie die Foreground-Eigenschaft des Steuerelements fest. In dieser Abbildung wird veranschaulicht, wie die Foreground-Eigenschaft über die Farbauswahl im Eigenschaftenfenster festgelegt wird.

Festlegen des Vordergrunds im Designer

Hier wird beschrieben, wie die Foreground-Eigenschaft im XAML-Editor festgelegt wird. Beachten Sie das Visual Studio IntelliSense-Fenster, in dem hilfreiche Infos zur Syntax angezeigt werden.

Festlegen des Vordergrunds in XAML

Festlegen des Vordergrunds in XAML

Im Folgenden finden Sie das XAML, das nach dem Festlegen der Foreground-Eigenschaft vorliegt.


<Button x:Name="Button1" Content="Button" 
    HorizontalAlignment="Left" VerticalAlignment="Top"
    Foreground="Beige"/>

An dieser Stelle wird beschrieben, wie die Foreground-Eigenschaft im Code festgelegt wird.


Button1.Foreground = new SolidColorBrush(Windows.UI.Colors.Beige);

Erstellen eines Ereignishandlers

Jedes Steuerelement verfügt über Ereignisse, mit denen Sie auf Aktionen seitens des Benutzers oder sonstige Änderungen in der App reagieren können. Ein Button-Steuerelement enthält beispielsweise ein Click-Ereignis, das ausgelöst wird, wenn ein Benutzer auf den Button klickt. Sie erstellen eine als Ereignishandler bezeichnete Methode, mit der das Ereignis behandelt wird. Sie können das Ereignis eines Steuerelements einer Ereignishandlermethode im Eigenschaftenfenster, in XAML oder im Code zuordnen. Weitere Informationen zu Ereignissen finden Sie unter Übersicht über Ereignisse und Routingereignisse.

Wählen Sie zum Erstellen eines Ereignishandlers das Steuerelement aus, und klicken Sie oben im Eigenschaftenfenster auf die Registerkarte Ereignisse. Im Eigenschaftenfenster werden alle für das betreffende Steuerelement verfügbaren Ereignisse aufgelistet. Im Folgenden werden einige Ereignisse für eine Button aufgelistet.

TextBox-Ereignisse

Wenn Sie einen Ereignishandler mit dem Standardnamen erstellen möchten, doppelklicken Sie im Eigenschaftenfenster auf das Textfeld neben dem Ereignisnamen. Wenn Sie einen Ereignishandler mit einem benutzerdefinierten Namen erstellen möchten, geben Sie im Textfeld den gewünschten Namen ein, und drücken Sie die EINGABETASTE. Der Ereignishandler wird erstellt, und die CodeBehind-Datei wird im Code-Editor geöffnet. Die Ereignishandlermethode enthält zwei Parameter. Der erste Parameter ist sender. Dabei handelt es sich um einen Verweis auf das Objekt, dem der Handler angefügt ist. Der sender-Parameter ist ein Object-Typ. In der Regel wandeln Sie sender in einen genaueren Typ um, wenn Sie beabsichtigen, den Zustand direkt für das sender-Objekt zu überprüfen oder zu ändern. Abhängig davon, wo der Handler angefügt wird, handelt es sich dabei Ihrem eigenen App-Design entsprechend voraussichtlich um einen Typ, in den sender sicher umgewandelt werden kann. Den zweiten Wert stellen Ereignisdaten dar. In der Regel sind diese in Signaturen als e-Parameter enthalten.

Hier finden Sie den Code, der das Click-Ereignis einer Button mit dem Namen Button1 behandelt. Wenn Sie auf die Schaltfläche klicken, wird die Foreground-Eigenschaft der angeklickten Button auf blau gesetzt.


private void Button_Click(object sender, RoutedEventArgs e)
{
    Button b = (Button)sender;
    b.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
}

Sie können einen Ereignishandler auch in XAML zuordnen. Geben Sie im XAML-Editor den Namen des Ereignisses ein, das behandelt werden soll. In Visual Studio wird ein IntelliSense-Fenster geöffnet, sobald Sie mit der Eingabe beginnen. Nach dem Angeben des Ereignisses können Sie im IntelliSense-Fenster auf <Neuer Ereignishandler> doppelklicken, um einen neuen Ereignishandler mit dem Standardnamen zu erstellen oder einen vorhandenen Ereignishandler aus der Liste auszuwählen. Im Folgenden ist das IntelliSense-Fenster dargestellt, das geöffnet wird, um Sie beim Erstellen eines neuen Ereignishandlers zu unterstützen.

Erstellen des TextChanged-Ereignishandlers

In diesem Beispiel wird veranschaulicht, wie in XAML ein Click-Ereignis einem Ereignishandler namens Button_Click zugeordnet wird.


<Button Name="Button1" Content="Button" Click="Button_Click"/>

Sie können ein Ereignis auch dem zugehörigen Ereignishandler im CodeBehind zuordnen. Im Folgenden wird beschrieben, wie ein Ereignishandler im Code zugeordnet wird.


Button1.Click += new RoutedEventHandler(Button_Click);

Neue Steuerelemente

Wenn Sie andere XAML-Plattformen nutzen, können möglicherweise auch die folgenden Steuerelemente für Sie von Interesse sein. Diese wurden in Windows 8 neu eingeführt.

Weitere Informationen zu diesen und anderen Steuerelementen finden Sie in der Liste der Steuerelemente.

Nächste Schritte

Sie haben sich nun mit den Grundlagen vertraut gemacht und können Ihrer App Steuerelemente hinzufügen, Steuerelementeigenschaften festlegen und Ereignishandler erstellen. Nun erfahren Sie mehr über die verfügbaren Steuerelemente: Liste der Steuerelemente oder Steuerelemente nach Funktion. Laden Sie das Beispiel für einfache Steuerelemente herunter, um sich zahlreiche Steuerelemente für die Windows-Benutzeroberfläche anzusehen.

Verwandte Themen

Übersicht über Ereignisse und Routingereignisse
Liste der Steuerelemente
Erstellen einer UI mithilfe des XAML-Designers
Roadmap für das Erstellen von Apps mit C#, C++ oder VB

 

 

Anzeigen:
© 2015 Microsoft