PR

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

2010年8月25日(水)
PROJECT KySS

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

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

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

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

図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)

図4: すべてのコントロールをレイアウトした。RichTextBoxには影を付けている

図5: DropShadowEffectの設定をBlend4から行っている(クリックで拡大)

書き出される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の文字サイズについても同じ手順ですが文字色は指定しません。

図6: 「コレクションエディターから文字色を設定している(クリックで拡大)

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています