TabControlでの画像の切り替えとRichTextBoxの利用

RichTextBoxに入力した文字列の、文字色、文字サイズを指定し、任意の位置に画像を配置する

次に紹介するのは、RichTextBoxに入力した文字列の、文字色や、文字サイズを指定し、ComboBoxに表示されている画像を、任意の位置にレイアウトするものです。

実装する機能の動作は次の通りです。

RichTextBox内に内容を入力し、任意の文字列を選択します。[Select Color]のComboBoxから文字色を選択します、選択した文字色が反映されます。[Font Size]のComboBoxから文字サイズを選択します、文字サイズが適用されます。カーソルの位置に、画像を表示しているComboBoxから任意の画像を選択します。カーソルのある位置に画像がレイアウトされます。図3のように書式が設定され画像が表示されます。

サンプル・ファイルはこちらからダウンロードできます。

VS 2010のデザイン画面上で、コントロールをレイアウトする

これまでのサンプル作成時と同様の手順で、新規Silverlight 4プロジェクト（プロジェクト名は「SL4_RichTextBoxColor」）を作成してください。プロジェクトの依存関係も設定してください。

次に、ComboBoxに表示させる画像のファイル名を記録したXMLファイル(前掲の、リスト1)を追加します。XMLデータはLINQ to XMLで処理するため、「プロジェクト(P) > 参照の追加(F)」からSystem.Xml.Linqを追加しておきます。

ソリューションエクスプローラ内にImageというフォルダを作成して、画像も追加しておきます。

ダウンロードしたサンプル・ファイルにはXMLファイルや画像は追加済みです。

UserControlのプロパティ内の[レイアウト]を展開して、Widthに800、Heightに600を指定します。次にツールボックスからTextBlockコントロール、Labelコントロール、ComboBoxコントロールを3つ、その下にRichTextBoxコントロールをレイアウトします。要素内に

と記述し、要素を使って、RichTextBoxに影を付けます。Opacityには透明度、ShadowDepthにはRichTextBoxとRichTextBoxの影との間の距離を指定します。図4のようにレイアウトします。ComboBox1とComboBox2に表示されている文字列については、この後で解説しています。

このDropShadowEffectの設定は、VS2010上では、直接コードを記述する必要がありますが、Blend4ではプロパティから自動的に設定することができます。ソリューションエクスプローラ内のMainPage.xamlを選択し、マウスの右クリックで表示されるメニューから、「Expression Blendを開く(X)」を選択し、Blend4を起動します。RichTextBoxを選択し、右に表示されるプロパティから、[外観]内のEffectの横にある[新規作成]ボタンをクリックします。「オブジェクトの選択」画面が表示されますので、DropShadowEffectを選択し[OK]をクリックします。OpacityやShadowDepthを設定する画面が表示されますので、値を入力します。VS2010上では、Opacityには0～1.0の値を指定しますが、Blend4上のOpacityには0%～100%の値を指定します(図5)

書き出されるXAMLコードをリスト2のように編集します。

リスト2: 編集されたXAMLコード(Mainpage.xaml)

（1）プロパティ要素内に、KeyがComboBoxTemplateというDataTemplateを定義します。Gridの列を定義します。ここでは、ComboBoxコントロール内に画像とテキストを表示しますので、2個の列を定義しています。 列の1列目には要素をレイアウトします。Sourceプロパティに{Binding 画像名}と指定します。「画像名」はプログラムコードのクラス内で定義する名称です。2列目には要素をレイアウトします。Textプロパティには{Binding title}と指定します。「title」はプログラムコードのクラス内で定義する名称です。

このDataTemplateで定義した内容を要素(NameはComboBox3)から参照します。要素を（2）のように書き換えます。ItemTemplateプロパティにプロパティ要素内で定義したDataTemplateのKeyである、ComboBoxTemplateを指定します。StaticResourceはすでに定義されているリソースを参照します。

要素(NameがComboBox1とComboBox2)には、要素のContentプロパティに「文字色」、「文字サイズ」等を指定します。これはプロパティから設定することができます。NameがComboBox1の要素の要素に文字色を設定するには、ComboBox1コントロールを選択し、[共通]プロパティのItemsの横にある[…]ボタンをクリックして、「コレクションエディター」を起動します。[Add]ボタンでComboBoxItemの項目を5つ追加し、右に表示されるプロパティのContentの文字色を指定していきます。一番先頭のComboBoxItemのContentにはSelect Colorと指定し、IsSelectedにチェックを付けて、デフォルトではSelect Colorが表示されるようにしておきます(図6)。また、表示される文字色名と色が一致するよう、要素のForegroundプロパティに文字色を指定します。ComboBox2の文字サイズについても同じ手順ですが文字色は指定しません。