SimpleButton

  • [アーティクル]

このページは WPF プロジェクトにのみ適用されます。

ボタンは、Click イベントに反応するコンテンツ コントロールです。Microsoft Expression Blend でボタンにコンテンツを配置するには、ボタンをダブルクリックして、そのボタン内に要素を描画します。ボタンに複数の要素を配置する場合は、Grid または Canvas などのレイアウト パネルを最初に追加する必要があります。ボタンには、既定でテキストを表示することもできます。既定のテキストを編集するには、ボタンを右クリックして、[テキストの編集] をクリックします。

アートボード表示 : SimpleButton コントロール

Cc295207.de21bfee-f104-48ff-9f8a-b6cbf92a9fa7(ja-jp,Expression.10).png

コントロール テンプレートの構成要素

SimpleButton コントロール テンプレートは、次の要素から構成されています。

  • Grid レイアウト パネル : ボタン内に複数の子要素を保持するために使用されます。また、グリッドを使用すると、複数の要素を簡単にテンプレートに追加できます。たとえば、ルート要素が Border であるときに別の要素を追加しようとした場合、Border 要素には子要素を 1 つしか含めることができないため、新たに追加した要素で ContentPresenter 要素が置換されてしまいます。

  • Border 要素 : Border 要素の BorderThickness プロパティは、このテンプレートが適用されるボタン コントロールの BorderThickness プロパティにテンプレート バインドできます。

  • ContentPresenter : このテンプレートが適用されるボタンの Content プロパティを表示するために使用されます。この要素はボタンのコンテンツを表示するために必要です。

    オブジェクト表示 : SimpleButton コントロールの基本パーツ (テンプレート)

    Cc295207.10b2afc9-ea71-4980-bbc6-5a78e0a4d2c4(ja-jp,Expression.10).png

Cc295207.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

使用されるプロパティ トリガ

コントロール テンプレートのプロパティ トリガは、プロパティの変更にコントロールを対応させるために使用されます。[組み合わせ] パネルの [トリガ] のアイテムをクリックすると、トリガがアクティブなときに変更されるプロパティを表示できます。たとえば、SimpleButton テンプレートでは、IsMouseOver プロパティが True になると、Border 要素の背景色が MouseOverBrush リソースの色に変化します。

Cc295207.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

使用されるブラシ

SimpleButton テンプレートでは、SimpleStyles.xaml リソース ディクショナリ内の次のブラシ リソースが使用されます。

  • Background プロパティは、アクティブなトリガが存在しないときは NormalBrush、IsMouseOver が True のときは MouseOverBrush、IsPressed が True のときは PressedBrush、IsEnabled が False のときは DisabledBackgroundBrush を使用して設定されます。

  • Border プロパティは、アクティブなトリガが存在しないときは NormalBorderBrush、IsKeyboardFocused が True のときは DefaultBorderBrush、IsPressed が True のときは PressedBorderBrush、IsEnabled が False のときは DisabledBorderBrush を使用して設定されます。

  • Foreground プロパティは、IsEnabled が False のときは DisabledForegroundBrush を使用して設定されます。

Cc295207.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

ベスト プラクティスおよびデザイン ガイドライン

  • 一般に、コントロールに視覚要素を追加する予定がある場合は、テンプレートのルートとして Grid コントロールを使用してください。Expression Blend は、既定では Grid コントロールなどのレイアウト パネルを検索してアクティブにします。これにより、アートボードに追加される新しい要素がレイアウト パネルの子要素になります。

  • ボタンのクリックなどのユーザー操作に応じてコントロールの外観を変更するには、プロパティ トリガを使用します。通常は、イベント トリガよりもプロパティ トリガを使用した方が得策です。1 つのプロパティ トリガ (IsPressed 状態に対して指定) で実行できる処理を行うために、イベント トリガが 2 つ (MouseDown イベントと MouseUp イベントに対して指定) 必要になるためです。ただし、イベント トリガを使用すると、複雑なコントロールでアニメーション タイムラインを開始できます。

  • 通常は、IsMouseOver、IsPressed、IsEnabled (False) の各状態に対して、ブラシやその他の視覚上の変化を設定します。また、IsKeyboardFocused 状態も便利です。この状態は、通常、コントロールの周囲に破線を表示するために使用されます。

Cc295207.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

関連項目

概念

試してみよう : ビットマップ効果を使用したボタンの作成

試してみよう : ボタンへのアニメーションの追加

試してみよう : ロールオーバー ボタンの作成