ListBoxコントロールにデータをバインディングする - XAMLのXMLをバインディングする - WPF

WPFアプリケーションで、コントロールの要素にバインディングする方法を紹介します。

WPFアプリケーションを新規作成します。メインのフォーム(MainWindow.xaml)にListBoxを配置します。


MainWindow.xamlを以下の通りに記述します。

MainWindow.xaml

<Window x:Class="WpfBinding.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="MainWindow" Height="350" Width="525">

  <Window.Resources>
    <XmlDataProvider x:Key="Bird01">
      <x:XData>
        <Kind xmlns="">
          <Name>Penguin</Name>
          <Name>Duck</Name>
          <Name>Owl</Name>
          <Name>Pigion</Name>
        </Kind>
      </x:XData>
    </XmlDataProvider>
  </Window.Resources>

  <Grid>
    <ListBox Height="100" HorizontalAlignment="Left" Margin="12,12,0,0"
      Name="listBox1" VerticalAlignment="Top" Width="209" />
  </Grid>
</Window>

以下の部分がコントロールにバインドされるデータソースの定義になります。データソースはXmlDataProviderを用います。x:Keyにデータソースのキー名を入力します。今回は"Bird01"としました。
  <Window.Resources>
    <XmlDataProvider x:Key="Bird01">
      <x:XData>
        <Kind xmlns="">
          <Name>Penguin</Name>
          <Name>Duck</Name>
          <Name>Owl</Name>
          <Name>Pigion</Name>
        </Kind>
      </x:XData>
    </XmlDataProvider>
  </Window.Resources>

データのバインド

データソースの定義ができたので、コントロールにデータをバインドします。下記のListBoxのコード
<ListBox Height="100" HorizontalAlignment="Left" Margin="12,12,0,0"
  Name="listBox1" VerticalAlignment="Top" Width="209" />


<ListBox Height="100" HorizontalAlignment="Left" Margin="12,12,0,0"
  Name="listBox1" VerticalAlignment="Top" Width="209"
  ItemsSource="{Binding Source={StaticResource Bird01}} />
に書き換えます。(ItemsSource部分を追記します。)

XAMLを変更すると、デザイナ画面にデータソースの内容が表示されます。ただし、データソースの内容が1つの要素につながって表示されてしまいます。


アプリケーションを実行すると下図の結果となります。


データのバインドの修正

上記のコードではデータソースの内容が1つの要素にまとまってしまうため、意図した動作ではないため、コードを変更します。ListBoxのコードを下記の通りに変更します。
<ListBox Height="100" HorizontalAlignment="Left" Margin="12,12,0,0"
  Name="listBox1" VerticalAlignment="Top" Width="209"
  ItemsSource="{Binding Source={StaticResource Bird01}, XPath=/Kind/Name}"/>

"XPath=/Kind/Name" を追記します。これは要素のデータソースのXPathを指定します。データソースでは"<x:XData>"タグ内に"<Kind>"タグを記述しその中に"<Name>"タグを記述して要素を列挙しています。要素はNameタグ内に記載されます。XPathにはXData内のをルートとするXPathを記述するため、"XPath=/Kind/Name"と指定します。

XAMLを変更すると、デザイナ画面に要素が表示されます。今回はデータソースの1要素がListBoxの1要素に対応しています。


アプリケーション実行結果は下図の通りです。


ListBoxコントロールにデータのバインドができました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
掲載日: 2012-03-08
iPentec all rights reserverd.