コントロール

[アーティクル]
12/20/2024

Windows Presentation Foundation (WPF) には、Button、Label、TextBox、Menu、ListBoxなど、ほぼすべての Windows アプリケーションで使用される一般的な UI コンポーネントの多くが付属しています。これまで、これらのオブジェクトはコントロールと呼ばされてきました。 WPF SDK では引き続き "control" という用語を使用して、アプリケーション内の可視オブジェクトを表すクラスを疎に意味しますが、クラスが表示されるプレゼンスを持つには、Control クラスから継承する必要はないことを注意することが重要です。 Control クラスから継承するクラスには、ControlTemplateが含まれています。これにより、コントロールのコンシューマーは、新しいサブクラスを作成しなくても、コントロールの外観を根本的に変更できます。このトピックでは、コントロール (Control クラスから継承されるコントロールと継承しないコントロールの両方) を WPF で一般的に使用する方法について説明します。

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

拡張アプリケーションマークアップ言語 (XAML) またはコードを使用して、アプリケーションにコントロールを追加できます。次の例では、ユーザーに姓と名を求める単純なアプリケーションを作成する方法を示します。この例では、XAML で 2 つのラベル、2 つのテキストボックス、2 つのボタンの 6 つのコントロールを作成します。すべてのコントロールも同様に作成できます。

<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 定義は、通常、FrameworkElementの Resources プロパティなど、ResourceDictionaryの XAML で定義されます。

<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 には、Border が含まれており、その Background は2つの GradientStop オブジェクトを持つ LinearGradientBrush です。最初の 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>

手記

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 の作成

イベントへの参加登録

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

関連項目

その他のリソース

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