Einführung in Steuerelemente und Muster

In der Windows-App-Entwicklung ist ein Steuerelement ein UI-Element, das Inhalte anzeigt oder Interaktionen ermöglicht. Sie erstellen die Benutzeroberfläche für Ihre App mithilfe von Steuerelementen wie Schaltflächen, Textfeldern und Kombinationsfeldern, um Daten anzuzeigen und Benutzereingaben zu erhalten.

Wichtige APIs: Windows.UI.Xaml.Controls-Namespace

Ein Muster ist ein Rezept zum Ändern eines Steuerelements oder zum Kombinieren mehrerer Steuerelemente, um etwas Neues zu schaffen. Beispielsweise ist das Listen-/Detailmuster eine Möglichkeit, ein SplitView-Steuerelement für die App-Navigation zu verwenden. Ebenso können Sie die Vorlage eines NavigationView-Steuerelements anpassen, um das Registerkartenmuster zu implementieren.

In vielen Fällen können Sie ein Steuerelement so wie es ist verwenden. XAML-Steuerelemente trennen jedoch die Funktion von Struktur und Darstellung, sodass Sie verschiedene Änderungsebenen vornehmen können, um sie ihren Anforderungen anzupassen. Im Abschnitt "Formatvorlage " erfahren Sie, wie Sie XAML-Formatvorlagen und Steuerelementvorlagen zum Ändern eines Steuerelements verwenden.

In diesem Abschnitt bieten wir Anleitungen für die einzelnen XAML-Steuerelemente, die Sie zum Erstellen der App-UI verwenden können. Zunächst wird in diesem Artikel gezeigt, wie Sie Ihrer App Steuerelemente hinzufügen. Es gibt drei wichtige Schritte zum Verwenden von Steuerelementen für Ihre App:

• Fügen Sie Ihrer App-Benutzeroberfläche ein Steuerelement hinzu.
• Legen Sie Eigenschaften für das Steuerelement fest, z. B. Breite, Höhe oder Vordergrundfarbe.
• Fügen Sie Code zu den Ereignishandlern des Steuerelements hinzu, damit sie etwas ausführt.

Hinzufügen eines Steuerelements

Sie können einer App auf verschiedene Arten ein Steuerelement hinzufügen:

• Verwenden Sie ein Designtool wie Blend für Visual Studio oder den Xaml-Designer (Extensible Application Markup Language) von Microsoft Visual Studio.
• Fügen Sie das Steuerelement dem XAML-Markup im XAML-Editor von Visual Studio hinzu.
• Fügen Sie das Steuerelement im Code hinzu. Steuerelemente, die Sie im Code hinzufügen, sind sichtbar, wenn die App ausgeführt wird, aber im XAML-Designer von Visual Studio nicht sichtbar sind.

Wenn Sie in Visual Studio Steuerelemente in Ihrer App hinzufügen und bearbeiten, können Sie viele der Features des Programms verwenden, einschließlich der Toolbox, des XAML-Designers, des XAML-Editors und des Eigenschaftenfensters.

Die Visual Studio-Toolbox zeigt viele der Steuerelemente an, die Sie in Ihrer App verwenden können. Um Ihrer App ein Steuerelement hinzuzufügen, doppelklicken Sie in der Toolbox darauf. Wenn Sie beispielsweise auf das TextBox-Steuerelement doppelklicken, wird dieser XAML-Code der XAML-Ansicht 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

Um mit einem Steuerelement im Code zu arbeiten, legen Sie das x:Name-Attribut fest und verweisen in Ihrem Code auf das Steuerelement. Sie können den Namen im Fenster "Eigenschaften" von Visual Studio oder in XAML festlegen. Hier erfahren Sie, wie Sie den Namen des aktuell ausgewählten Steuerelements mithilfe des Textfelds "Name" oben im Eigenschaftenfenster festlegen.

So benennen Sie ein Steuerelement

1. Wählen Sie das zu benennende Element aus.
2. Geben Sie im Eigenschaftenbereich einen Namen in das Textfeld "Name" ein.
3. Drücken Sie die EINGABETASTE, um den Namen zu übernehmen.

Hier erfahren Sie, wie Sie den Namen eines Steuerelements im XAML-Editor festlegen, indem Sie das x:Name-Attribut hinzufügen.

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

Festlegen der Steuerelementeigenschaften

Mithilfe von Eigenschaften können Sie die Darstellung, den Inhalt und andere Attribute von Steuerelementen angeben. Wenn Sie ein Steuerelement mithilfe eines Entwurfstools hinzufügen, werden einige Eigenschaften, die Größe, Position und Inhalt steuern, möglicherweise von Visual Studio für Sie festgelegt. Sie können einige Eigenschaften wie Breite, Höhe oder Rand ändern, indem Sie das Steuerelement in der Entwurfsansicht auswählen und bearbeiten. Diese Abbildung zeigt einige der In der Entwurfsansicht verfügbaren Größenänderungstools.

Möglicherweise möchten Sie zulassen, dass das Steuerelement automatisch angepasst und positioniert wird. In diesem Fall können Sie die Für Sie festgelegten Größen- und Positionseigenschaften von Visual Studio zurücksetzen.

