TextBox コントロールのスタイル設定のヒント
組み込みの TextBox コントロール テンプレートを使用して、カスタム TextBox テンプレートを作成できます。既定の TextBox コントロールは、次のように表示されます。
TextBox テンプレートのパーツ
TextBox には、1 つのパーツ (ContentElement パーツ) があります。これは、必須のパーツです。
ヒント : |
---|
テンプレートのパーツを見るには、テンプレートを変更するときに [パーツ] パネルを開きます。 |
[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] コントロールが無効で、キーボードでフォーカスされているときの状態。 |
ヒント : |
---|
状態グループは、コントロールの表示状態を論理的に分類したものです。1 つのグループに属する複数の状態を同時に表示することはできません。たとえば、CommonStates グループには、ユーザーがマウスなどの入力デバイスで行う操作に関係のある状態が含まれています。1 つの状態グループ内で一度に表示できる状態は 1 つだけですが、別々の状態グループに属する状態を同時に表示することはできます。 |
状態を 1 つ選択すると、その状態の変更の記録が開始されます。状態の記録を無効にするには、記録モード インジケーター をクリックするか、[状態] パネルで [ベース] を選択します。2 つの状態がアクティブになったときのコントロールの外観を変更するには、1 つのグループに属する状態のプレビューを固定しておき、別のグループに属する状態を変更します。
テンプレートのバインド
Background、BorderBrush、Foreground、BorderThickness、および Padding プロパティは、テンプレートにバインドすることができます。詳細については、「オブジェクト プロパティをテンプレートに反映させる」を参照してください。
オブジェクトを [TextBox] コントロールに変換するには
次の図は、TextBox のデザイン見本図(カンプ)です。
この例では、次の手順 2 で XAML コードを使用します。これは、上の図の TextBox コントロール テンプレートを使用したカスタム テキスト ボックスの作成に相当します。
新しい 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="Lorem" VerticalAlignment="Center"/> </Grid>
貼り付けたコードの後に Grid の終了タグ (
</Grid>
) を追加します。[オブジェクトとタイムライン] パネルで [Grid] を右クリックして、[コントロールの作成] をクリックします。[コントロールの作成] ダイアログ ボックスで [TextBox]、[OK] の順にクリックします。
Ctrl + Shift + B キーを押してプロジェクトをビルドした後に F5 キーを押してプロジェクトをテストします。
新しい TextBox テンプレートを他の TextBox オブジェクトに適用する方法については、「リソースの適用と削除」を参照してください。
参照
Silverlight の TextBox コントロールのプロパティとイベントの詳細については、MSDN の「Silverlight Control Gallery (Silverlight コントロール ギャラリー) 」を参照してください。
関連項目
概念
一般的な Silverlight コントロールのスタイル処理のヒント
テンプレートを使用するコントロールのスタイルの設定
テキストの描画
Copyright ©2011 by Microsoft Corporation. All rights reserved.