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

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

リスト5　(TransitionEffectElementShow.xaml.vb)

Option Strict On

XMLをLINQで処理するためのクラスの含まれる、System.Xml.Linq名前空間をインポートします。
Imports System.Xml.Linq
ImageInfoというクラス内に「画像名」という文字列型のプロパティを定義します。
Public Class ImageInfo
  Property 画像名 As String
End Class
～コード略～

■TransitionEffectElementShowユーザーコントロールが読み込まれた時の処理
ListBoxに画像の一覧を表示する、ImageShowプロシージャを実行します。
  Private Sub TransitionEffectElementShow_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
    ImageShow()
  End Sub

■ListBoxに画像の一覧を表示する処理
XElement.LoadメソッドでXML文書ファイル(Photo.xml)を読み込みます。
読み込んだXML文書から<画像名>要素を選択するクエリを定義します。
ImageInfoクラスの新しいリストとして作成するmyImageInfoを宣言します。
クエリ(imageQuery)を実行します。クエリコレクション内を変数resultで反復処理しながら以下の処理を実行します。
Addメソッドで、ImageInfoクラスのプロパティ(「画像名」)に、XMLの要素 (<画像名>)の値を追加します。このプロパティの値が、XAML内の<Image>要素のSourceプロパティにバインドされます。
Image_ListBoxコントロールのItemSourceプロパティに、myImageInfoオブジェクトを指定します。
これで、ListBoxに画像の一覧が複数行に渡って表示されます。

  Private Sub ImageShow()
      Dim xmldoc3 As XElement = XElement.Load("Photo.xml")
    Dim imageQuery = From c In xmldoc3.Descendants("画像名") Select c
    Dim myImageInfo As New List(Of ImageInfo)
    For Each result In imageQuery
      myImageInfo.Add(New ImageInfo With {.画像名 = "Image/" & result.Value})
    Next
    Image_ListBox.ItemsSource = myImageInfo
  End Sub
～コード略～

TransitionEffectElementShowユーザーコントロールの動作確認

TransitionEffectElementShowユーザーコントロールに配置したListBoxに、画像の一覧が表示されるかどうかを確認します。VS2010メニューの「デバッグ(D)／デバッグ開始(S)」では、MainPage.xamlの内容が実行され、TransitionEffectElementShow.xamlは実行されません。そこで、動作確認のために、MainPage.xaml内にTransitionEffectElementShow.xamlを取り込んでおきます。MainPage.xamlの、要素のWidthに800、Heightに600と指定しておきます。

まずlocalという名前空間を、MainPage.xaml内の要素内で定義します。xmlns:local=””と入力すると、名前空間の値の一覧が表示されますので、現在作成しているプロジェクト名を選択します（図4）。

次に、要素内に

  <Grid x:Name="LayoutRoot" Background="White">
    <local:TransitionEffectElementShow/>
  </Grid>

のように記述します。するとデザイン画面内にListBoxコントロールに画像が取り込まれて表示されます。表示されない場合は、「ソリューションのビルド」を実行してみてください。それでも表示されない場合は、コードが間違っているということですので、確認します。

「デバッグ(D)／デバッグ開始(S)」で実行して動作を確認しておきましょう。

これでListBoxの設定は一応完了です、次にTransitionEffectElementShow.xaml内にDataPagerとDataGridコントロールを配置します。そこで、先にTransitionEffectElementShow.xaml内に配置した、ListBoxコントロールのOpacityプロパティに0を指定して透明化しておきます。透明化しても画面上では薄いグレーの枠線は表示されたままになります。

DataPagerとDataGridコントロールの設定

DataPagerとDataGridコントロールはStackPanelコントロールの子要素として配置します。各コントロールのx:Nameは図6を参照してください。StackPanelコントロールを配置し、OrientationプロパティにVertical（デフォルト）を指定します。その中にツールボックスからDataPagerとDataGridコントロールをドラッグ&ドロップします（図6）。

書き出されるコードはリスト6のようになります。

リスト6　書き出されたコード(TransitionEffectElementShow.xaml)

（１）<StackPanel> 要素内に<sdk:DataPager>と<sdk:DataGrid>要素が記述されています。<StackPanel>要素のOrientationプロパティは、デフォルトのVerticalを指定しているため記述はされていません。
<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"/>
    <sdk:DataGrid AutoGenerateColumns="False" Height="359" x:Name="PersonalInfo_DataGrid" Width="571" />
  </StackPanel>
</Canvas>

次にDataGridを選択し、プロパティの[共通]内のColumnsの横にある[…]ボタンをクリックします。「コレクションエディター」が起動しますので、「項目の選択(S)」からDataGridTextColumnを選択し、[追加(A)]ボタンで4個追加します。追加したDataGridTextColumnの、[共通]を展開して表示されるHeaderプロパティに、DataGridTextColumnの上から順番に「氏名、年齢、住所、勤務先」と指定します（図7）。

図8のようにDataGridコントロールにヘッダが表示されます。書き出されるXAMLには不要なプロパティが追加されますので、最終的にはBindingプロパティを指定して、リスト7のようなコードにしてください。Bindingプロパティに指定する名称は、VBコード内のクラス内で定義するプロパティ名と同じである必要があります。

リスト7　書き出され編集したXAMLコード(TransitionEffectElementShow.xaml)

（１）<sdk:DataGridTextColumn>要素のBindingプロパティに、「氏名、年齢、住所、勤務先」を指定します。これらは手動で設定しています。
<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"/>
    <sdk:DataGrid AutoGenerateColumns="False" Height="359" 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>

DataGridコントロールを選択し、HeightプロパティにAutoを指定します。デザイン画面上ではヘッダだけのDataGridが表示されます。