控件和模式简介

在 Windows 应用开发中，控件是用于显示内容或支持交互的 UI 元素。 通过使用按钮、文本框和组合框等控件来显示数据并获取用户输入，为应用创建 UI。

重要 API： Windows.UI.Xaml.Controls 命名空间

模式是修改控件或组合多个控件以创建新控件的配方。 例如， 列表/详细信息 模式是一种可用于应用导航的 SplitView 控件的方法。 同样，可以自定义 NavigationView 控件的模板来实现选项卡模式。

在许多情况下，可以原样使用控件。 但是 XAML 控件将函数与结构和外观分开，因此你可以进行各种级别的修改，使其符合你的需求。 在 “样式” 部分中，可以了解如何使用 XAML 样式 和 控件模板 修改控件。

在本部分中，我们将针对可用于生成应用 UI 的每个 XAML 控件提供指导。 首先，本文介绍如何向应用添加控件。 对应用使用控件有 3 个关键步骤：

• 向应用 UI 添加控件。
• 设置控件的属性，例如宽度、高度或前景颜色。
• 将代码添加到控件的事件处理程序，以便它执行某些作。

添加控件

可以通过多种方式向应用添加控件：

• 使用 Blend for Visual Studio 或 Microsoft Visual Studio 可扩展应用程序标记语言（XAML）设计器等设计工具。
• 将控件添加到 Visual Studio XAML 编辑器中的 XAML 标记。
• 在代码中添加控件。 在应用运行时，添加代码的控件可见，但在 Visual Studio XAML 设计器中不可见。

在 Visual Studio 中，在应用中添加和作控件时，可以使用许多程序的功能，包括工具箱、XAML 设计器、XAML 编辑器和“属性”窗口。

Visual Studio 工具箱显示可在应用中使用的许多控件。 若要向应用添加控件，请在工具箱中双击它。 例如，双击 TextBox 控件时，此 XAML 将添加到 XAML 视图。

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

还可以将控件从工具箱拖动到 XAML 设计器。

设置控件的名称

若要在代码中使用控件，请设置其 x：Name 属性，并在代码中按名称引用它。 可以在 Visual Studio 属性窗口或 XAML 中设置名称。 下面介绍如何使用“属性”窗口顶部的“名称”文本框设置当前所选控件的名称。

为控件命名

1. 选择要命名的元素。
2. 在“属性”面板中，在“名称”文本框中键入名称。
3. 按 Enter 提交名称。

下面介绍如何通过添加 x：Name 属性在 XAML 编辑器中设置控件的名称。

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

设置控件属性

使用属性来指定控件的外观、内容和其他属性。 使用设计工具添加控件时，Visual Studio 可能会为你设置控件大小、位置和内容的某些属性。 可以通过在设计视图中选择并操作控件来更改某些属性，例如宽度、高度或边距。 此图显示了设计视图中可用的一些调整大小工具。

你可能希望让控件自动调整大小和定位。 在这种情况下，可以重置 Visual Studio 为你设置的大小和位置属性。

重置属性

1. 在“属性”面板中，单击属性值旁边的属性标记。 此时会打开属性菜单。
2. 在属性菜单中，单击“重置”。

可以在“属性”窗口、XAML 或代码中设置控件属性。 例如，若要更改 Button 的前景色，请设置控件的前景属性。 此图显示如何使用“属性”窗口中的颜色选取器设置前台属性。

下面介绍如何在 XAML 编辑器中设置 Foreground 属性。 请注意，Visual Studio 的 IntelliSense 窗口会打开，以帮助你掌握语法。

下面是设置 Foreground 属性后生成的 XAML。

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

下面介绍如何在代码中设置 Foreground 属性。

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

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

创建事件处理程序

每个控件都有事件，使你能够响应用户的作或应用中的其他更改。 例如，按钮控件具有在用户单击按钮时引发的 Click 事件。 创建一个称为事件处理程序的方法来处理该事件。 可以在“属性”窗口、XAML 或代码中将控件的事件与事件处理程序方法相关联。 有关事件的详细信息，请参阅 事件和路由事件概述。

若要创建事件处理程序，请选择该控件，然后单击“属性”窗口顶部的“事件”选项卡。 “属性”窗口列出可用于该控件的所有事件。 以下是与按钮相关的事件列表。

若要创建具有默认名称的事件处理程序，请在“属性”窗口中双击事件名称旁边的文本框。 若要使用自定义名称创建事件处理程序，请在文本框中键入所选的名称，然后按 Enter。 创建事件处理程序并在代码编辑器中打开代码隐藏文件。 事件处理程序方法具有 2 个参数。 第一个是 sender，它是对附加处理程序的对象的引用。 参数 sender 是 对象 类型。 通常情况下，如果希望检查或更改sender对象本身的状态，则应将sender强制转换为更精确的类型。 根据您的应用设计，您期望根据处理程序附加的位置将 sender 安全地强制转换为该类型。 第二个值是事件数据，该数据通常以或e参数的形式args出现在签名中。

下面是处理名为 Button1“按钮”的 Click 事件的代码。 单击该按钮时，单击的按钮的前景属性将设置为蓝色。

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()));
    }

还可以在 XAML 中关联事件处理程序。 在 XAML 编辑器中，键入要处理的事件名称。 Visual Studio 在开始键入时显示 IntelliSense 窗口。 指定事件后，可以在 IntelliSense 窗口中双击 <New Event Handler> 以创建新的具有默认名称的事件处理程序，或从列表中选择现有的事件处理程序。

下面是显示的 IntelliSense 窗口。 它可帮助你创建新的事件处理程序或选择现有事件处理程序。

此示例演示如何将 Click 事件与 XAML 中名为Button_Click的事件处理程序相关联。

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

还可以在后置代码中将事件与其事件处理程序相关联。 下面介绍如何在代码中关联事件处理程序。

Button1.Click += new RoutedEventHandler(Button_Click);

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

相关主题

• 按函数排序的控件索引
• Windows.UI.Xaml.Controls 命名空间
• 布局
• 样式
• 可用性