コントロール

[アーティクル]
10/19/2023

Windows Presentation Foundation (WPF) には、Button、Label、TextBox、Menu、ListBox など、ほとんどの Windows アプリケーションで使用される共通の UI コンポーネントが多数付属しています。これまで、これらのオブジェクトはコントロールと呼ばれてきました。 WPF SDK では、アプリケーションで表示可能なオブジェクトを表すクラスに、広義で "コントロール" という用語が使用され続けていますが、クラスは、表示可能な部分を持つために Control クラスを継承する必要がないことに注意してください。 Control クラスを継承するクラスには、ControlTemplate が含まれます。これを使用すると、コントロールのコンシューマーは、新しいサブクラスを作成しなくても、コントロールの外観を大幅に変更できます。このトピックでは、WPF でのコントロール (Control クラスを継承するものとそうでないものの両方) の一般的な使用方法について説明します。

コントロールのインスタンスの作成

Extensible Application Markup Language (XAML) またはコードのいずれかを使用して、アプリケーションにコントロールを追加できます。次の例では、ユーザーに姓と名の入力を求める単純なアプリケーションの作成方法を示します。この例では、ラベル 2 個、テキストボックス 2 個、ボタン 2 個の合計 6 個のコントロールを XAML で作成します。どのコントロールも同じ方法で作成できます。

<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 の例で示したのと同じ列と行が定義されています。

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

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

コントロールの外観の変更

通常は、アプリケーションの外観に合わせてコントロールの外観を変更します。コントロールの外観を変更するには、目的に応じて、次のいずれかの手順を実行します。

コントロールのプロパティ値を変更します。
コントロールに 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>

次の例では、同じプロパティをコードで設定しています。

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;

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

コントロールのスタイル作成

WPF には、アプリケーションの各インスタンスのさまざまなプロパティを設定する代わりに、Style を作成して、コントロールの外観を多数指定する機能があります。次の例では、アプリケーションの各 Button に適用される Style が作成されます。 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 を使用すると、複数のコントロールのプロパティを一度に設定できますが、Style の作成だけでできる以上に、Control の外観をカスタマイズしたい場合もあります。 Control クラスを継承するクラスには、Control の構造と外観を定義する、ControlTemplate があります。 Control の Template プロパティはパブリックであるため、Control に既定とは異なる ControlTemplate を付与できます。一般的に、Control の外観のカスタマイズには、コントロールの継承ではなく、Control に新しい ControlTemplate を指定します。

よく使用される Button というコントロールについて考えてみます。 Button の主な動作は、ユーザーがクリックしたときに、アプリケーションが一定のアクションを実行することです。 WPF では、Button は既定で浮き出し表示の四角形で表されます。アプリケーションの開発時、ボタンのクリックイベントを処理する Button の動作は利用し、ボタンのプロパティの変更では実現できないボタンの外観の変更を行いたい場合があります。このような場合には、新しい ControlTemplate を作成します。

次の例では、Button の ControlTemplate を作成します。この ControlTemplate では、角が丸くて背景がグラデーションになっている Button が作成されます。この ControlTemplate には、Background が 2 つの GradientStop オブジェクトを持つ LinearGradientBrush である Border が含まれています。最初の GradientStop では、データバインディングを使用して、GradientStop の Color プロパティがボタンの背景色にバインドされています。 Button の Background プロパティを設定すると、その値の色が最初の GradientStop として使用されます。データバインディングの詳細については、「データバインディングの概要」を参照してください。この例ではまた、IsPressed が true のときに Button の外観が変更される Trigger も作成されています。

<!--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>

Note

この例が正常に動作するには、Button の Background プロパティが SolidColorBrush に設定されている必要があります。

イベントのサブスクライブ

コントロールのイベントをサブスクライブするには、XAML またはコードのいずれかを使用できますが、コードではイベントの処理しかできません。次の例では、Button の Click イベントをサブスクライブする方法を示します。

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

submit.Click += new RoutedEventHandler(submit_Click);

AddHandler submit.Click, AddressOf submit_Click

次の例では、Button の Click イベントが処理されています。

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

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

End Sub

コントロールでのリッチコンテンツ

Control クラスを継承するほとんどのクラスには、リッチコンテンツを格納する容量があります。たとえば、Label は、文字列、Image、Panel などの任意のオブジェクトを格納できます。以下のクラスは、リッチコンテンツをサポートし、WPF のほとんどのコントロールの基本クラスとして機能します。

ContentControl-- このクラスを継承するクラスは、Label、Button、ToolTip などです。
ItemsControl-- このクラスを継承するクラスは、ListBox、Menu、StatusBar などです。
HeaderedContentControl-- このクラスを継承するクラスは、TabItem、GroupBox、Expander などです。
HeaderedItemsControl-- このクラスを継承するクラスは、MenuItem、TreeViewItem、ToolBar などです。

これらの基本クラスの詳細については、「WPF のコンテンツモデル」を参照してください。

次の方法で共有

コントロール

コントロールのインスタンスの作成

コントロールの外観の変更

コントロールのプロパティ値の変更

コントロールのスタイル作成

ControlTemplate の作成

イベントのサブスクライブ

コントロールでのリッチコンテンツ

関連項目

その他のリソース

次の方法で共有

コントロール

コントロールのインスタンスの作成

コントロールの外観の変更

コントロールのプロパティ値の変更

コントロールのスタイル作成

ControlTemplate の作成

イベントのサブスクライブ

コントロールでのリッチ コンテンツ

関連項目

その他のリソース

コントロールでのリッチコンテンツ