TextBox コントロールのスタイル処理のヒント

  • [アーティクル]

Ee371168.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(JA-JP,Expression.30).png

[TextBox] コントロールは、ユーザーが直接入力したりテキストを表示したりするコントロールです。読み取り専用に設定することもできますが、通常は編集可能にします。[TextBox] オブジェクトに複数の行を表示して、コントロールのサイズに合わせてテキストを折り返すことができます。

他のコントロールと同様に、[TextBox] コントロールも既定の外観を変更できます。既定では、[TextBox] コントロールは次のように見えます。

Ee371168.f77261da-feb5-4693-b764-582a9cc93c12(JA-JP,Expression.30).png

[TextBox] コントロール プロパティ

[TextBox] コントロールはコンテンツ コントロールです。そのため、[TextBox] コントロールに表示するテキストは、[プロパティ] パネルの [共通プロパティ] にある [Text] プロパティで設定します。

[TextBox] コントロールを読み取り専用にするには、[IsReadOnly] プロパティを選択します。

[AcceptsReturn] プロパティを選択すると、ユーザーがテキストを改行できるようになります。この場合は、[HorizontalScrollBarVisibility] と [VerticalScrollBarVisibility] プロパティを設定して、スクロール バーを有効にすることもできます。

フォント サイズやフォントの種類などを指定するには、[プロパティ] パネルの [テキスト] でプロパティを設定します。カスタム フォントをプロジェクトに追加し、テキスト コントロールで使用できるように埋め込むこともできます。

詳細については、「テキストの描画」を参照してください。

これらのプロパティを設定するには、次の方法があります。

  • オブジェクトのプロパティを設定する   アートボードに [TextBox] オブジェクトを描いた後で、そのプロパティを直接設定します。複数の [TextBox] オブジェクトで同じ値を使用する場合は、これらのプロパティをスタイルとして設定します。

  • プロパティをスタイルとして設定する   [TextBox] オブジェクトのプロパティをスタイル Ee371168.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(JA-JP,Expression.30).png として設定すると、このスタイルを使用するすべての [TextBox] オブジェクトのプロパティが同じ値になります。特定のオブジェクトの値を上書きすることもできます。

    詳細については、「スタイルの作成」を参照してください。

TextBox テンプレートのパーツ

TextBox コントロールは、「TextBox テンプレート」というテンプレートを 1 つ使用します。このテンプレートの各パーツによって、テンプレートが適用される [TextBox] オブジェクトの外観と動作が決まります。

[TextBox] コントロールの見栄えをよくするために他のオブジェクトをテンプレートに入れることはできますが、次の表にあるパーツは、コントラクトで定義されている動作しか行えません。

テンプレートのパーツを見るには、テンプレートを変更するときに [パーツ] パネルを開きます。[オブジェクトとタイムライン] パネルのオブジェクトの横に表示される Ee371168.6cf58c39-edba-4a0e-acbc-1da272f9a387(JA-JP,Expression.30).png アイコンは、そのオブジェクトが [パーツ] パネルでパーツの役割を果たしていること示します。

Ee371168.62c81ec5-2055-4556-a068-2dc300675ac9(JA-JP,Expression.30).png

パーツ名

オブジェクトの種類

説明

ContentElement

FrameworkElement

テキストを表示するオブジェクト。

これは、必須のパーツです。

[TextBox] テンプレートの他のオブジェクトを使って、さまざまな状態の [TextBox] コントロールの外観を変更します。

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

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

状態名

説明

Normal

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

MouseOver

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

Pressed

ユーザーが [TextBox] コントロールをクリックしたか、[TextBox] コントロールがフォーカスされているときに Enter キーまたはスペース バーを押したときの状態。

Disabled

[IsEnabled] プロパティを [False] に設定したときの状態。

[TextBox] コントロールは、次の FocusStates 状態グループに属する状態のいずれかになることができます。

状態名

説明

Unfocused

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

Focused

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

[TextBox] コントロールは、次の ValidationStates 状態グループにある 3 つの状態の 1 つになることができます。

状態名

説明

Valid

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

InvalidUnfocused

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

InvalidFocused

[TextBox] コントロールが無効で、キーボードでフォーカスされているときの状態。
Ee371168.alert_tip(JA-JP,Expression.30).gifヒント :

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

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

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

[TextBox] コントロールのテンプレートを変更するには、次のいずれかの操作を行います。

  • アートボードに [TextBox] Ee371168.343296b4-5c7d-4145-84cc-91b08ba67a1b(JA-JP,Expression.30).png を描いてから、既定のテンプレートのコピーを作成します。

    詳細については、「テンプレートの作成または変更」を参照してください。

  • [TextBox] コントロールにするオブジェクトを描くかアートをインポートして、その外観をデザインしてから、[コントロールの作成] コマンドを使用します。

[コントロールの作成] コマンドを使用する場合は、次の手順に従って、TextBox テンプレートに必要なオブジェクトをすべて作成します。

  1. [TextBox] コントロールにテキストを表示するには、[TextBox] コントロールを構成するオブジェクトのある [TextBlock]Ee371168.42165963-00f7-4a33-abcd-b0849edebada(JA-JP,Expression.30).png を含めます。

    [TextBlock] オブジェクトを含むアートワークを [TextBox] コントロールのテンプレートに変換する場合は、[コントロールの作成] コマンドで次の操作を行います。

    • [TextBlock] コントロールの代わりに、ContentElement パーツを表す [ScrollViewer] オブジェクトをテンプレートに配置します。

    • [TextBlock] コントロールから [ContentElement] オブジェクトにレイアウト プロパティをコピーします。

    • [TextBlock] コントロールからテキストの体裁のプロパティを [TextBox] コントロールにコピーします (このプロパティは、テンプレート全体で使われます)。

    • [TextBlock] コントロールから、テンプレートを適用する [TextBox] オブジェクトに [Text] プロパティをコピーします。

    または、オブジェクトをコントロール テンプレートに変換した後で、ContentElement パーツにオブジェクトを割り当てます。詳細については、「オブジェクトへのテンプレート パーツの割り当て」を参照してください。

  2. まず、オブジェクトをグループにまとめてレイアウト パネルに配置します。そのレイアウト パネルを選択し、[ツール] メニューの [コントロールの作成] をクリックします。

  3. 表示されたダイアログ ボックスで [TextBox] を選択してテンプレートに名前を付け、テンプレートの保存場所を選択します。

  4. [OK] をクリックすると、Microsoft Expression Blend がテンプレート編集モードになり、[TextBox] コントロールを構成しているオブジェクトが表示されます。このモードで、テンプレートの変更を続けます。たとえば、オブジェクトの追加や変更を行ったり、[状態] パネルで状態を選択して、この状態のテンプレートの外観を変更したりできます。

  5. 必要に応じて、このテンプレートを使うことになる [TextBox] オブジェクトの次のプロパティと、オブジェクトのブラシ プロパティをバインドします。

    • Background

    • BorderBrush

    • Foreground

    • BorderThickness

    詳細については、「オブジェクト プロパティをテンプレートに反映させる」を参照してください。

  6. テンプレート編集モードを終了するには、アートボードの上端にある階層リンク バーの [TextBox] をクリックするか、[オブジェクトとタイムライン] パネルの [上へスコープ] Ee371168.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(JA-JP,Expression.30).png をクリックします。

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

参照

Microsoft Silverlight の [TextBox] コントロールのプロパティとイベントの詳細については、MSDN の「Silverlight Control Gallery (Silverlight コントロール ギャラリー)」を参照してください。

関連項目

概念

一般的な Silverlight コントロールのスタイル処理のヒント

テンプレートをサポートするコントロールのスタイル処理

テキストの描画