次の方法で共有

Blend での Silverlight コントロールのボタン コントロールのスタイル処理のヒント

  • [アーティクル]

JJ170239.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(ja-jp,VS.120).png

組み込みの Button コントロール テンプレートを使用して、カスタム Button テンプレートを作成できます。 既定の Button コントロールは、次のように表示されます。

JJ170239.c01e5314-5b29-4283-a483-b0a1cb3b59f6(ja-jp,VS.120).png

[Button] コントロールの状態

Button テンプレートを変更するとき、Button コントロールの状態を [状態] パネルに表示できます。 既定では、Button コントロールは、[CommonStates] 状態グループにある次の 4 つの状態の 1 つになります。

状態名

説明

Normal

Button コントロールに対してユーザーが何も行わず、単に表示されているだけの状態。

MouseOver

ユーザーが Button コントロールの上にポインターを動かしたときの状態。

Pressed

ユーザーが Button コントロールをクリックしたか、このコントロールがフォーカスされているときに Enter キーまたは Space キーを押したときの状態。

Disabled

IsEnabled プロパティが False に設定されたときの Button コントロールの状態。

Button コントロールは、次の [FocusStates] 状態グループに属する状態のいずれかになります。

状態名

説明

Unfocused

Button コントロールがキーボードでフォーカスされていないときの状態。

Focused

Button コントロールがキーボードでフォーカスされたときの状態。 たとえば、アプリケーション内でユーザーが Tab キーを押してフォーカスを切り替えていき、Button コントロールにフォーカスが移った場合が相当します。

ヒント

状態グループは、コントロールの表示状態を論理的に分類したものです。1 つのグループに属する複数の状態を同時に表示することはできません。たとえば、CommonStates グループには、ユーザーがマウスなどの入力デバイスで行う操作に関係のある状態が含まれています。1 つのグループ内で一度に表示できる状態は 1 つだけですが、別々のグループに属する状態を同時に表示することはできます。

状態を 1 つ選択すると、その状態の変更の記録が開始されます。 状態の記録を無効にするには、アートボードの記録モード インジケーター JJ170239.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ja-jp,VS.120).png をクリックするか、[状態] パネルで [ベース] を選択します。

詳細については、「Blend でコントロール用ビジュアル状態を定義する」を参照してください。

テンプレートのバインド

Background、BorderBrush、Foreground、BorderThickness、および Padding プロパティは、テンプレートにバインドすることができます。 詳細については、「Blend でオブジェクト プロパティをテンプレートに反映させる」を参照してください。

テキストを Button コントロールに変換するには

次の図は、Normal、MouseOver、Pressed、Disabled、および Focused 状態を含む、作成されたボタンのデザイン見本図 (カンプ) です。

Normal

Normal 状態の Button

MouseOver

MouseOver 状態の Button

Pressed

Pressed 状態の Button

Disabled

Disabled 状態の Button

Focused

Focused 状態の Button

注意

上の図は、まだ Button コントロールではなく、Button コントロールに変換できるアートワークであることに注意してください。

次の手順では、手順 2 でXAML コードを使用します。これは、上の図の Normal 状態に相当します。

ヒント

