ドラッグ＆ドロップと、コントロールの生成

プログラムでRichTextBoxオブジェクトを生成する

Silverlight 4で新たに追加されたRichTextBoxコントロールは、書式付きテキスト、ハイパーリンク、インラインイメージや、 その他の豊富なコンテンツをサポートしています。このRichTextBoxコントロール内に、プログラムでコントロールを生成して追加し、画像とテキストを表示してみましょう（図4）。

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

先のサンプル作成時と同様の手順で、新規Silverlight 4プロジェクト（プロジェクト名は「SL4_RichTextBox_Code」）を作成してください。プロジェクト依存関係も設定してください。
XML文書ファイル（リスト3）を追加し、Imageフォルダを作成して画像も追加しておきます。ダウンロード用ファイルには、画像（bookCover.png）とXML文書ファイル（Book.xml）は追加済みです。
XMLデータを処理するため、「Project／Add Reference」からSystem.Xml.Linqを追加しておきます。

リスト3 表示用のサンプルXML文書ファイル（Book.xml）



 
    アラカンダイエッターKUNIYASUタイトル>
   
SOHOのプログラマというのは、もっとも「身体を動かす時間が少ない」職業です。
本書は、健康診断で、NASHになりかけていると言われ、しぶしぶダイエットを始めた、アラウンド還暦・超甘党プログラマの現在進行形の記録です。～略～
    内容>
  情報>
書籍>

次に、コントロールをレイアウトします。

StackPanelコントロールを1個、適当な位置にレイアウトし、プレス＆ドラッグして幅と高さを広げてください（図5）。このレイアウトによって書き出されるXAMLコードは省略します。

コントロール生成の処理を記述する

レイアウトができたら、ロジック・コードを記述します（リスト2）。コントロールを生成し、 基本的なビジュアル・デザインのプロパティや表示内容を指定して追加していく、という処理の繰り返しを、着実に記述していきましょう。

リスト2　コントロールを生成してデータを表示するロジック・コード（MainPage.xaml.vb）

■名前空間の読み込み
LINQ to XMLでXMLを処理するクラスの含まれる、System.Xml.Linq名前空間をインポートします。
画像を読み込むためのクラスの含まれるSystem.Windows.Media.Imaging名前空間をインポートします。

Option Strict On
Imports System.Xml.Linq
Imports System.Windows.Media.Imaging

■ページが読み込まれたときの処理
XElement.LoadメソッドでXML文書ファイル（Book.xml）を読み込み、要素のコレクションを取得するクエリ（query）を定義して実行します。 クエリコレクション内を変数resultで反復処理しながら、次の処理を実行します。

まず、新しいRichTextBoxのインスタンスmyRichTextBoxオブジェクトを生成します。
IsReadOnlyプロパティにチェックを付けて、編集を不可としておきます。
VerticalScrollBarVisibilityプロパティにVisibleを指定し、垂直方向にスクロールバーを表示します。
myRichTextBoxオブジェクトの高さは、Heightプロパティで指定します。
BackgroundプロパティにはYellowを指定し、背景色を指定します。

次に、新しいParagraphのインスタンスmyParagraphオブジェクトを生成します。

画像表示用のコントロールを生成して、表示する画像を指定します。
新しいInlineUIContainerのインスタンス、myInlineUIContainerオブジェクトを生成します。このInlineUIContainerクラスは、 UIElementを埋め込むことのできるクラスです。また、新しいImageのインスタンスmyImageオブジェクトも生成しておきます。
myImageオブジェクトのサイズを指定して、SourceプロパティにImageフォルダ内の画像ファイル（bookCover.png）を、相対Uriで指定します。

テキストのビジュアル・プロパティを設定します。
新しいRunのインスタンスmyRun1オブジェクトを生成します。Runクラスは書式付き、または書式なしのテキストのセクションを表すクラスです。 Textプロパティに要素の内容を指定し、フォントサイズと文字色を指定します。

以上の生成と設定ができたところで、myParagraphオブジェクトにmyInlineUIContainerオブジェクトを追加します。 さらに、Childプロパティに画像を読み込んでいるmyImageオブジェクトを指定します。ChildプロパティはInlineUIContainerによってホストされたUIElementを取得するプロパティです。

画像の下に改行を追加して、テキストを表示させるには、改行を表すLinebreakクラスを使います。 新しいLinebreakのインスタンスmyLinebreakオブジェクトを生成して、myParagraphオブジェクトに改行を追加します。

テキストの一部、ここではタイトル部分を太字にするには、太字を表すBoldクラスを使います。 新しいBoldのインスタンスmyBoldオブジェクトを生成して、タイトルを定義したmyRun1オブジェクトに太字を適用します。

要素のデータは、新しいRunのインスタンスmyRun2オブジェクトを生成して、Textプロパティに指定しておきます。

myParagraphオブジェクトに、太字の設定されたタイトル（myBold）を追加し、内容の設定されたmyRun2を追加します。

最後に、myImage、myBold、myRun2の定義されたmyParagraphオブジェクトをmyRichTextBoxオブジェクトに追加します。 StackPanel1コントロールにmyRichTextBoxオブジェクトを追加すると、前掲の図4のような表示になります。

Private Sub MainPage_Loaded（ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs） Handles Me.Loaded
  Dim xmldoc As XElement = XElement.Load（"Book.xml"）
  Dim query = From c In xmldoc.Descendants（"情報"） Select c
  For Each result In query
    Dim myRichTextBox As New RichTextBox
    myRichTextBox.VerticalScrollBarVisibility = ScrollBarVisibility.Visible
    myRichTextBox.Height = 270
    myRichTextBox.IsReadOnly = True
    myRichTextBox.Background = New SolidColorBrush（Colors.Yellow）

    Dim myParagraph As New Paragraph
    Dim myInlineUIContainer As New InlineUIContainer

    Dim myImage As New Image
    myImage.Width = 90
    myImage.Height = 130
    myImage.Source = New BitmapImage（New Uri（"Image/bookCover.png", UriKind.Relative））

    Dim myRun1 As New Run
    myRun1.Text = result.Element（"タイトル"）.Value
    myRun1.FontSize = 20
    myRun1.Foreground = New SolidColorBrush（Colors.Red）

    myParagraph.Inlines.Add（myInlineUIContainer）
    myInlineUIContainer.Child = myImage

    Dim myLinebreak As New LineBreak
    myParagraph.Inlines.Add（myLinebreak）

    Dim myBold As New Bold
    myBold.Inlines.Add（myRun1）
    Dim myRun2 As New Run
    myRun2.Text = result.Element（"内容"）.Value

    myParagraph.Inlines.Add（myBold）
    myParagraph.Inlines.Add（myRun2）

    myRichTextBox.Blocks.Add（myParagraph）
    StackPanel1.Children.Add（myRichTextBox）
  Next
End Sub


次回は、Silverlight 4でサポートされた、任意のオブジェクトを指定しての印刷機能について取り上げます。