TransitionEffectを使う、特殊効果を伴ったコントロールの表示（前編）

DataGridとDataPagerの関連付け

DataGridとDataPagerを関連付けます。DataPagerコントロールを選択し、[共通]を展開して表示されるSourceプロパティの「詳細プロパティ」アイコンをクリックします（図9）。

表示されるメニューから「データバインドの適用」を選択します。「ソース」にElementName→PersonalInfo_DataGridと選択します（図10）。

次に「パス」にItemsSourceを選択します（図11）。

[その他]を展開して表示されるPageSizeプロパティに5と指定します。1ページに表示されるデータ件数が5となります。

以上を設定して書き出されるXAMLコードはリスト8のようになります。

リスト8(TransitionEffectElementShow.xaml)

（１）<sdk:DataPager>要素のSourceプロパティに「データバインドの適用」で設定した値が、
Source="{Binding ElementName=PersonalInfo_DataGrid, Path=ItemsSource}"
のように記述されています。PageSizeプロパティには5が指定されています。
<Canvas x:Name="LayoutRoot" Background="White">
  <ListBox Height="443" HorizontalAlignment="Left" x:Name="Image_ListBox" VerticalAlignment="Top" Width="647" ItemsPanel="{StaticResource WrapPanelListBox}" ItemTemplate="{StaticResource ListBoxItemTemplate}" Opacity="0" />
  <StackPanel Height="441" HorizontalAlignment="Left" x:Name="DataGrid_StackPanel" VerticalAlignment="Top" Width="644">
    <sdk:DataPager Height="34" x:Name="DataPager1" PageSize="5" Width="570" Source="{Binding ElementName=PersonalInfo_DataGrid, Path=ItemsSource}" />■（１）
    <sdk:DataGrid AutoGenerateColumns="False" Height="Auto" x:Name="PersonalInfo_DataGrid" Width="571">
      <sdk:DataGrid.Columns>
        <sdk:DataGridTextColumn  CanUserSort="True" Header="氏名" Width="Auto" Binding="{Binding 氏名}"/>
        <sdk:DataGridTextColumn  CanUserSort="True" Header="年齢" Width="Auto" Binding="{Binding 年齢}"/>
        <sdk:DataGridTextColumn  CanUserSort="True" Header="住所" Width="Auto" Binding="{Binding 住所}"/>
        <sdk:DataGridTextColumn  CanUserSort="True" Header="勤務先" Width="Auto" Binding="{Binding 勤務先}"/>
      </sdk:DataGrid.Columns>
    </sdk:DataGrid>
  </StackPanel>
</Canvas>

TransitionEffectElementShow.xaml.vb内、にDataGridにデータをバインドするコードを記述します（リスト9）。

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

リスト9　(TransitionEffectElementShow.xaml.vb)

DataGridに関する箇所のみの解説です。
Option Strict On
Imports System.Xml.Linq

グルーピングやページングを実装するためのクラスを提供する、PagedCollectionViewクラスを使うため、このクラスの含まれるSystem.Windows.Data名前空間をインポートします。
Imports System.Windows.Data

PersonalInfoクラス内に、「氏名、年齢、住所、勤務先」の文字列型のプロパティを定義しておきます。
Public Class PersonalInfo
  Property 氏名 As String
  Property 年齢 As String
  Property 住所 As String
  Property 勤務先 As String
End Class

～コード略～
■TransitionEffectElementShowユーザーコントロールが読み込まれた時の処理
DataGridにXMLデータをバインドするDataGridShowプロシージャを実行します。
  Private Sub TransitionEffectElementShow_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
    ImageShow()
    DataGridShow()
  End Sub

■DataGridにXMLデータをバインドする処理
PersonalInfoクラスの新しいリストであるmyPersonalInfoを宣言します。
XElement.LoadメソッドでXML文書ファイル(sampleData.xml)を読み込みます。
読み込んだXML文書から、<情報>要素を選択するクエリを定義します。
クエリ(query)を実行します。クエリコレクション内を変数resultで反復処理しながら以下の処理を実行します。
Addメソッドで、PersonalInfoクラスのプロパティ(「氏名、年齢、住所、勤務先」)に、XMLの要素 (<氏名>、<年齢>、<住所>、<勤務先>)の値を追加します。このプロパティの値が、XAML内の<sdk:DataGridTextColumn>要素のBindingプロパティにバインドされます。 myPersonalInfoオブジェクトで初期化された、新しいPagedCollectionViewクラスのオブジェクトmyPagedCollectionViewを生成します。DataGridコントロールのItemsSourceプロパティに、myPagedCollectionViewオブジェクトを指定します。これで、XMLデータがDataGridにバインドされ、DataPagerと関連付いてページングが可能になります。
  Private Sub DataGridShow()
    Dim myPersonalInfo As New List(Of PersonalInfo)
    Dim xmldoc2 As XElement = XElement.Load("sampleData.xml")
    Dim myPagedCollectionView As PagedCollectionView = Nothing
    Dim query = From c In xmldoc2.Descendants("情報") Select c
  
    For Each result In query
      With myPersonalInfo
        .Add(New PersonalInfo With {.氏名 = result.Element("氏名").Value,
                                    .年齢 = result.Element("年齢").Value,
                                    .住所 = result.Element("住所").Value,
                                    .勤務先 = result.Element("勤務先").Value})
      End With
      myPagedCollectionView = New PagedCollectionView(myPersonalInfo)
    Next
    PersonalInfo_DataGrid.ItemsSource = myPagedCollectionView
  End Sub
  ～ListBoxに画像を表示させる処理略(リスト5参照)～

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

前編はここまでです。後編の次回は、RichTextBoxコントロールの設定と、前編で設定したListBox、DataGrid、と次回のRichTextBoxコントロールを、Blend4上からTransitionEffectを使って、特殊効果を与えながら、切り替え表示する方法を解説します。