TransitionEffectを使う、特殊効果を伴ったコントロールの表示（後編）
2011年4月21日(木)
前編では、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）
01 | RichTextBoxに関する箇所のみの解説です。ListBox、DataGridに関する解説については、前編を参照してください。 |
02 | Option Strict On |
03 | ～名前空間の読み込みと各クラスの定義は略～ |
04 | ■TransitionEffectElementShowユーザーコントロールが読み込まれた時の処理 |
05 | RichTextBoxにXMLデータを表示するRichTextBoxShowプロシージャを実行します。 |
06 | Private Sub TransitionEffectElementShow_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded |
07 | RichTextBoxShow() |
08 | ImageShow() |
09 | DataGridShow() |
10 | End Sub |
11 |
12 | ■RichTextBoxにXMLデータを表示する処理 |
13 | XElement.LoadメソッドでXML文書ファイル(WilliamBlake.xml)を読み込みます。 |
14 | 読み込んだXML文書から<タイトル>要素の値を取得し変数titleに格納しておきます。<タイトル>要素の属性”著者”の値を取得し変数authorに格納しておきます。<内容>要素の値を取得し変数contentsに格納しておきます。 |
15 | 新しいParagraphのインスタンスmyParagraphオブジェクトを生成します。 |
16 |
17 | テキストのビジュアル・プロパティを設定します。 |
18 | ●タイトルを設定します。 |
19 | 新しいRunのインスタンスtitleRun1オブジェクトを生成します。Runクラスは書式付き、または書式なしのテキストのセクションを表すクラスです。フォントサイズ、太字と文字色を指定し、Textプロパティに<タイトル>要素の内容(title変数内の値)を指定します。 |
20 |
21 | ●著者を設定します。 |
22 | 新しいRunのインスタンスauthorRun2オブジェクトを生成します。フォントサイズ、太字と文字色を指定し、Textプロパティに<著者>要素の内容(author変数内の値)を指定します。 |
23 |
24 | 表示されたタイトルと著者の下に改行を追加するには、改行を表すLineBreakクラスを使います。新しいLineBreakのインスタンスmyLinebreakオブジェクトを生成して、myParagraphオブジェクトに改行を追加します。 |
25 |
26 | ●内容の設定 |
27 | 新しいRunのインスタンスcontentsRun3オブジェクトを生成します。フォントサイズを指定し、Textプロパティに<内容>要素の内容(contents変数内の値)を指定します。 |
28 |
29 | 以上の生成と設定ができたところで、myParagraphオブジェクトにtitleRun1、authorRun2、contentsRun3オブジェクトを追加します。 |
30 |
31 | 最後に、titleRun1、authorRun2、contentsRun3の追加されたmyParagraphオブジェクトをRichTextBoxコントロール(WilliamBlake_RichTextBox)に追加します。 |
32 |
33 | このままでは、RichTextBox内に表示されるデータは、データの末尾から表示されてしまいます。そこで、先頭から表示する処理を記述します。それには、RichTextBox内の位置を表すTextPointerクラスを使います。ContentStartプロパティでRichTextBox内の先頭位置を表すTextPointer を取得します。GetNextInsertionPositionメソッドで、指定された論理方向(LogicalDirection.Forward)の、次の挿入位置となるTextPointer を取得します。LogicalDirection.Forwardで、TextPointerがRichTextBoxの指定された位置の直後に配置されます。 |
34 | このように取得した値を、Selectメソッドに指定します。SelectメソッドにはTextPointerオブジェクトの同じ値(startPointer)を指定しています。これで、TextPointerが先頭に移動し、データが先頭から表示されるようになります。 |
35 | Private Sub RichTextBoxShow() |
36 | Dim xmldoc As XElement = XElement.Load("WilliamBlake.xml") |
37 | Dim title As String = xmldoc.Descendants("タイトル").Value |
38 | Dim author As String = xmldoc.Element("情報").Element("タイトル").Attribute("著者").Value |
39 | Dim contents As String = xmldoc.Descendants("内容").Value |
40 |
41 | Dim myParagraph As New Paragraph |
42 |
43 | Dim titleRun1 As New Run |
44 | With titleRun1 |
45 | .Text = title |
46 | .FontSize = 20 |
47 | .FontWeight = FontWeights.Bold |
48 | .Foreground = New SolidColorBrush(Colors.Red) |
49 | End With |
50 |
51 | Dim authorRun2 As New Run |
52 | With authorRun2 |
53 | .Text = author |
54 | .FontSize = 16 |
55 | .FontWeight = FontWeights.Bold |
56 | .Foreground = New SolidColorBrush(Colors.Blue) |
57 | End With |
58 |
59 | Dim myLinebreak As New LineBreak |
60 | myParagraph.Inlines.Add(myLinebreak) '改行 |
61 |
62 | Dim contentsRun3 As New Run |
63 | With contentsRun3 |
64 | .Text = contents |
65 | .FontSize = 11 |
66 | End With |
67 |
68 | With myParagraph.Inlines |
69 | .Add(titleRun1) |
70 | .Add(authorRun2) |
71 | .Add(contentsRun3) |
72 | End With |
73 |
74 | WilliamBlake_RichTextBox.Blocks.Add(myParagraph) |
75 |
76 | Dim startPointer As TextPointer = WilliamBlake_RichTextBox.ContentStart.GetNextInsertionPosition(LogicalDirection.Forward) |
77 | WilliamBlake_RichTextBox.Selection.Select(startPointer, startPointer) |
78 | End Sub |
79 |
80 | ～DataGridとListBoxの処理についてはコード略～ |
VS2010メニューの「デバッグ(D)／デバッグ開始(S)」で動作を確認してください。MainPage.xamlには、TransitionEffectElementShow.xamlが取り込まれていますので、動作の確認は可能です。先に配置した画像を表示するListBoxや、DataGridは、透明化されていますので表示されません。動作が確認できれば、このRichTextBoxコントロールのOpacityプロパティにも0を指定して透明化しておきます。
連載バックナンバー
Think ITメルマガ会員登録受付中
Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。
