Einführung in Steuerelemente und MusterIntro to controls and patterns

In der Windows-App-Entwicklung ist ein Steuerelement ein UI-Element, das Inhalte anzeigt oder Interaktionen ermöglicht.In Windows app development, a control is a UI element that displays content or enables interaction. Sie erstellen die Benutzeroberfläche für Ihre App mit Steuerelementen wie Schaltflächen, Textfeldern und Kombinationsfeldern, um Daten anzuzeigen und Benutzereingaben zu erhalten.You create the UI for your app by using controls such as buttons, text boxes, and combo boxes to display data and get user input.

Wichtige APIs: Windows.UI.Xaml.Controls-NamespaceImportant APIs: Windows.UI.Xaml.Controls namespace

Ein Muster ist eine Anleitung zum Ändern eines Steuerelements oder zum Kombinieren verschiedener Steuerelemente, um etwas Neues zu erstellen.A pattern is a recipe for modifying a control or combining several controls to make something new. Das Muster master/details ist z. B. eine Möglichkeit, ein SplitView-Steuerelement zur App-Navigation zu verwenden.For example, the master/details pattern is a way that you can use a SplitView control for app navigation. Ebenso können Sie die Vorlage eines NavigationView-Steuerelements zum Implementieren des Registerkartenmusters anpassen.Similarly, you can customize the template of a NavigationView control to implement the tab pattern.

In vielen Fällen können Sie ein Steuerelement unverändert verwenden.In many cases, you can use a control as-is. XAML-Steuerelemente trennen jedoch die Funktion von der Struktur und Darstellung, sodass Sie diese über verschiedene Änderungsebenen an Ihre Bedürfnisse anpassen können.But XAML controls separate function from structure and appearance, so you can make various levels of modification to make them fit your needs. Im Abschnitt Stil erfahren Sie, wie Sie mithilfe von XAML-Formatvorlagen und Steuerelementvorlagen Steuerelemente ändern.In the Style section, you can learn how to use XAML styles and control templates to modify a control.

In diesem Abschnitt erhalten Sie Anleitungen zu jedem XAML-Steuerelement, das Sie zum Erstellen Ihrer App-UI verwenden können.In this section, we provide guidance for each of the XAML controls you can use to build your app UI. Zu Beginn wird in diesem Artikel beschrieben, wie Sie der App Steuerelemente hinzufügen.To start, this article shows you how to add controls to your app. Es gibt drei wichtige Schritte zum Hinzufügen von Steuerelementen zur App:There are 3 key steps to using controls to your app:

  • Fügen Sie Ihrer App-UI ein Steuerelement hinzu.Add a control to your app UI.
  • Legen Sie Eigenschaften für das Steuerelement fest, z. B. Breite, Höhe und Vordergrundfarbe.Set properties on the control, such as width, height, or foreground color.
  • Fügen Sie den Ereignishandlern des Steuerelements Code hinzu, damit sie eine Funktion haben.Add code to the control's event handlers so that it does something.

Hinzufügen eines SteuerelementsAdd a control

Es gibt mehrere Möglichkeiten, einer App ein Steuerelement hinzuzufügen:You can add a control to an app in several ways:

  • Verwenden Sie ein Entwicklungstool wie Blend für Visual Studio oder Microsoft Visual Studio Extensible Application Markup Language (XAML)-Designer.Use a design tool like Blend for Visual Studio or the Microsoft Visual Studio Extensible Application Markup Language (XAML) designer.
  • Fügen Sie das Steuerelement dem XAML-Markup im XAML-Editor in Visual Studio hinzu.Add the control to the XAML markup in the Visual Studio XAML editor.
  • Fügen Sie das Steuerelement im Code hinzu.Add the control in code. Im Code hinzugefügte Steuerelemente sind bei der Ausführung der App, jedoch nicht im Visual Studio-XAML-Designer sichtbar.Controls that you add in code are visible when the app runs, but are not visible in the Visual Studio XAML designer.

Wenn Sie in Visual Studio Steuerelemente in Ihrer App hinzufügen und bearbeiten, können Sie viele Features des Programms wie die Toolbox, den XAML-Designer, den XAML-Editor und das Eigenschaftenfenster nutzen.In Visual Studio, when you add and manipulate controls in your app, you can use many of the program's features, including the Toolbox, XAML designer, XAML editor, and the Properties window.

In der Toolbox von Visual Studio werden viele Steuerelemente angezeigt, die Sie in Ihrer App verwenden können.The Visual Studio Toolbox displays many of the controls that you can use in your app. Wenn Sie der App ein Steuerelement hinzufügen möchten, doppelklicken Sie in der Toolbox auf das gewünschte Steuerelement.To add a control to your app, double-click it in the Toolbox. Wenn Sie beispielsweise auf das „TextBox“-Steuerelement doppelklicken, wird der XAML-Ansicht folgender XAML-Code hinzugefügt.For example, when you double-click the TextBox control, this XAML is added to the XAML view.

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

Sie können das Steuerelement auch aus der Toolbox in den XAML-Designer ziehen.You can also drag the control from the Toolbox to the XAML designer.

