控制項和模式的簡介Intro to controls and patterns

在 Windows 應用程式開發中,「控制項」 是顯示內容或啟用互動的 UI 元素。In Windows app development, a control is a UI element that displays content or enables interaction. 您可以利用控制項 (例如按鈕、文字方塊以及下拉式方塊) 為自己的 app 建立 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.

在本節中,我們會針對您可用來建置 app 之 UI 的每個 XAML 控制項提供指導方針。In this section, we provide guidance for each of the XAML controls you can use to build your app UI. 做為開始,這篇文章會說明如何將控制項新增至 app。To start, this article shows you how to add controls to your app. 在 app 使用控制項有 3 個主要步驟:There are 3 key steps to using controls to your app:

  • 將控制項新增到 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 設計工具中的 [名稱] 屬性

以下說明如何在 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

您可以使用屬性 (Property) 來指定控制項的外觀、內容以及其他屬性 (Attribute)。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. 例如,若要變更按鈕的前景色彩,您可以設定控制項的 [前景] 屬性。For example, to change the foreground color for a Button, you set the control's Foreground property. 這個圖例說明如何使用 [屬性] 視窗的色彩選擇器來設定 [前景] 屬性。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 中的 Intellisense 第 1 部分

XAML 中的 Intellisense 第 2 部分

以下是設定 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 控制項有一個 Click 事件,會在使用者按一下 Button 時引發。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. 依據您自己的 app 設計,您會想要一個能夠依據處理程式附加位置來放心轉換 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.

以下程式碼用來處理 Button (名為 Button1) 的 Click 事件。Here's code that handles the Click event of a Button named Button1. 當您按一下按鈕,按下之 Button 的 Foreground 屬性會設成藍色。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.

click 事件的 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 });