控制項

Windows Presentation Foundation (WPF) 隨附許多幾乎每個 Windows 應用程式都會使用的常見 UI 元件，如 Button、Label、TextBox、Menu 和 ListBox。 在過去，這些物件稱為控制項。 儘管 WPF SDK 仍會繼續使用「控制項」一詞來概括任何代表應用程式中可見物件的類別，但要注意，類別不必繼承自 Control 類別，就可以顯現外觀。 繼承自 Control 類別的類別會包含 ControlTemplate，控制項的取用者可以用它將控制項的外觀完全改變，而不需要建立新的子類別 (Subclass)。 本主題討論在 WPF 中常見之控制項 (包括繼承自和非繼承自 Control 類別的控制項) 的用法。

這個主題包含下列章節。

• 建立控制項的執行個體
• 變更控制項的外觀
• 訂閱事件
• 擁有豐富內容的控制項
• 相關主題

建立控制項的執行個體

您可以使用Extensible Application Markup Language (XAML) 或程式碼將控制項加入至應用程式。 下列範例顯示如何建立一個會詢問使用者姓氏和名字的簡單應用程式。 這個範例會在 XAML 中建立六個控制項：兩個標籤 (Label)、兩個文字方塊和兩個按鈕。 所有控制項的建立方式都類似。

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="30"/>
    <RowDefinition Height="30"/>
    <RowDefinition Height="30"/>
    <RowDefinition/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>

  <Label>
    Enter your first name:
  </Label>
  <TextBox Grid.Row="0" Grid.Column="1" 
           Name="firstName" Margin="0,5,10,5"/>

  <Label Grid.Row="1" >
    Enter your last name:
  </Label>
  <TextBox Grid.Row="1" Grid.Column="1" 
           Name="lastName" Margin="0,5,10,5"/>

  <Button Grid.Row="2" Grid.Column="0" 
          Name="submit" Margin="2">
    View message
  </Button>

  <Button Grid.Row="2" Grid.Column="1" 
          Name="Clear" Margin="2">
    Clear Name
  </Button>
</Grid>

下列範例會以程式碼建立相同的應用程式。 為求簡潔，範例中已經排除建立 Grid grid1 的步驟。 grid1 具有與如前述 XAML 範例所示的相同欄和列定義。

Private firstNameLabel As Label
Private lastNameLabel As Label
Private firstName As TextBox
Private lastName As TextBox
Private submit As Button
Private clear As Button

Sub CreateControls()
    firstNameLabel = New Label()
    firstNameLabel.Content = "Enter your first name:"
    grid1.Children.Add(firstNameLabel)

    firstName = New TextBox()
    firstName.Margin = New Thickness(0, 5, 10, 5)
    Grid.SetColumn(firstName, 1)
    grid1.Children.Add(firstName)

    lastNameLabel = New Label()
    lastNameLabel.Content = "Enter your last name:"
    Grid.SetRow(lastNameLabel, 1)
    grid1.Children.Add(lastNameLabel)

    lastName = New TextBox()
    lastName.Margin = New Thickness(0, 5, 10, 5)
    Grid.SetColumn(lastName, 1)
    Grid.SetRow(lastName, 1)
    grid1.Children.Add(lastName)

    submit = New Button()
    submit.Content = "View message"
    Grid.SetRow(submit, 2)
    grid1.Children.Add(submit)

    clear = New Button()
    clear.Content = "Clear Name"
    Grid.SetRow(clear, 2)
    Grid.SetColumn(clear, 1)
    grid1.Children.Add(clear)


End Sub 'CreateControls

Label firstNameLabel;
Label lastNameLabel;
TextBox firstName;
TextBox lastName;
Button submit;
Button clear;

void CreateControls()
{
    firstNameLabel = new Label();
    firstNameLabel.Content = "Enter your first name:";
    grid1.Children.Add(firstNameLabel);

    firstName = new TextBox();
    firstName.Margin = new Thickness(0, 5, 10, 5);
    Grid.SetColumn(firstName, 1);
    grid1.Children.Add(firstName);

    lastNameLabel = new Label();
    lastNameLabel.Content = "Enter your last name:";
    Grid.SetRow(lastNameLabel, 1);
    grid1.Children.Add(lastNameLabel);

    lastName = new TextBox();
    lastName.Margin = new Thickness(0, 5, 10, 5);
    Grid.SetColumn(lastName, 1);
    Grid.SetRow(lastName, 1);
    grid1.Children.Add(lastName);

    submit = new Button();
    submit.Content = "View message";
    Grid.SetRow(submit, 2);
    grid1.Children.Add(submit);

    clear = new Button();
    clear.Content = "Clear Name";
    Grid.SetRow(clear, 2);
    Grid.SetColumn(clear, 1);
    grid1.Children.Add(clear);

}