Festlegen des Namens eines SteuerelementsSet the name of a control

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.To work with a control in code, you set its x:Name attribute and reference it by name in your code. Sie können den Namen im Eigenschaftenfenster von Visual Studio oder in XAML festlegen.You can set the name in the Visual Studio Properties window or in XAML. Hier wird veranschaulicht, wie Sie den Namen des derzeit ausgewählten Steuerelements über das Textfeld Name am oberen Rand des Eigenschaftenfensters festlegen.Here's how to set the name of the currently selected control by using the Name text box at the top of the Properties window.

So benennen Sie ein SteuerelementTo name a control

  1. Wählen Sie das zu benennende Element aus.Select the element to name.
  2. Geben Sie im Eigenschaftenpanel einen Namen in das Textfeld Name ein.In the Properties panel, type a name into the Name text box.
  3. Drücken Sie die EINGABETASTE, um den Namen zu übernehmen.Press Enter to commit the name.

Name-Eigenschaft im Visual Studio-Designer

Hier wird erläutert, wie Sie den Namen eines Steuerelements im XAML-Editor festlegen, indem Sie das x:Name-Attribut hinzufügen.Here's how to set the name of a control in the XAML editor by adding the x:Name attribute.

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

Festlegen von SteuerelementeigenschaftenSet the control properties

Mithilfe von Eigenschaften geben Sie das Erscheinungsbild, den Inhalt sowie weitere Attribute von Steuerelementen an.You use properties to specify the appearance, content, and other attributes of controls. 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.When you add a control using a design tool, some properties that control size, position, and content might be set for you by Visual Studio. Sie können einige Eigenschaften wie etwa die Breite, die Höhe oder den Rand ändern, indem Sie das Steuerelement in der Entwurfsansicht auswählen und bearbeiten.You can change some properties, such as Width, Height or Margin, by selecting and manipulating the control in the Design view. In der Abbildung werden einige der in der Entwurfsansicht verfügbaren Größenanpassungstools veranschaulicht.This illustration shows some of the resizing tools available in Design view.

Größenanpassungstools im Visual Studio-Designer

Sie können die Größe und die Position des Steuerelements auch automatisch festlegen lassen.You might want to let the control be sized and positioned automatically. In diesem Fall können Sie die von Visual Studio festgelegten Eigenschaften für Größe und Position zurücksetzen.In this case, you can reset the size and position properties that Visual Studio set for you.

Zurücksetzen einer EigenschaftTo reset a property

  1. Klicken Sie im Bereich Eigenschaften auf den Eigenschaftsmarker neben dem Eigenschaftswert.In the Properties panel, click the property marker next to the property value. Das Eigenschaftenmenü wird geöffnet.The property menu opens.
  2. Klicken Sie im Eigenschaftsmenü auf „Zurücksetzen“.In the property menu, click Reset.

Option „Zurücksetzen“ im Visual Studio-Menü „Eigenschaften“

Sie können Steuerelementeigenschaften im Eigenschaftenfenster, in XAML oder im Code festlegen.You can set control properties in the Properties window, in XAML, or in code. Wenn Sie beispielsweise die Vordergrundfarbe einer Schaltfläche ändern möchten, legen Sie die „Foreground“-Eigenschaft des Steuerelements fest.For example, to change the foreground color for a Button, you set the control's Foreground property. In dieser Abbildung wird veranschaulicht, wie die „Foreground“-Eigenschaft über die Farbauswahl im Eigenschaftenfenster festgelegt wird.This illustration shows how to set the Foreground property by using the color picker in the Properties window.

Farbauswahl im Visual Studio-Designer

Hier wird beschrieben, wie Sie die „Foreground“-Eigenschaft im XAML-Editor festlegen.Here's how to set the Foreground property in the XAML editor. Beachten Sie das Visual Studio IntelliSense-Fenster, in dem hilfreiche Informationen zur Syntax angezeigt werden.Notice the Visual Studio IntelliSense window that opens to help you with the syntax.

IntelliSense in XAML Teil 1

IntelliSense in XAML Teil 2

Im Folgenden finden Sie den XAML-Code, der nach dem Festlegen der „Foreground“-Eigenschaft vorliegt.Here's the resulting XAML after you set the Foreground property.

<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.Here's how to set the Foreground property in code.

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

Erstellen eines EreignishandlersCreate an event handler

Jedes Steuerelement verfügt über Ereignisse, mit denen Sie auf Aktionen seitens des Benutzers oder sonstige Änderungen in der App reagieren können.Each control has events that enable you to respond to actions from your user or other changes in your app. Das „Button“-Steuerelement stellt beispielsweise ein Click-Ereignis bereit, das ausgelöst wird, wenn ein Benutzer auf die Schaltfläche klickt.For example, a Button control has a Click event that is raised when a user clicks the Button. Sie erstellen eine als Ereignishandler bezeichnete Methode, mit der das Ereignis behandelt wird.You create a method, called an event handler, to handle the event. Sie können das Ereignis eines Steuerelements einer Ereignishandlermethode im Eigenschaftenfenster, in XAML oder im Code zuordnen.You can associate a control's event with an event handler method in the Properties window, in XAML, or in code. Weitere Informationen zu Ereignissen finden Sie unter Übersicht über Ereignisse und Routingereignisse.For more info about events, see Events and routed events overview.

