PR

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

2010年6月11日(金)
PROJECT KySS

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

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

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

RichTextBoxコントロール内に画像とテキストが表示されている。

図4:RichTextBoxコントロール内に画像とテキストが表示されている。

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

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

<?xml version="1.0"??>

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

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

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

デザイン画面上にStackPanelコントロールをレイアウトする。

図5:デザイン画面上にStackPanelコントロールをレイアウトする。

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

レイアウトができたら、ロジック・コードを記述します(リスト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でサポートされた、任意のオブジェクトを指定しての印刷機能について取り上げます。

四国の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会員サービスの概要とメリットをチェック

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