以下の手順を実行する際に [デザイン] ビューと [コード] ビューの両方の変化を確認するには、[分割ビュー] をクリックします。

  1. 新しい Microsoft Silverlight プロジェクトを開きます。 [コード] ビューで次のコードを見つけて、終了スラッシュ (/) を削除します。

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. 次のコードをコピーし、新しいプロジェクトで、手順 1 で見つけたコードの後に貼り付けます。

    <Grid MinWidth="79" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D" RadiusX="3" RadiusY="3"/>
   <TextBlock Foreground="LightGray" Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

  3. Grid の終了タグ (</Grid>) を、上記で張り付けたコードの最後に追加します。

  4. [オブジェクトとタイムライン] パネルで [Grid] を右クリックして、[コントロールの作成] をクリックします。 [コントロールの作成] ダイアログ ボックスで [Button]、[OK] の順にクリックします。

    [コード] ビューで、上記の手順で張り付けたコードが新しい Button コントロールのコードに置き換えられたことを確認します。 さらに、Blend for Visual Studio によって Button コントロールが新しい Button スタイルのテンプレートに変換され、そのテンプレートが Button に適用されていることがわかります。

    カンプの TextBlock の前景は明るい灰色です。 新しい Button スタイルの前景も明るい灰色です。 上のボタンおよび前のコードの Button コントロールのテキスト コンテンツは OK で、前のコードの TextBlock は、元のTextBlock と同じプロパティを持つ ContentPresenter で置き換えられています。

  5. Button コントロールに状態を追加するには、以下の手順に従います。

    1. [オブジェクトとタイムライン] パネルで、[Rectangle] をクリックします。

    2. [状態] パネルで [MouseOver] をクリックします。

    3. [プロパティ] パネルで、[塗りつぶし] と [ストローク] を「#FF808080」に変更します。

    4. [状態] パネルに戻り、[ベース] をクリックし、状態の記録を終了します。

  6. 同じプロパティを Pressed 状態に適用するには、[状態] パネルで [MouseOver] を右クリックし、[状態のコピー先] をクリックし [Pressed] をクリックします。

  7. ボタンが押されたときにボタン テキストをオフセットするには、以下の手順に従います。

    1. [状態] パネルで [Pressed] をクリックします。

    2. [オブジェクトとタイムライン] パネルで、[Content Presenter] をクリックします。

    3. [プロパティ] パネルの [変換] カテゴリの [平行移動] タブで、[X] と [X] を 1 に設定します。

    4. [状態] パネルに戻り、[ベース] をクリックし、状態の記録を終了します。

  8. [状態] パネルで [Normal] をクリックし、[切り替え効果の追加]、[Normal to MouseOver] をクリックします。 [切り替え効果の再生時間] ボックスに 「.2」 と入力して、[ベース] をクリックします。

  9. カンプには、ボタンが Focused 状態のときに表示される周囲の青い四角形が含まれています。 四角形を作成するには、Focused 状態が選択された状態で新しい Rectangle オブジェクトを追加します。 これは、"状態指定の描画" と呼ばれ、新しいオブジェクトは描画された状態のときにだけ表示されることを意味します。 Focused の状態の四角形を作成するには、[状態] パネルで [Focused] をクリックし、[ツール] パネルで [四角形] ツールをダブルクリックして、新しい Rectangle オブジェクトを作成します。

  10. 次の手順では、新しい四角形のプロパティを設定します。 プロパティは Focused の状態ではなく、Base の状態で変更する必要があります。 ただし、四角形は現在透明のため Base では表示されません。 記録モード インジケーター JJ170239.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ja-jp,VS.120).png をクリックして、四角形を表示します。 このとき、「オブジェクトとタイムライン] パネルで新しい四角形 ([rectangle1]) は選択された状態のままです。 [プロパティ] パネルで、[rectangle1] のプロパティを次のように設定します。

    • 塗りつぶし   [ブラシなし] に設定します。

    • ストローク カラー   「#FF00C0FF」に設定します。

    • RadiusX   「2」に設定します。

    • RadiusY   「2」に設定します。

    • Margin   [左] を「1」に、[右] を「1」に、[上] を「1」に、および [下] を「1」に設定します。

  11. また、ボタンが Focused 状態のときに四角形に他のインタラクティビティを追加する場合、以下の手順を実行して定常状態のアニメーションを作成することもできます。 それ以外の場合は、手順 12 に進みます。

    1. [状態] パネルで [Focused] 状態を選択します。

    2. [オブジェクトとタイムライン] パネルで、[タイムラインを表示する] をクリックします。

    3. 2 秒のマークにキーフレームをドラッグして、タイムライン再生ヘッドを 2.2 秒に移動します。

    4. [状態] パネルで、[rectangle1] を選択します。

    5. [プロパティ] パネルの [外観] タブで [Opacity] を「0」に設定します。

    6. [オブジェクトとタイムライン] パネルで、タイムライン再生ヘッドを 0 秒に戻し、[rectangle1] を選択します。 [プロパティ] パネルの [拡大縮小] タブで、[X] および [Y] を「5」に設定します。

    7. [オブジェクトとタイムライン] パネルで、[2] のキーフレームをクリックします。 [プロパティ] パネルの [イージング] カテゴリで、[EasingFunction] を [Quartic Out] に設定します。

    8. [オブジェクトとタイムライン] パネルのタブのすぐ下にある状態名 (この場合は [Focused]) をクリックします。 [プロパティ] パネルの [共通プロパティ] タブで [RepeatBehavior] を [Forever] に設定します。

  12. Ctrl + Shift + B キーを押してプロジェクトをビルドした後に F5 キーを押してプロジェクトをテストします。

