Button コントロールのスタイル設定のヒント

  • [アーティクル]

Ee341364.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(ja-jp,Expression.40).png

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

Ee341364.c01e5314-5b29-4283-a483-b0a1cb3b59f6(ja-jp,Expression.40).png

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

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

状態名 説明

Normal

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

MouseOver

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

Pressed

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

Disabled

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

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

状態名 説明

Unfocused

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

Focused

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

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

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

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

テンプレートのバインド

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

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

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

Normal

Normal 状態の Button

MouseOver

MouseOver 状態の Button

Pressed

Pressed 状態の Button

Disabled

Disabled 状態の Button

Focused

Focused 状態の Button

Noteメモ :

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

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

tip noteヒント :

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

  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 コントロールのコードで置き換えられたことを確認します。さらに、Microsoft Expression Blend によって 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] と [Y] を「1」に設定します。

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

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

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

  10. 次の手順では、新しい四角形のプロパティを設定します。プロパティは、Focused 状態ではなく Base で変更する必要があります。ただし、四角形は現在透明なので、Base では表示されません。記録モード インジケーター Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ja-jp,Expression.40).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

Noteメモ :

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

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

tip noteヒント :

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

  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 コントロールのコードで置き換えられたことを確認します。さらに、Expression 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 では表示されません。記録モード インジケーター Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ja-jp,Expression.40).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 オブジェクトに適用する方法については、「リソースの適用と削除」を参照してください。

参照

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

関連項目

タスク

既存のオブジェクトからのコントロールの作成

概念

一般的な Silverlight コントロールのスタイル処理のヒント
SimpleButton
テンプレートを使用するコントロールのスタイルの設定

Copyright ©2011 by Microsoft Corporation. All rights reserved.