變更控制項的外觀

變更控制項的外觀，使其更符合您應用程式的整體外觀及操作，這是很常見的。 您可以依據想要達成的效果，執行下列其中一項動作來變更控制項的外觀：

• 變更控制項的屬性值。

• 建立控制項的 Style。

• 建立控制項的新 ControlTemplate。

變更控制項的屬性值

許多控制項都有數個屬性可以用來變更控制項的外觀，如 Button 的 Background。 您可同時在 XAML 以及程式碼中設定屬性的值。 下列範例會設定 XAML 中 Button 上的 Background、FontSize 和FontWeight 屬性。

<Button FontSize="14" FontWeight="Bold">
  <!--Set the Background property of the Button to
    a LinearGradientBrush.-->
  <Button.Background>
    <LinearGradientBrush StartPoint="0,0.5" 
                            EndPoint="1,0.5">
      <GradientStop Color="Green" Offset="0.0" />
      <GradientStop Color="White" Offset="0.9" />
    </LinearGradientBrush>

  </Button.Background>
  View message
</Button>

下列範例會以程式碼設定相同屬性。

Dim buttonBrush As New LinearGradientBrush()
buttonBrush.StartPoint = New Point(0, 0.5)
buttonBrush.EndPoint = New Point(1, 0.5)
buttonBrush.GradientStops.Add(New GradientStop(Colors.Green, 0))
buttonBrush.GradientStops.Add(New GradientStop(Colors.White, 0.9))

submit.Background = buttonBrush
submit.FontSize = 14
submit.FontWeight = FontWeights.Bold

LinearGradientBrush buttonBrush = new LinearGradientBrush();
buttonBrush.StartPoint = new Point(0, 0.5);
buttonBrush.EndPoint = new Point(1, 0.5);
buttonBrush.GradientStops.Add(new GradientStop(Colors.Green, 0));
buttonBrush.GradientStops.Add(new GradientStop(Colors.White, 0.9));

submit.Background = buttonBrush;
submit.FontSize = 14;
submit.FontWeight = FontWeights.Bold;

建立控制項的樣式

WPF 可以讓您藉由建立 Style 來指定整批控制項的外觀，而不必逐一設定應用程式中每一個執行個體的屬性。 下列範例建立的 Style 會套用至應用程式中的每一個 Button。Style 的定義通常是在 ResourceDictionary 中以 XAML 定義，如 FrameworkElement 的 Resources 屬性。

<Style TargetType="Button">
  <Setter Property="FontSize" Value="14"/>
  <Setter Property="FontWeight" Value="Bold"/>
  <Setter Property="Background">
    <Setter.Value>
      <LinearGradientBrush StartPoint="0,0.5" 
                              EndPoint="1,0.5">
        <GradientStop Color="Green" Offset="0.0" />
        <GradientStop Color="White" Offset="0.9" />
      </LinearGradientBrush>

    </Setter.Value>
  </Setter>
</Style>

您也可以將索引鍵指派給樣式，然後在控制項的 Style 屬性中指定該索引鍵，藉此只將樣式套用至特定型別的特定控制項。 如需樣式的詳細資訊，請參閱設定樣式和範本。

建立 ControlTemplate

Style 可以讓您同時設定數個控制項的屬性，但有時候您想自訂的 Control 外觀，可能就不是藉由建立 Style 所能做到的。 繼承自 Control 類別的類別會有 ControlTemplate，可定義 Control 的結構和外觀。 Control 的 Template 屬性是公用的，所以您可以給與 Control 一個不同於其預設值的 ControlTemplate。 您通常可以替 Control 指定新的 ControlTemplate 來自訂 Control 的外觀，而不是繼承自控制項。