オブジェクトを Button コントロールに変換するには

次の図は、Normal、MouseOver、Pressed、Disabled、および Focused 状態を含む、作成されたボタンのデザイン見本図 (カンプ) です。

Normal

Button グラフィック - Normal

MouseOver

Button グラフィック - MouseOver

Pressed

Button グラフィック - Pressed

Disabled

Button グラフィック - Disabled

Focused

Button グラフィック - Focused

注意

上の図は、まだ Button コントロールではなく、Button コントロールに変換できるアートワークであることに注意してください。

次の手順では、手順 2 でXAML コードを使用します。これは、上の図の Normal 状態に相当します。

ヒント

以下の手順を実行する際に [デザイン] ビューと [コード] ビューの両方の変化を確認するには、[分割ビュー] をクリックします。

  1. 新しい Microsoft Silverlight プロジェクトを開きます。 [コード] ビューで次のコードを見つけて、終了スラッシュ (/) を削除します。

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. 次のコードをコピーし、新しいプロジェクトで、手順 1 で見つけたコードの後に貼り付けます。

    <Grid MinWidth="79" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D" RadiusX="3" RadiusY="3"/>
   <TextBlock Foreground="LightGray" Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

  3. Grid の終了タグ (</Grid>) を、上記で張り付けたコードの最後に追加します。

  4. [オブジェクトとタイムライン] パネルで [Grid] を右クリックして、[コントロールの作成] をクリックします。 [コントロールの作成] ダイアログ ボックスで [Button]、[OK] の順にクリックします。

    [コード] ビューで、上記の手順で張り付けたコードが新しい Button コントロールのコードに置き換えられたことを確認します。 さらに、Blend によって Button コントロールが新しい Button スタイルのテンプレートに変換され、そのテンプレートが Button に適用されていることがわかります。

  5. [オブジェクトとタイムライン] パネルで、[コンテンツ] を右クリックして [切り取り] をクリックします。

  6. スコープを [UserControl] に戻し、[UserControl] を右クリックして [貼り付け] をクリックします。

  7. Button コントロールに状態を追加するには、以下の手順に従います。

    1. [オブジェクトとタイムライン] パネルで、[Rectangle] をクリックします。

    2. [状態] パネルで [MouseOver] をクリックします。

    3. [プロパティ] パネルで、[塗りつぶし] と [ストローク] を「#FF808080」に変更します。

    4. [状態] パネルに戻り、[ベース] をクリックし、状態の記録を終了します。

  8. 同じプロパティを Pressed 状態に適用するには、[状態] パネルで [MouseOver] を右クリックし、[状態のコピー先] をクリックし [Pressed] をクリックします。

  9. ボタンが押されたときにボタン テキストをオフセットするには、以下の手順に従います。

    1. [状態] パネルで [Pressed] をクリックします。

    2. [オブジェクトとタイムライン] パネルで、[Content Presenter] をクリックします。

    3. [プロパティ] パネルの [変換] カテゴリの [平行移動] タブで、[X] と [Y] を 1 に設定します。

    4. [状態] パネルに戻り、[ベース] をクリックし、状態の記録を終了します。

  10. [状態] パネルで [Normal] をクリックし、[切り替え効果の追加]、[Normal to MouseOver] をクリックします。

  11. [切り替え効果の再生時間] ボックスに 「.2」 と入力して、[ベース] をクリックします。

    カンプには、ボタンが Focused 状態のときにボタンの周囲に表示される青い四角形が含まれています。 四角形を作成するには、Focused 状態が選択された状態で新しい Rectangle オブジェクトを追加します。 これは、"状態指定の描画" と呼ばれ、新しいオブジェクトは描画された状態のときにだけ表示されることを意味します。 Focused の状態の四角形を作成するには、[状態] パネルで [Focused] をクリックし、[ツール] パネルで [四角形] ツールをダブルクリックして、新しい Rectangle オブジェクトを作成します。

  12. 次の手順では、新しい四角形のプロパティを設定します。 プロパティは Focused の状態ではなく、Base の状態で変更する必要があります。 ただし、四角形は現在透明のため Base では表示されません。 記録モード インジケーター JJ170239.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ja-jp,VS.120).png をクリックして、四角形を表示します。 このとき、「オブジェクトとタイムライン] パネルで新しい四角形 ([rectangle1]) は選択された状態のままです。 [プロパティ] パネルで、[rectangle1] のプロパティを次のように設定します。

    • 塗りつぶし   [ブラシなし] に設定します。

    • ストローク カラー   「#FF00C0FF」に設定します。

    • Margin   [左] を「1」に、[右] を「1」に、[上] を「1」に、および [下] を「1」に設定します。

  13. また、ボタンが Focused 状態のときに四角形に他のインタラクティビティを追加する場合、以下の手順を実行して定常状態のアニメーションを作成することもできます。 それ以外の場合は、手順 14 に進みます。

    1. [状態] パネルで [Focused] 状態を選択します。

    2. [オブジェクトとタイムライン] パネルで、[タイムラインを表示する] をクリックします。

    3. 2 秒のマークにキーフレームをドラッグして、タイムライン再生ヘッドを 2.2 秒に移動します。

    4. [状態] パネルで [rectangle1] を選択し、[プロパティ] パネルの [外観] タブで [Opacity] を「0」に設定します。

    5. [オブジェクトとタイムライン] パネルで、タイムライン再生ヘッドを 0 秒に戻し、[rectangle1] を選択します。 [プロパティ] パネルの [拡大縮小] タブで、[X] および [Y] を「5」に設定します。

    6. [オブジェクトとタイムライン] パネルで、[2] のキーフレームをクリックします。 [プロパティ] パネルの [イージング] カテゴリで、[EasingFunction] を [Quartic Out] に設定します。

    7. [オブジェクトとタイムライン] パネルのタブのすぐ下にある状態名 (この場合は [Focused]) をクリックします。

    8. [プロパティ] パネルの [共通プロパティ] タブで [RepeatBehavior] を [Forever] に設定します。

  14. Ctrl + Shift + B キーを押してプロジェクトをビルドした後に F5 キーを押してプロジェクトをテストします。

新しい Button テンプレートを他の Button オブジェクトに適用する方法については、「Blend でリソースを適用または削除する」を参照してください。

参照

Silverlight の Button コントロールのプロパティとイベントの詳細については、MSDN の「Silverlight Control Gallery (Silverlight コントロール ギャラリー)」を参照してください。

参照

処理手順

試してみよう: ロールオーバー ボタンの作成 (Blend での WPF サポート)

概念

Blend での一般的な Silverlight コントロールのスタイル処理のヒント

SimpleButton

Blend でテンプレートをサポートするコントロールをスタイル処理する