控件和模式简介Intro to controls and patterns

在 Windows 应用开发中,控件 是用于显示内容或支持交互的 UI 元素。In Windows app development, a control is a UI element that displays content or enables interaction. 通过使用如按钮、文本框和组合框等控件显示数据并获取用户输入,你可以为你的应用创建 UI。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.

重要的 APIWindows.UI.Xaml.Controls 命名空间Important APIs: Windows.UI.Xaml.Controls namespace

模式是修改控件或组合多个控件来创造新内容的一种诀窍。A pattern is a recipe for modifying a control or combining several controls to make something new. 例如,大纲/细节模式是一种可将 SplitView 控件用于应用导航的方式。For example, the master/details pattern is a way that you can use a SplitView control for app navigation. 同样,可以自定义 NavigationView 控件的模板来实现选项卡模式。Similarly, you can customize the template of a NavigationView control to implement the tab pattern.

在许多情况下,你可以按原样使用控件。In many cases, you can use a control as-is. 但 XAML 控件将函数与结构和外观分离开来,因此你可以进行各种级别的修改来使它们符合你的需求。But XAML controls separate function from structure and appearance, so you can make various levels of modification to make them fit your needs. 样式部分中,你可以了解如何使用 XAML 样式控件模板来修改控件。In the Style section, you can learn how to use XAML styles and control templates to modify a control.

在此部分中,我们为可用于生成应用 UI 的每个 XAML 控件提供指南。In this section, we provide guidance for each of the XAML controls you can use to build your app UI. 首先,本文介绍如何向应用添加控件。To start, this article shows you how to add controls to your app. 对应用使用控件有 3 个关键步骤:There are 3 key steps to using controls to your app:

  • 向应用 UI 添加控件。Add a control to your app UI.
  • 设置控件的属性,如宽度、高度或前景色。Set properties on the control, such as width, height, or foreground color.
  • 将代码添加到控件的事件处理程序,从而使其执行一些任务。Add code to the control's event handlers so that it does something.

添加控件Add a control

你可以通过多种方式将控件添加到应用:You can add a control to an app in several ways:

  • 使用诸如 Blend for Visual Studio 或 Microsoft Visual Studio Extensible Application Markup Language (XAML) 设计器的设计工具。Use a design tool like Blend for Visual Studio or the Microsoft Visual Studio Extensible Application Markup Language (XAML) designer.
  • 在 Visual Studio XAML 编辑器中将控件添加到 XAML 标记中。Add the control to the XAML markup in the Visual Studio XAML editor.
  • 在代码中添加控件。Add the control in code. 当应用运行时会看到你在代码中添加的控件,但在 Visual Studio XAML 设计器中看不到。Controls that you add in code are visible when the app runs, but are not visible in the Visual Studio XAML designer.

在 Visual Studio 中,当你在应用中添加和操纵控件时,你可以使用许多程序功能,包括“工具箱”、XAML 设计器、XAML 编辑器以及“属性”窗口。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.

Visual Studio“工具箱”会显示可在应用中使用的许多控件。The Visual Studio Toolbox displays many of the controls that you can use in your app. 要将控件添加到应用,请在“工具箱”中双击该控件。To add a control to your app, double-click it in the Toolbox. 例如,如果双击 TextBox 控件,则会将此 XAML 添加到 XAML 视图。For example, when you double-click the TextBox control, this XAML is added to the XAML view.

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

还可以将控件从“工具箱”拖动到 XAML 设计器。You can also drag the control from the Toolbox to the XAML designer.

设置控件的名称Set the name of a control

若要在代码中使用某个控件,你可以设置其 x:Name 属性并在代码中通过名称来引用该控件。To work with a control in code, you set its x:Name attribute and reference it by name in your code. 你可以在 Visual Studio“属性”窗口或 XAML 中设置名称。You can set the name in the Visual Studio Properties window or in XAML. 下面是通过使用“属性”窗口顶部的“名称”文本框来设置当前选定控件名称的方法。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.

命名控件To name a control

  1. 选择要命名的元素。Select the element to name.
  2. 在“属性”面板中,在“名称”文本框中键入名称。In the Properties panel, type a name into the Name text box.
  3. 按 Enter 提交名称。Press Enter to commit the name.

Visual Studio 设计器中的 Name 属性

下面介绍了如何在 XAML 编辑器中通过添加 x:Name 属性来设置控件的名称。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"/>

设置控件属性Set the control properties

你使用属性来指定控件的外观、内容以及其他属性。You use properties to specify the appearance, content, and other attributes of controls. 使用设计工具添加控件时,Visual Studio 可能会为你设置某些控制大小、位置和内容的属性。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. 通过选择和操纵“设计”视图中的控件,你可以更改某些属性,如 Width、Height 或 Margin。You can change some properties, such as Width, Height or Margin, by selecting and manipulating the control in the Design view. 下图显示了“设计”视图中提供的某些大小调整工具。This illustration shows some of the resizing tools available in Design view.

在 Visual Studio 设计器中调整工具大小

你可能希望让控件自动调整大小和位置。You might want to let the control be sized and positioned automatically. 这种情况下,你可以重置 Visual Studio 为你设置的大小和位置属性。In this case, you can reset the size and position properties that Visual Studio set for you.