以最常用的控制項 Button 為例。 Button 的主要行為是在使用者按下它的時候讓應用程式做一些動作。 根據預設，WPF 中出現的 Button 是突起的矩形。 當您在開發應用程式時，可能會想利用 Button 的行為 (也就是處理按下按鈕的事件)，但是想要變更按鈕的外觀，可是想要的外觀無法藉由變更按鈕的屬性來達到， 在這個情況下，您可以建立新的 ControlTemplate。

下列範例會建立 Button 的 ControlTemplate。 這個 ControlTemplate 建立的 Button 具有圓角和漸層背景。 ControlTemplate 中包含 Border，其 Background 是具有兩個 GradientStop 物件的 LinearGradientBrush。 第一個 GradientStop 會以資料繫結方式將 GradientStop 的 Color 屬性繫結至按鈕的背景色彩。 當您設定 Button 的 Background 屬性時，這個值的色彩就會做為第一個 GradientStop。 如需資料繫結的詳細資訊，請參閱資料繫結概觀。 這個範例也會建立 Trigger，它會在 IsPressed 為 true 時變更 Button 的外觀。

<!--Define a template that creates a gradient-colored button.-->
<Style TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Border 
          x:Name="Border"  
          CornerRadius="20" 
          BorderThickness="1"
          BorderBrush="Black">
          <Border.Background>
            <LinearGradientBrush StartPoint="0,0.5" 
                                 EndPoint="1,0.5">
              <GradientStop Color="{Binding Background.Color, 
                    RelativeSource={RelativeSource TemplatedParent}}" 
                            Offset="0.0" />
              <GradientStop Color="White" Offset="0.9" />
            </LinearGradientBrush>
          </Border.Background>
          <ContentPresenter 
            Margin="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            RecognizesAccessKey="True"/>
        </Border>
        <ControlTemplate.Triggers>
          <!--Change the appearance of
          the button when the user clicks it.-->
          <Trigger Property="IsPressed" Value="true">
            <Setter TargetName="Border" Property="Background">
              <Setter.Value>
                <LinearGradientBrush StartPoint="0,0.5" 
                                     EndPoint="1,0.5">
                  <GradientStop Color="{Binding Background.Color, 
                    RelativeSource={RelativeSource TemplatedParent}}" 
                                Offset="0.0" />
                  <GradientStop Color="DarkSlateGray" Offset="0.9" />
                </LinearGradientBrush>
              </Setter.Value>
            </Setter>
          </Trigger>

        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>


...


<Button Grid.Row="2" Grid.ColumnSpan="2" Name="submitName"
        Background="Green">View message</Button>

注意事項
Button 的 Background 屬性必須設定為 SolidColorBrush，這個範例才能正常運作。

訂閱事件

您可以使用 XAML 或程式碼訂閱控制項的事件，但只能用程式碼處理事件。 下列範例顯示如何訂閱 Button 的 Click 事件。

<Button Grid.Row="2" Grid.ColumnSpan="2" Name="submitName" Click="submit_Click"
  Background="Green">View message</Button>

AddHandler submit.Click, AddressOf submit_Click

submit.Click += new RoutedEventHandler(submit_Click);

下列範例會處理 Button 的 Click 事件。

Private Sub submit_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    MessageBox.Show("Hello, " + firstName.Text + " " + lastName.Text)

End Sub 'submit_Click

void submit_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello, " + firstName.Text + " " + lastName.Text);
}

擁有豐富內容的控制項

大部分繼承自 Control 類別的類別都具有包含豐富內容的能力。 例如，Label 可以包含任何物件，例如字串、Image 或 Panel。 下列類別可支援豐富內容，而且可做為 WPF 中大部分控制項的基底類別。

• ContentControl-- Label、Button 和 ToolTip 都是自這個類別繼承之類別的範例。

• ItemsControl-- ListBox、Menu 和 StatusBar 都是自這個類別繼承之類別的範例。

• HeaderedContentControl-- TabItem、GroupBox 和 Expander 都是自這個類別繼承之類別的範例。

• HeaderedItemsControl-- MenuItem、TreeViewItem 和 ToolBar 都是自這個類別繼承之類別的範例。

如需這些基底類別庫的詳細資訊，請參閱 WPF 內容模型。

請參閱

工作

HOW TO：啟用命令

參考

按分類區隔控制項

概念

設定樣式和範本

資料範本化概觀

資料繫結概觀

其他資源

控制項程式庫

輸入和命令

逐步解說：建立自訂動畫按鈕

控制項自訂