Wählen Sie zum Erstellen eines Ereignishandlers das Steuerelement aus, und klicken Sie oben im Eigenschaftenfenster auf die Registerkarte „Ereignisse“.To create an event handler, select the control and then click the Events tab at the top of the Properties window. Im Eigenschaftenfenster werden alle für das betreffende Steuerelement verfügbaren Ereignisse aufgelistet.The Properties window lists all of the events available for that control. Im Folgenden werden einige Ereignisse für eine Schaltfläche aufgelistet.Here are some of the events for a Button.

Ereignisliste in Visual Studio

Wenn Sie einen Ereignishandler mit dem Standardnamen erstellen möchten, doppelklicken Sie im Eigenschaftenfenster auf das Textfeld neben dem Ereignisnamen.To create an event handler with the default name, double-click the text box next to the event name in the Properties window. 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.To create an event handler with a custom name, type the name of your choice into the text box and press enter. Der Ereignishandler wird erstellt, und die CodeBehind-Datei wird im Code-Editor geöffnet.The event handler is created and the code-behind file is opened in the code editor. Die Ereignishandlermethode enthält zwei Parameter.The event handler method has 2 parameters. Der erste Parameter ist sender. Dabei handelt es sich um einen Verweis auf das Objekt, dem der Handler angefügt ist.The first is sender, which is a reference to the object where the handler is attached. Der sender-Parameter ist ein Object-Typ.The sender parameter is an Object type. In der Regel wandeln Sie sender in einen genaueren Typ um, wenn Sie den Zustand direkt für das sender-Objekt überprüfen oder ändern möchten.You typically cast sender to a more precise type if you expect to check or change the state on the sender object itself. Abhängig davon, wo der Handler angefügt wird, handelt es sich dabei basierend auf Ihrem eigenen App-Design voraussichtlich um einen Typ, in den sender sicher umgewandelt werden kann.Based on your own app design, you expect a type that is safe to cast the sender to, based on where the handler is attached. Den zweiten Wert stellen Ereignisdaten dar. In der Regel sind diese in Signaturen als e- oder args-Parameter enthalten.The second value is event data, which generally appears in signatures as the e or args parameter.

Hier finden Sie den Code, der das Click-Ereignis einer Schaltfläche namens Button1 behandelt.Here's code that handles the Click event of a Button named Button1. Wenn Sie auf die Schaltfläche klicken, wird die „Foreground“-Eigenschaft der Schaltfläche auf Blau gesetzt.When you click the button, the Foreground property of the Button you clicked is set to blue.

private void Button_Click(object sender, RoutedEventArgs e)
{
    Button b = (Button)sender;
    b.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
}
#MainPage.h
struct MainPage : MainPageT<MainPage>
    {
        MainPage();
        ...
        void Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
    };
    
#MainPage.cpp
void MainPage::Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
    {
        auto b{ sender.as<winrt::Windows::UI::Xaml::Controls::Button>() };
        b.Foreground(Media::SolidColorBrush(Windows::UI::Colors::Blue()));
    }

Sie können einen Ereignishandler auch in XAML zuordnen.You can also associate an event handler in XAML. Geben Sie im XAML-Editor den Namen des Ereignisses ein, das behandelt werden soll.In the XAML editor, type in the event name that you want to handle. In Visual Studio wird ein IntelliSense-Fenster geöffnet, sobald Sie mit der Eingabe beginnen.Visual Studio shows an IntelliSense window when you begin typing. Nach dem Angeben des Ereignisses können Sie im IntelliSense-Fenster auf <New Event Handler> doppelklicken, um einen neuen Ereignishandler mit dem Standardnamen zu erstellen oder einen vorhandenen Ereignishandler aus der Liste auszuwählen.After you specify the event, you can double-click <New Event Handler> in the IntelliSense window to create a new event handler with the default name, or select an existing event handler from the list.

Das folgende IntelliSense-Fenster wird angezeigt.Here's the IntelliSense window that appears. Sie können darin einen neuen Ereignishandler erstellen oder einen vorhandenen Ereignishandler auswählen.It helps you create a new event handler or select an existing event handler.

IntelliSense für das Click-Ereignis

In diesem Beispiel wird veranschaulicht, wie in XAML ein Click-Ereignis einem Ereignishandler namens „Button_Click“ zugeordnet wird.This example shows how to associate a Click event with an event handler named Button_Click in XAML.

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

Sie können ein Ereignis auch dem zugehörigen Ereignishandler im „CodeBehind“ zuordnen.You can also associate an event with its event handler in the code-behind. Im Folgenden wird beschrieben, wie ein Ereignishandler im Code zugeordnet wird.Here's how to associate an event handler in code.

Button1.Click += new RoutedEventHandler(Button_Click);
Button1().Click({ this, &MainPage::Button1_Click });