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

  • [アーティクル]

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

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

Ee371168.f77261da-feb5-4693-b764-582a9cc93c12(ja-jp,Expression.40).png

TextBox テンプレートのパーツ

TextBox には、1 つのパーツ (ContentElement パーツ) があります。これは、必須のパーツです。

tip noteヒント :

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

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

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

状態名 説明

Normal

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

MouseOver

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

ReadOnly

IsReadOnly プロパティが True に設定されているときの TextBox コントロールの状態。

Disabled

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

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

状態名 説明

Unfocused

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

Focused

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

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

状態名 説明

Valid

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

InvalidUnfocused

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

InvalidFocused

TextBox[TextBox] コントロールが無効で、キーボードでフォーカスされているときの状態。
tip noteヒント :

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

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

テンプレートのバインド

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

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

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

TextBox

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

  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="Lorem" VerticalAlignment="Center"/>
</Grid>

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

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

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

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

参照

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

関連項目

概念

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

Copyright ©2011 by Microsoft Corporation. All rights reserved.