重置属性To reset a property

  1. 在“属性”面板中,单击属性值旁边的属性标记。In the Properties panel, click the property marker next to the property value. 此时将打开“属性”菜单。The property menu opens.
  2. 在“属性”菜单中,单击“重置”。In the property menu, click Reset.

Visual Studio 属性重置菜单选项

在 XAML 或代码中,你可以通过“属性”窗口设置控件属性。You can set control properties in the Properties window, in XAML, or in code. 例如,若要更改 Button 的前景色,你可以设置控件的 Foreground 属性。For example, to change the foreground color for a Button, you set the control's Foreground property. 下图显示了如何通过使用“属性”窗口中的颜色选取器来设置 Foreground 属性。This illustration shows how to set the Foreground property by using the color picker in the Properties window.

Visual Studio 设计器中的颜色选取器

下面是在 XAML 编辑器中设置 Foreground 属性的方法。Here's how to set the Foreground property in the XAML editor. 注意打开的 Visual Studio IntelliSense 窗口,该窗口可以帮助你处理语法。Notice the Visual Studio IntelliSense window that opens to help you with the syntax.

在 XAML 第 1 部分中的 Intellisense

在 XAML 第 2 部分中的 Intellisense

下面是设置 Foreground 属性后的 XAML 结果。Here's the resulting XAML after you set the Foreground property.

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

下面介绍了如何在代码中设置 Foreground 属性。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()));

创建事件处理程序Create an event handler

每个控件都包含事件,从而使你可以对用户的操作或应用中的其他更改做出响应。Each control has events that enable you to respond to actions from your user or other changes in your app. 例如,Button 控件包含用户单击 Button 时引发的 Click 事件。For example, a Button control has a Click event that is raised when a user clicks the Button. 你可以创建一个名为事件处理程序的方法来处理事件。You create a method, called an event handler, to handle the event. 你可以在 XAML 中或在代码中,将控件的事件与“属性”窗口中的事件处理程序方法相关联。You can associate a control's event with an event handler method in the Properties window, in XAML, or in code. 有关事件的详细信息,请参阅事件和路由事件概述For more info about events, see Events and routed events overview.

要创建事件处理程序,请选择控件,然后在“属性”窗口的顶部单击“事件”选项卡。To create an event handler, select the control and then click the Events tab at the top of the Properties window. “属性”窗口会列出可供该控件使用的所有事件。The Properties window lists all of the events available for that control. 下面是 Button 的一些事件。Here are some of the events for a Button.

Visual Studio 事件列表

要使用默认名称创建事件处理程序,请在“属性”窗口中双击事件名称旁的文本框。To create an event handler with the default name, double-click the text box next to the event name in the Properties window. 若要使用自定义名称创建事件处理程序,请将你选择的名称输入到文本框中并按 Enter。To create an event handler with a custom name, type the name of your choice into the text box and press enter. 随即会创建事件处理程序并在代码编辑器中打开代码隐藏文件。The event handler is created and the code-behind file is opened in the code editor. 该事件处理程序方法具有 2 个参数。The event handler method has 2 parameters. 第一个参数是 sender,它是对处理程序所附加到的对象的引用。The first is sender, which is a reference to the object where the handler is attached. sender 参数是 Object 类型。The sender parameter is an Object type. 如果你想在 sender 对象本身上检查或更改状态,通常需要将 sender 强制转换为更精确的类型。You typically cast sender to a more precise type if you expect to check or change the state on the sender object itself. 基于你自己的应用设计,你想要一种可将 sender 安全转换到其中的类型(基于附加处理程序的位置)。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. 第二个值是事件数据,它通常在签名中显示为 eargs 参数。The second value is event data, which generally appears in signatures as the e or args parameter.

以下代码处理名为 Button1 的 Button 的 Click 事件。Here's code that handles the Click event of a Button named Button1. 当你单击该按钮时,你单击的 Button 的 Foreground 属性将设置为 blue。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()));
    }

你也可以在 XAML 中关联事件处理程序。You can also associate an event handler in XAML. 在 XAML 编辑器中,键入要处理的事件名称。In the XAML editor, type in the event name that you want to handle. 当你开始输入时,Visual Studio 会显示 IntelliSense 窗口。Visual Studio shows an IntelliSense window when you begin typing. 指定事件后,你可以在 IntelliSense 窗口中双击 <New Event Handler>,从而使用默认名称创建新的事件处理程序,或者从列表中选择一个现有的事件处理程序。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.

下面是显示的 IntelliSense 窗口。Here's the IntelliSense window that appears. 它可帮你创建一个新的事件处理程序,或者选择一个现有事件处理程序。It helps you create a new event handler or select an existing event handler.

单击事件的 Intellisense

该示例显示如何在 XAML 中将 Click 事件与名为 Button_Click 的事件处理程序相关联。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"/>

你也可以将事件与实际代码中的事件处理程序相关联。You can also associate an event with its event handler in the code-behind. 下面是在代码中关联事件处理程序的方法。Here's how to associate an event handler in code.

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