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

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

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

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

JJ171030.4e1556e5-03f0-4881-8283-8281cb11c978(ja-jp,VS.120).png

PasswordBox テンプレートのパーツ

PasswordBox コントロールのパーツは、ContentElement パーツ 1 つだけです。これは、必須のパーツです。

ヒント

テンプレートのパーツを見るには、テンプレートを変更するときに [パーツ] パネルを開きます。

PasswordBox コントロールの状態

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

状態名	説明
Normal	PasswordBox コントロールに対してユーザーが何も行わず、単に表示されているだけの状態。
MouseOver	ユーザーが PasswordBox コントロールの上にポインターを動かしたときの状態。
Disabled	IsEnabled プロパティが False に設定されたときの PasswordBox コントロールの状態。

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

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

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

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

ヒント

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

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

テンプレートのバインド

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

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

次の図は、PasswordBox のデザイン見本図（カンプ）です。

PasswordBox

この例では、次の手順 2 で XAML コードを使用します。これは、上の図の PasswordBox コントロールテンプレートを使用したカスタムパスワードボックスの作成に相当します。

新しい Microsoft Silverlight プロジェクトを開きます。 [コード] ビューで次のコードを見つけて、終了スラッシュ (/) を削除します。
```
<Grid x:Name="LayoutRoot" Background="White"/>
```

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

<Grid Height="20" Width="120">
<Rectangle Fill="#FF333333" RadiusX="5" RadiusY="5"/>
<TextBlock Margin="5,0" Foreground="White" Text="*****" VerticalAlignment="Center"/>
</Grid>

Grid の終了タグ (</Grid>) を、上記で張り付けたコードの最後に追加します。
[オブジェクトとタイムライン] パネルで [Grid] を右クリックして、[コントロールの作成] をクリックします。 [コントロールの作成] ダイアログボックスで [PasswordBox] をクリックし、[OK] をクリックします。
[オブジェクトとタイムライン] パネルの [Grid] をクリックします。 [パーツ] パネルで、[ContentElement] をダブルクリックします。
[TextBlock] の [VerticalAlignment] と [Margin] プロパティをコピーして、[ContentElement] に貼り付けます。 [オブジェクトとタイムライン] パネルで [ContentElement] をクリックして、[プロパティ] パネルで、次の操作を行ないます。
- **VerticalAlignment **[Center] に設定します。
- **Margin **次のように設定します。
  - [左] 5
  - [右] 5
  - [上] 0
  - [下] 0
[オブジェクトとタイムライン] パネルで、[TextBlock] を右クリックして [削除] をクリックします。
[オブジェクトとタイムライン] パネルで [テンプレート] をクリックして、[スコープを <オブジェクト名> に戻す] をクリックします。 [オブジェクトとタイムライン] パネルで [スタイル] が選択された状態で、[プロパティ] パネルの [ブラシ] カテゴリで、[Foreground] を「#FFFFFFFF」に設定します。
[オブジェクトとタイムライン] パネルで、[スコープを <オブジェクト名> に戻す] をクリックします。
[プロパティ] パネルで、[共通プロパティ] カテゴリの [パスワード] テキストボックスに「abcde」と入力します。
[プロパティ] パネルの [テキスト] カテゴリで、[詳細プロパティの表示] をクリックします。 [PasswordChar] テキストボックスに、「*」と入力します。
Ctrl + Shift + B キーを押してプロジェクトをビルドした後に F5 キーを押してプロジェクトをテストします。