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

  • [アーティクル]

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

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

Ee371151.1b2a1e45-ffdd-4ac8-941a-d6625b797fd0(ja-jp,Expression.40).png

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

既定では、CheckBox コントロールは、次の表にある CommonStates 状態グループの 4 つの状態のいずれかになります。これらの状態は、CheckBox テンプレートを変更するときに、[状態] パネルで見ることができます。

状態名 説明

Normal

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

MouseOver

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

Pressed

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

Disabled

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

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

状態名 説明

Unfocused

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

Focused

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

CheckBox コントロールは、次の [ValidationStates] 状態グループの 2 つの状態のいずれかになります。

状態名 説明

Valid

CheckBox コントロールが有効な状態。

InvalidUnfocused

CheckBox コントロールが無効で、フォーカスされていないときの状態。

InvalidFocused

CheckBox コントロールが無効で、フォーカスされているときの状態。

CheckBox コントロールは、次の CheckStates 状態グループの 3 つの状態のいずれかになります。

状態名 説明

Unchecked

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

Checked

IsChecked プロパティが True に設定されたときの CheckBox コントロールの状態。

Indeterminate

IsThreeState プロパティが True に設定され、IsChecked プロパティが Null に設定されたときの CheckBox コントロールの状態。

既定では、オンの状態の CheckBox コントロールは、次のように表示されます。

Ee371151.df888d99-f032-4084-a93e-3de14ad1c19c(ja-jp,Expression.40).png

tip noteヒント :

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

状態を 1 つ選択すると、その状態の変更の記録が開始されます。状態の記録を無効にするには、記録ボタン Ee371151.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ja-jp,Expression.40).png をクリックするか、[状態] パネルで [ベース] を選択します。2 つの状態がアクティブになったときのコントロールの外観を変更するには、1 つのグループに属する状態のプレビューを固定しておき、別のグループに属する状態を変更します。

テンプレートのバインド

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

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

次の図は、Normal、MouseOver、Pressed、Disabled、および Focused の状態を含むチェック ボックスのデザイン見本図（カンプ）です。

Normal

Normal 状態の CheckBox

MouseOver

MouseOver 状態の CheckBox

Pressed

Pressed 状態の CheckBox

Disabled

Disabled 状態の CheckBox

Focused

Focused 状態の CheckBox

Noteメモ :

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

この例では、次の手順 4 で XAML コードが使用されています。これは、上の図の Normal の状態に相当します。

  1. 新しい Microsoft Silverlight プロジェクトを開きます。[ブラシ] カテゴリで、[単色ブラシ] をクリックします。[エディター] の [16 進数] ボックスに「#FF808080」と入力します。

  2. [ツール] パネルで [Grid] Ee371151.a87ee957-7fbf-4135-a6ab-6de7e63160aa(ja-jp,Expression.40).png をダブルクリックし、アートボード上に新しいコンテナーを作成します。[プロパティ] パネルで、[レイアウト] カテゴリの [Width] の右側の [詳細オプション] をクリックし、[リセット] をクリックします。[Height] についても、同じ操作を繰り返します。

  3. [コード] ビューで次のコードを見つけて、終了スラッシュ (/) を削除します。

    <Grid HorizontalAlignment="Left" VerticalAlignment="Top"/>

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

    <Grid>
   <Rectangle Stroke="#FF333333" Height="12" Width="12" HorizontalAlignment="Left" Fill="Transparent"/>
   <Path x:Name="check" Height="8" Width="8" Fill="White" Stretch="Fill" 
      Data="M14.8,6.2 C14.9,6.2 14.9,6.3 14.9,6.2 C14.9,6.3 14.9,6.3 14.8,6.5 
      C14.1,7.2 13.4,8.1 12.6,9.2 C11.8,10.4 11.1,11.7 10.6,13 
      C10.4,13.5 10.2,13.8 10.2,13.9 C10.1,14.1 9.8,14.1 9.4,14.1 
      C9.1,14.1 8.9,14.1 8.9,14 C8.8,14 8.7,13.8 8.5,13.5 
      C8.2,13 7.8,12.6 7.5,12.2 C7.3,12 7.2,11.9 7.2,11.8 
      C7.2,11.6 7.3,11.5 7.5,11.3 C7.7,11.2 7.9,11.1 8,11.1 
      C8.2,11.1 8.5,11.2 8.7,11.4 C9,11.6 9.3,12 9.6,12.5 
      C10,11.8 10.3,11.1 10.6,10.4 C11,9.7 11.4,9.11.8,8.5 
      C12.3,7.8 12.6,7.3 12.9,7 C13.1,6.8 13.3,6.6 13.4,6.5 
      C13.5,6.5 13.6,6.4 13.8,6.4 C14.3,6.3 14.6,6.2 14.8,6.2 z"
      HorizontalAlignment="Left" Margin="2,2,0,2"/>
   <TextBlock 
      Foreground="White" Text="Lorem" Margin="15,0,0,0" 
      VerticalAlignment="Center"/>
