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

[アーティクル]
10/09/2014

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

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

JJ170621.a79fb949-5f67-4c15-afd5-5f28abd2ae07(ja-jp,VS.120).png

RadioButton テンプレートの状態

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

状態名	説明
Normal	RadioButton コントロールに対してユーザーが何も行わず、単に表示されているだけの状態。
MouseOver	ユーザーが RadioButton コントロールの上にポインターを動かしたときの状態。
Pressed	ユーザーが RadioButton コントロールをクリックしたか、このコントロールがフォーカスされているときに Enter キーまたは Space キーを押したときの状態。
Disabled	IsEnabled プロパティが False に設定されたときの RadioButton コントロールの状態。

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

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

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

状態名	説明
Unchecked	IsChecked プロパティが False に設定されたときの RadioButton コントロールの状態。
Checked	IsChecked プロパティが True に設定されたときの RadioButton コントロールの状態。
Indeterminate	IsThreeState プロパティが True に設定されたときの RadioButton コントロールの状態。

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

状態名	説明
Valid	RadioButton コントロールが有効な状態。
InvalidUnfocused	RadioButton コントロールが無効で、キーボードでフォーカスされていないときの状態。
InvalidFocused	RadioButton コントロールが無効で、キーボードでフォーカスされているときの状態。

ヒント

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

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

テンプレートのバインド

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

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

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

Normal

Normal 状態の RadioButton

MouseOver

MouseOver 状態の RadioButton

Pressed

Pressed 状態の RadioButton

Disabled

Disabled 状態の RadioButton

Focused

Focused 状態の RadioButton

注意

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

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

新しい Microsoft Silverlight プロジェクトを開きます。 [ブラシ] カテゴリで、[単色ブラシ] をクリックします。 [エディター] の [16 進数] ボックスに「#FF808080」と入力します。
[ツール] パネルで [Grid] をダブルクリックし、アートボード上に新しいコンテナーを作成します。 [プロパティ] パネルで、[レイアウト] カテゴリの [Width] の右側の [詳細オプション] をクリックし、[リセット] をクリックします。 [Height] についても、同じ操作を繰り返します。
[コード] ビューで次のコードを見つけて、終了スラッシュ (/) を削除します。
```
<Grid HorizontalAlignment="Left" VerticalAlignment="Top"/>
```

次のコードをコピーし、新しいプロジェクトで、手順 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>

Grid の終了タグ (</Grid>) を、上記で張り付けたコードの最後に追加します。
[オブジェクトとタイムライン] パネルで [Grid] を右クリックして、[コントロールの作成] をクリックします。 [コントロールの作成] ダイアログボックスで [RadioButton] をクリックし、[OK] をクリックします。

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

元のグリッドの TextBlock には白い前景色が付いているため、新しい RadioButton スタイルにも白い前景色が使われています。 TextBlock 要素のテキストは「Lorem」となっていたため、それが RadioButton の Content プロパティとなります。テンプレートでは、TextBlock が、 TextBlock と同じレイアウトプロパティを持つ ContentPresenter に置き換えられています。
MouseOver 状態を RadioButton に追加するには、次の操作を行います。
1. [オブジェクトとタイムライン] パネルで [楕円] をクリックします。
2. [状態] パネルで [MouseOver] をクリックします。
3. [プロパティ] パネルの [ブラシ] カテゴリで、[Fill] をクリックし、[エディター] カテゴリで [Alpha] を「25」に設定します。
4. [状態] パネルに戻り、[ベース] をクリックし、状態の記録を終了します。
注意

状態の記録は、ドキュメントウィンドウの左上隅にある記録モードインジケーター をクリックして終了することもできます。
[状態] パネルで [MouseOver] を右クリックして、[状態のコピー先]、[Pressed] の順にクリックします。
オフセットを作成するには、[状態] パネルで [Pressed] 状態が選択された状態で、[オブジェクトとタイムライン] パネルで [Grid] を選択します。 [プロパティ] パネルの [変換] カテゴリで、[X] と [Y] を「1」に設定します。 [ベース] をクリックし、状態の記録を終了します。 [Grid] の名前が [grid] に変更されたことを確認します。
[状態] パネルで [Disabled] をクリックします。 [プロパティ] パネルの [外観] カテゴリで、[Opacity] を 50 に設定します。 [ベース] をクリックし、状態の記録を終了します。
[状態] パネルで [Normal] をクリックします。 [切り替え効果の追加] をクリックして、[Normal to MouseOver] をクリックします。 [切り替え効果の再生時間] を「.2」に設定します。 [ベース] をクリックし、状態の記録を終了します。
[オブジェクトとタイムライン] パネルで、[bullet] をクリックします。 [プロパティ] パネルの [外観] カテゴリで、[Opacity] を 0 に設定します。
[状態] パネルで [Checked] をクリックします。 [プロパティ] パネルの [外観] カテゴリで、[Opacity] を 100 に設定します。 [ベース] をクリックし、状態の記録を終了します。
デザインカンプには、オプションボタンが Focused の状態のときにボタンの回りに表示される青い四角形が含まれています。この四角形を作成するには、[Focused] の状態が選択された状態で、新しい Rectangle オブジェクトを追加します。これは、"状態指定の描画" と呼ばれ、新しいオブジェクトは描画された状態のときにだけ表示されることを意味します。 Focused の状態の四角形を作成するには、[状態] パネルで [Focused] をクリックし、[ツール] パネルで [四角形] ツールをダブルクリックして、新しい Rectangle オブジェクトを作成します。
次の手順では、新しい四角形のプロパティを設定します。プロパティは Focused の状態ではなく、Base の状態で変更する必要があります。ただし、四角形は現在透明のため Base の状態では表示されません。四角形の表示状態を維持するには、記録ボタンをクリックします。このとき、「オブジェクトとタイムライン] パネルで新しい四角形 ([rectangle]) は選択された状態のままです。 [プロパティ] パネルで、[rectangle] のプロパティを次のように設定します。
- Fill [ブラシ] カテゴリで、[ブラシなし] をクリックします。
- Stroke [ブラシ] カテゴリで、[単色ブラシ] をクリックします。 [エディター] で色を「#FF00C0FF」に設定します。
- RadiusX [外観] カテゴリで、[RadiusX] を「2」に設定します。
- RadiusY [外観] カテゴリで、[RadiusY] を「2」に設定します。
- Margin [レイアウト] カテゴリで、[Margin] を次のように設定します。
  - Left -2
  - Right -2
  - Top 0
  - Bottom 0
[スコープを <オブジェクト名> に戻す] をクリックします。 [オブジェクトとタイムライン] パネルで [RadioButton] が選択された状態で、Ctrl キーを押しながら C キーを押してコピーします。 CTRL キーを押しながら V キーを押して、さらに 4 つの RadioButton コントロールをコンテナーに貼り付けます。 [選択内容] ツールを使用して、チェックボックスを 1 列に配置します。 [オブジェクトとタイムライン] パネルで RadioButton オブジェクトの 1 つが選択された状態で、[プロパティ] パネルの [共通プロパティ] カテゴリで [IsEnabled] ボックスをオフにします。
Ctrl + Shift + B キーを押してプロジェクトをビルドした後に F5 キーを押してプロジェクトをテストします。