控制項和模式的簡介

在 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 的前景色，可以設定控制項的 Foreground 屬性。 此圖顯示如何使用屬性視窗中的顏色選擇器設定 Foreground 屬性。

以下是如何在 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 或程式碼中的事件處理程序方法相關聯。 關於更多事件資訊，請參閱事件與路由事件概觀。

若要建立事件處理程序，請選擇該控件，然後按一下屬性視窗頂部的事件標籤。 屬性視窗列出了該控制項可用的所有事件。 以下是 Button 的一些事件。

若要使用預設名稱建立事件處理程序，請雙擊屬性視窗中事件名稱旁的文字方塊。 若要建立具有自訂名稱的事件處理程序，請在文字方塊中輸入您選擇的名稱，然後按 Enter 鍵。 將建立事件處理程序並在程式碼編輯器中開啟程式碼隱藏檔案。 事件處理程序方法有 2 個參數。 第一個是 sender，這是附加處理程式對象的參考。 sender 參數不是 Object 類型。 如果您預期要檢查或變更物件本身的狀態，sender通常會轉換成更精確的類型sender。 根據您自己的應用程式設計sender，您期望根據處理程序的附加位置可以安全地轉換為類型。 第二個值是事件資料，通常會以 e 或 args 參數出現在簽章中。

以下程式代碼會處理名為 Button1 之 Button 的 Click 事件。 當您按一下該按鈕時，您按一下的按鈕的 Foreground 屬性將設定為藍色。

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 命名空間
• 版面配置
• Style
• 可用性