SimpleButton

This page applies to WPF projects only

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

アートボードに表示された SimpleButton コントロール

Cc295207.de21bfee-f104-48ff-9f8a-b6cbf92a9fa7(JA-JP,Expression.30).png

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

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

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

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

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

    オブジェクト ビュー : [SimpleButton] コントロールの基本パーツ (テンプレート)

    Cc295207.10b2afc9-ea71-4980-bbc6-5a78e0a4d2c4(JA-JP,Expression.30).png

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

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

使用されるブラシ

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] を使用して設定されます。

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

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

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

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

関連項目

タスク

試してみよう : 効果を使用したボタンのスタイル

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

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