RichTextBox内の各オブジェクトを印刷する

MediaElementコントロールのレイアウトと、動画の追加

次に、Toolboxから、RichTextBoxコントロール内のリスト1の文章の下側に、MediaElementをレイアウトしてください。

MediaElementのWidthには240、Heightには180を指定しておきます。また、ビデオが自動的に再生されるように、Propertyの「Other」中のAutoPlayプロパティにチェックを付けておきます。

その下には、再生/一時停止用の2個のButtonコントロールをレイアウトします。再生用のButtonは、名前を「playButton」、Contentを「PLAY」とします。一時停止用のButtonは、名前を「pauseButton」、Contentを「PAUSE」としておきます。

このサンプルで動画印刷をテストする場合は、動画を一時停止してから印刷を実行してください。

次に、Solution Explorer内にWMVというフォルダを作成し、ムービー・ファイル（dougo320.wmv）を取り込みます。

要素のSourceプロパティに「WMV/dougo320.wmv」と入力して指定してください。そして、このムービー・ファイルを選択して表示される「Properties」の「Build Action」プロパティに「Resource」を指定します(図6)。

単にSourceプロパティにファイルを指定しただけではビデオは表示されません。

DataGridコントロールのレイアウトと、XML文書ファイルの追加

RichTextBoxの右半分には、DataGridコントロールをレイアウトします。PropertiesのColumnsを展開してAutoGenerateColumnsプロパティにチェックを付けておきます。

レイアウトできたら、DataGridに表示させるサンプルデータを追加します。今回は、XML文書ファイル（リスト2）を使います。このXMLデータを処理するためにLINQ to XMLを用いますから、「Project／Add Reference」からSystem.Xml.Linqを追加しておきます。XML文書ファイルのデータは全てサンプル用のダミーです。

ダウンロード用ファイルには、ムービー・ファイル（dougo320.wmv）とXML文書ファイル（sampleData.xml）は追加済みです。

リスト2: 使用するXML文書（sampleData.xml）



 
    愛媛花子氏名>
    30年齢>
    松山市道後1-1-1住所>
    道後IT株式会社勤務先>
  情報>
  ～情報>繰り返し～
顧客情報>


XAMLコードを編集する

以上の操作で作成されたXAMLコードを編集します。

や要素は、要素の子の要素の子として記述します（リスト3、アミカケ部分）。

この編集作業により、MediaElement コントロールやDataGridコントロールのレイアウト位置が変わってしまいますので、Marginの値を調整してください。DataGrid については、Topの値にマイナス値を指定して、MediaElementコントロールの横に並べます（リスト3、太字下線部分）。

「PLAY」ボタンと「PAUSE」ボタンは、レイアウト画面では、一見、RichTextBoxコントロールの中に含まれているように見えます。しかし、これらはRichTextBoxコントロールの上に重なっているだけです。XAMLコードから、RichTextBoxコントロールの外にあることが分かります（リスト3、（1）（2））。このようにRichTextBoxコントロール外にレイアウトしておくと、「全て印刷」を実行しても、印刷されることはありません。

リスト3: 完成したXAMLコード（MainPage.xaml）

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  d:DesignHeight="300" d:DesignWidth="400" Width="800" Height="600" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">








  このサンプルの実行には、
    Silverlight 4 プラグインが必要です。
 
  Silverlight 4では、任意のオブジェクトを指定しての印刷が可能です。
   
    印刷する場合は、
    ビデオを一時停止 してください。
 
 
   
     
        Height="180" HorizontalAlignment="Left" Margin="0,10,0,0" x:Name="MediaElement1" VerticalAlignment="Top" Width="240" AutoPlay="True" Source="WMV/dougo320.wmv"/>
   
   
      Margin="260,-190,0,0" x:Name="DataGrid1" Width="480" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" VerticalAlignment="Top"/>
   
 


（1）
（2）





以上の編集作業後のXAMLデザイン画面は、図7のようになります。

前掲の図7では、MediaElementのレイアウト位置が上にずれているように見えますが、Blendを起動して表示すると、文字には重なっていないことが分かります (図8)。VS 2010のSolution Explorer内のMainPage.xamlを右クリックして表示されるメニューから、「Open in Expression Blend」を選択して、Expression Blendを起動して確認してみるとよいでしょう。