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

  • [アーティクル]

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

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

Ee341382.4e1556e5-03f0-4881-8283-8281cb11c978(ja-jp,Expression.40).png

PasswordBox テンプレートのパーツ

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

tip noteヒント :

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

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 コントロールが無効で、キーボードでフォーカスされているときの状態。
tip noteヒント :

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

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

テンプレートのバインド

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

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

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

PasswordBox

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

  1. 新しい Microsoft Silverlight プロジェクトを開きます。[コード] ビューで次のコードを見つけて、終了スラッシュ (/) を削除します。

    <Grid x:Name="LayoutRoot" Background="White"/>

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

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

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

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

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

  6. [TextBlock] の [VerticalAlignment] と [Margin] プロパティをコピーして、[ContentElement] に貼り付けます。[オブジェクトとタイムライン] パネルで [ContentElement] をクリックして、[プロパティ] パネルで、次の操作を行ないます。

    • **VerticalAlignment   **[Center] に設定します。

    • **Margin   **次のように設定します。

      • [左]   5

      • [右]   5

      • [上]   0

      • [下]   0

  7. [オブジェクトとタイムライン] パネルで、[TextBlock] を右クリックして [削除] をクリックします。

  8. [オブジェクトとタイムライン] パネルで [テンプレート] をクリックして、[スコープを <オブジェクト名> に戻す] Ee341382.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.40).png をクリックします。[オブジェクトとタイムライン] パネルで [スタイル] が選択された状態で、[プロパティ] パネルの [ブラシ] カテゴリで、[Foreground] を「#FFFFFFFF」に設定します。

  9. [オブジェクトとタイムライン] パネルで、[スコープを <オブジェクト名> に戻す] Ee341382.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.40).png をクリックします。

  10. [プロパティ] パネルで、[共通プロパティ] カテゴリの [パスワード] テキスト ボックスに「abcde」と入力します。

  11. [プロパティ] パネルの [テキスト] カテゴリで、[詳細プロパティの表示] をクリックします。[PasswordChar] テキスト ボックスに、「*」と入力します。

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

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

参照

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

関連項目

概念

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

Copyright ©2011 by Microsoft Corporation. All rights reserved.