</Grid>

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

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

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

    カンプ図の TextBlock には白い前景色が付いています。TextBlock には、"Lorem" というテキストが含まれています。また、先行するコードの TextBlock は、ContentPresenter で置き換えられ、元の TextBlock と同じプロパティが使われています。

  7. Button に MouseOver 状態を追加するには、次の操作を行います。

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

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

    3. [プロパティ] パネルで [Fill] を選択して、[Alpha] を「25」に設定します。

      [Rectangle] の名前が [rectangle] に変更されたことを確認します。

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

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

  9. チェック ボックスが Pressed の状態のとき、CheckBox テンプレートをオフセットするには、次の操作を行います。

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

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

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

      [オブジェクトとタイムライン] パネルの [Grid] の名前が [grid] に変更されたことを確認します。

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

  10. [状態] パネルで [Disabled] を選択します。[オブジェクトとタイムライン] パネルで、[grid] を選択します。[プロパティ] パネルで、[Opacity] を「50」に設定します。[状態] パネルに戻り、[ベース] をクリックし、状態の記録を終了します。

  11. CheckBox コントロールにインタラクティビティを追加するには、次の操作を行います。

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

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

    3. [ベース] をクリックして状態の記録を終了します。

    これで、ポインターを CheckBox に合わせると、Normal から MouseOver の状態に .2 秒で切り替わるようになります。その他の切り替え効果はすべて瞬時に実行されます。

  12. [オブジェクトとタイムライン] パネルで、[check] をクリックします。[プロパティ] パネルの [外観] カテゴリで、[Opacity] を「0」に設定します。[状態] パネルで [Checked] をクリックし、[プロパティ] パネルで [Opacity] を「100」に設定します。[ベース] をクリックして状態の記録を終了します。

  13. カンプでは、Focused の状態のとき水色の角の丸い四角形が示されていますが、これは Normal の状態の XAML には含まれていません。

    この四角形を作成するには、[Focused] の状態が選択された状態で、新しい Rectangle オブジェクトを追加します。これは "状態指定の描画" と呼ばれ、オブジェクトを描画したときの状態のときのみ、オブジェクトが表示されることを意味します。

    Focused の状態の四角形を作成するには、[状態] パネルで [Focused] をクリックし、[ツール] パネルで [四角形] ツールをダブルクリックして、新しい Rectangle オブジェクトを作成します。

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

    [プロパティ] パネルで、[rectangle1] のプロパティを次のように設定します。

    • Fill   [ブラシ] カテゴリで、[ブラシなし] をクリックします。

    • Stroke   [ブラシ] カテゴリで、[単色ブラシ] をクリックします。[エディター] で色を「#FF00C0FF」に設定します。

    • RadiusX   [外観] カテゴリで、[RadiusX] を「2」に設定します。

    • RadiusY   [外観] カテゴリで、[RadiusY] を「2」に設定します。

    • Margin   [レイアウト] カテゴリで、[Margin] を次のように設定します。

      • [左]   -2

      • [右]   -2

      • [上]   0

      • [下]   0

  15. [スコープを <オブジェクト名> に戻す] Ee371151.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.40).png をクリックします。[オブジェクトとタイムライン] パネルで [CheckBox] が選択された状態で、Ctrl キーを押しながら C キーを押してコピーします。CTRL キーを押しながら V キーを押して、さらに 4 つの CheckBox コントロールをコンテナーに貼り付けます。[選択内容] ツール Ee371151.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,Expression.40).png を使用して、チェック ボックスを 1 列に配置します。[オブジェクトとタイムライン] パネルで CheckBox オブジェクトの 1 つが選択された状態で、[プロパティ] パネルの [共通プロパティ] カテゴリで [IsEnabled] ボックスをオフにします。

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

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

参照

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

関連項目

概念

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

Copyright ©2011 by Microsoft Corporation. All rights reserved.