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

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

RadioButton テンプレートの状態

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

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

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

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

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

状態を 1 つ選択すると、その状態の変更の記録が開始されます。状態の記録を無効にするには、記録ボタン をクリックするか、[状態] パネルで [ベース] を選択します。2 つの状態がアクティブになったときのコントロールの外観を変更するには、1 つのグループに属する状態のプレビューを固定しておき、別のグループに属する状態を変更します。

テンプレートのバインド

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

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

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

Normal

MouseOver

Pressed

Disabled

Focused

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

この例では、次の手順 4 で XAML コードを使用します。

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

2. [ツール] パネルで [Grid] をダブルクリックし、アートボード上に新しいコンテナーを作成します。[プロパティ] パネルで、[レイアウト] カテゴリの [Width] の右側の [詳細オプション] をクリックし、[リセット] をクリックします。[Height] についても、同じ操作を繰り返します。

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

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

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

   <Grid>
      <Ellipse Stroke="#FF3C3C3C" Width="12" Height="12" HorizontalAlignment="Left" Fill="Transparent"/>
      <Ellipse x:Name="bullet" Fill="White" Width="6" Height="6" HorizontalAlignment="Left" Margin="3,0,0,0"/>
      <TextBlock Foreground="White" Text="Lorem" Margin="15,0,0,0" VerticalAlignment="Center"/>
   </Grid>
   

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

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

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

   元のグリッドの TextBlock には白い前景色が付いているため、新しい RadioButton スタイルにも白い前景色が使われています。TextBlock 要素のテキストは「Lorem」となっていたため、それが RadioButton の Content プロパティとなります。テンプレートでは、TextBlock が、 TextBlock と同じレイアウト プロパティを持つ ContentPresenter に置き換えられています。

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

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

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

   3. [プロパティ] パネルの [ブラシ] カテゴリで、[Fill] をクリックし、[エディター] カテゴリで [Alpha] を「25」に設定します。

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

   メモ :
   状態の記録を終了するには、ドキュメント ウィンドウの左上隅の 記録モード インジケーター をクリックします。

8. [状態] パネルで [MouseOver] を右クリックして、[状態のコピー先] をクリックして [Pressed] をクリックします。

9. オフセットを作成するには、[状態] パネルで [Pressed] 状態が選択された状態で、[オブジェクトとタイムライン] パネルで [Grid] を選択します。[プロパティ] パネルの [変換] カテゴリで、[X] と [Y] を「1」に設定します。[ベース] をクリックして状態の記録を終了します。[Grid] の名前が [grid] に変更されたことを確認します。

10. [状態] パネルで [Disabled] をクリックします。[プロパティ] パネルの [外観] カテゴリで、[Opacity] を 50 に設定します。[ベース] をクリックして状態の記録を終了します。

11. [状態] パネルで [Normal] をクリックします。[切り替え効果の追加] をクリックして、[Normal to MouseOver] をクリックします。[切り替え効果の再生時間] を「.2」に設定します。[ベース] をクリックして状態の記録を終了します。

12. [オブジェクトとタイムライン] パネルで、[bullet] をクリックします。[プロパティ] パネルの [外観] カテゴリで、[Opacity] を 0 に設定します。

13. [状態] パネルで [Checked] をクリックします。[プロパティ] パネルの [外観] カテゴリで、[Opacity] を 100 に設定します。[ベース] をクリックして状態の記録を終了します。

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

15. 次の手順では、新しい四角形のプロパティを設定します。プロパティは Focused の状態ではなく、Base の状態で変更する必要があります。ただし、四角形は現在透明のため Base の状態では表示されません。四角形の表示状態を維持するには、記録ボタン  をクリックします。このとき、「オブジェクトとタイムライン] パネルで新しい四角形 ([rectangle]) は選択された状態のままです。[プロパティ] パネルで、[rectangle] のプロパティを次のように設定します。

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

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

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

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

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

      • [左]   -2

      • [右]   -2

      • [上]   0

      • [下]   0

16. [スコープを <オブジェクト名> に戻す] をクリックします。[オブジェクトとタイムライン] パネルで [RadioButton] が選択された状態で、Ctrl キーを押しながら C キーを押してコピーします。CTRL キーを押しながら V キーを押して、さらに 4 つの RadioButton コントロールをコンテナーに貼り付けます。[選択内容] ツール  を使用して、チェック ボックスを 1 列に配置します。[オブジェクトとタイムライン] パネルで RadioButton オブジェクトの 1 つが選択された状態で、[プロパティ] パネルの [共通プロパティ] カテゴリで [IsEnabled] ボックスをオフにします。

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

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

参照

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

関連項目

タスク

オブジェクト プロパティをテンプレートに反映させる

概念

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

Copyright ©2011 by Microsoft Corporation. All rights reserved.