So setzen Sie eine Eigenschaft zurück

1. Klicken Sie im Eigenschaftenbereich auf die Eigenschaftsmarkierung neben dem Eigenschaftswert. Das Eigenschaftenmenü wird geöffnet.
2. Klicken Sie im Eigenschaftenmenü auf "Zurücksetzen".

Sie können Steuerelementeigenschaften im Eigenschaftenfenster, in XAML oder im Code festlegen. Wenn Sie beispielsweise die Vordergrundfarbe für eine Schaltfläche ändern möchten, legen Sie die Vordergrundeigenschaft des Steuerelements fest. In dieser Abbildung wird gezeigt, wie Die Vordergrundeigenschaft mithilfe der Farbauswahl im Eigenschaftenfenster festgelegt wird.

Hier erfahren Sie, wie Sie die Foreground-Eigenschaft im XAML-Editor festlegen. Beachten Sie das Visual Studio IntelliSense-Fenster, das geöffnet wird, um Sie bei der Syntax zu unterstützen.

Hier sehen Sie den resultierenden XAML-Code, nachdem Sie die Foreground-Eigenschaft festgelegt haben.

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

Hier erfahren Sie, wie Sie die Foreground-Eigenschaft im Code festlegen.

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

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

Erstellen eines Ereignishandlers

Jedes Steuerelement verfügt über Ereignisse, mit denen Sie auf Aktionen von Ihrem Benutzer oder anderen Änderungen in Ihrer App reagieren können. Beispielsweise verfügt ein Schaltflächen-Steuerelement über ein Click-Ereignis, das ausgelöst wird, wenn ein Benutzer auf die Schaltfläche klickt. Sie erstellen eine Methode, die als Ereignishandler bezeichnet wird, um das Ereignis zu behandeln. Sie können das Ereignis eines Steuerelements einer Ereignishandlermethode im Eigenschaftenfenster, in XAML oder im Code zuordnen. Weitere Informationen zu Ereignissen finden Sie in der Übersicht über Ereignisse und Routingereignisse.

Um einen Ereignishandler zu erstellen, wählen Sie das Steuerelement aus, und klicken Sie dann oben im Eigenschaftenfenster auf die Registerkarte "Ereignisse". Im Eigenschaftenfenster werden alle für dieses Steuerelement verfügbaren Ereignisse aufgelistet. Hier sind einige der Ereignisse für eine Schaltfläche.

Um einen Ereignishandler mit dem Standardnamen zu erstellen, doppelklicken Sie im Eigenschaftenfenster auf das Textfeld neben dem Ereignisnamen. Um einen Ereignishandler mit einem benutzerdefinierten Namen zu erstellen, geben Sie den Namen Ihrer Wahl in das Textfeld ein, und drücken Sie die EINGABETASTE. Der Ereignishandler wird erstellt, und die CodeBehind-Datei wird im Code-Editor geöffnet. Die Ereignishandlermethode weist 2 Parameter auf. Die erste ist sender, ein Verweis auf das Objekt, an das der Handler angefügt ist. Der sender Parameter ist ein Objekttyp . Normalerweise wandeln Sie sender in einen präziseren Typ um, wenn Sie erwarten, dass der Zustand des sender-Objekts selbst überprüft oder geändert wird. Basierend auf Ihrem eigenen App-Design erwarten Sie einen Typ, in den sender sicher umgewandelt werden kann, abhängig davon, wo der Handler angebracht ist. Der zweite Wert ist Ereignisdaten, die in der Regel in Signaturen als Parameter e angezeigt args werden.

Der folgende Code behandelt das Click-Ereignis einer Schaltfläche mit dem Namen Button1. Wenn Sie auf die Schaltfläche klicken, wird die Vordergrundeigenschaft der Schaltfläche, auf die Sie geklickt haben, auf Blau festgelegt.

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 auch einen Ereignishandler in XAML zuordnen. Geben Sie im XAML-Editor den Ereignisnamen ein, den Sie behandeln möchten. Visual Studio zeigt ein IntelliSense-Fenster an, wenn Sie mit der Eingabe beginnen. Nachdem Sie das Ereignis angegeben haben, können Sie im IntelliSense-Fenster doppelklicken <New Event Handler> , um einen neuen Ereignishandler mit dem Standardnamen zu erstellen, oder einen vorhandenen Ereignishandler aus der Liste auswählen.

Hier sehen Sie das IntelliSense-Fenster, das angezeigt wird. Es hilft Ihnen, einen neuen Ereignishandler zu erstellen oder einen vorhandenen Ereignishandler auszuwählen.

In diesem Beispiel wird gezeigt, wie Sie ein Click-Ereignis einem Ereignishandler namens Button_Click in XAML zuordnen.

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

Sie können ein Ereignis auch dem zugehörigen Ereignishandler im CodeBehind zuordnen. Hier erfahren Sie, wie Sie einen Ereignishandler im Code zuordnen.

Button1.Click += new RoutedEventHandler(Button_Click);

Button1().Click({ this, &MainPage::Button1_Click });

Zugehörige Themen

• Index der Steuerelemente nach Funktion
• Windows.UI.Xaml.Controls-Namespace
• Layout
• Style
• Benutzerfreundlichkeit