PR

TransitionEffectを使う、特殊効果を伴ったコントロールの表示(後編)

2011年4月21日(木)
PROJECT KySS

前編では、ListBox、DataGridコントロールにデータをバインドし、動作を確認するところまでを解説しました。後編では、RichTextBoxコントロールへのデータ表示について解説した後、Blend4上でTransitionEffectを使って、これらのコントロールに特殊効果を与える方法を解説します。

今回のサンプルは以下よりダウンロードできます(前回と同じファイルです)。
→ 今回のサンプルファイル(16.6MB)

まずは、RichTextBoxにXMLデータを表示させるところからの解説です。

RichTextBoxの設定

ツールボックスよりRichTextBoxをドラッグ&ドロップします。プロパティのIsReadOnlyにチェックを入れて編集ができないようにしておきます。x:Nameについては図1を参照してください。

図1:RichTextBoxを配置した(クリックで拡大)

TransitionEffectElementShow.xaml.vb内、にXMLデータを表示するコードを記述します(リスト1)

ロジックコードを記述する

リスト1 (TransitionEffectElementShow.xaml.vb)

RichTextBoxに関する箇所のみの解説です。ListBox、DataGridに関する解説については、前編を参照してください。
Option Strict On
~名前空間の読み込みと各クラスの定義は略~
■TransitionEffectElementShowユーザーコントロールが読み込まれた時の処理
RichTextBoxにXMLデータを表示するRichTextBoxShowプロシージャを実行します。
	Private Sub TransitionEffectElementShow_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
		RichTextBoxShow()
		ImageShow()
		DataGridShow()
	End Sub

■RichTextBoxにXMLデータを表示する処理
XElement.LoadメソッドでXML文書ファイル(WilliamBlake.xml)を読み込みます。
読み込んだXML文書から<タイトル>要素の値を取得し変数titleに格納しておきます。<タイトル>要素の属性”著者”の値を取得し変数authorに格納しておきます。<内容>要素の値を取得し変数contentsに格納しておきます。
新しいParagraphのインスタンスmyParagraphオブジェクトを生成します。

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

●著者を設定します。
新しいRunのインスタンスauthorRun2オブジェクトを生成します。フォントサイズ、太字と文字色を指定し、Textプロパティに<著者>要素の内容(author変数内の値)を指定します。

表示されたタイトルと著者の下に改行を追加するには、改行を表すLineBreakクラスを使います。新しいLineBreakのインスタンスmyLinebreakオブジェクトを生成して、myParagraphオブジェクトに改行を追加します。

●内容の設定
新しいRunのインスタンスcontentsRun3オブジェクトを生成します。フォントサイズを指定し、Textプロパティに<内容>要素の内容(contents変数内の値)を指定します。

以上の生成と設定ができたところで、myParagraphオブジェクトにtitleRun1、authorRun2、contentsRun3オブジェクトを追加します。

最後に、titleRun1、authorRun2、contentsRun3の追加されたmyParagraphオブジェクトをRichTextBoxコントロール(WilliamBlake_RichTextBox)に追加します。

このままでは、RichTextBox内に表示されるデータは、データの末尾から表示されてしまいます。そこで、先頭から表示する処理を記述します。それには、RichTextBox内の位置を表すTextPointerクラスを使います。ContentStartプロパティでRichTextBox内の先頭位置を表すTextPointer を取得します。GetNextInsertionPositionメソッドで、指定された論理方向(LogicalDirection.Forward)の、次の挿入位置となるTextPointer を取得します。LogicalDirection.Forwardで、TextPointerがRichTextBoxの指定された位置の直後に配置されます。
このように取得した値を、Selectメソッドに指定します。SelectメソッドにはTextPointerオブジェクトの同じ値(startPointer)を指定しています。これで、TextPointerが先頭に移動し、データが先頭から表示されるようになります。
	Private Sub RichTextBoxShow()
		Dim xmldoc As XElement = XElement.Load("WilliamBlake.xml")
		Dim title As String = xmldoc.Descendants("タイトル").Value
		Dim author As String = xmldoc.Element("情報").Element("タイトル").Attribute("著者").Value
		Dim contents As String = xmldoc.Descendants("内容").Value

    Dim myParagraph As New Paragraph

		Dim titleRun1 As New Run
		With titleRun1
			.Text = title
			.FontSize = 20
			.FontWeight = FontWeights.Bold
			.Foreground = New SolidColorBrush(Colors.Red)
		End With

		Dim authorRun2 As New Run
		With authorRun2
			.Text = author
			.FontSize = 16
			.FontWeight = FontWeights.Bold
			.Foreground = New SolidColorBrush(Colors.Blue)
		End With

		Dim myLinebreak As New LineBreak
		myParagraph.Inlines.Add(myLinebreak) '改行

		Dim contentsRun3 As New Run
		With contentsRun3
			.Text = contents
			.FontSize = 11
		End With

		With myParagraph.Inlines
			.Add(titleRun1)
			.Add(authorRun2)
			.Add(contentsRun3)
		End With

		WilliamBlake_RichTextBox.Blocks.Add(myParagraph)

		Dim startPointer As TextPointer = WilliamBlake_RichTextBox.ContentStart.GetNextInsertionPosition(LogicalDirection.Forward)
		WilliamBlake_RichTextBox.Selection.Select(startPointer, startPointer)
End Sub

~DataGridとListBoxの処理についてはコード略~

VS2010メニューの「デバッグ(D)/デバッグ開始(S)」で動作を確認してください。MainPage.xamlには、TransitionEffectElementShow.xamlが取り込まれていますので、動作の確認は可能です。先に配置した画像を表示するListBoxや、DataGridは、透明化されていますので表示されません。動作が確認できれば、このRichTextBoxコントロールのOpacityプロパティにも0を指定して透明化しておきます。

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

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