方法 : コレクションにバインドして選択に基づく情報を表示する

[アーティクル]
08/09/2011

簡単なマスター詳細シナリオには、ListBox のようなデータバインドされた ItemsControl があります。ユーザー選択に基づいて、選択された項目に関する情報をさらに表示します。このシナリオを実装する方法を次の例に示します。

使用例

この例では、People は Person クラスの ObservableCollection<T> です。この Person クラスには、FirstName、LastName、および HomeTown という 3 つのプロパティが含まれ、すべて string 型です。

<Window x:Class="SDKSample.Window1"
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:SDKSample"
  Title="Binding to a Collection"
  SizeToContent="WidthAndHeight">
  <Window.Resources>
    <local:People x:Key="MyFriends"/>


...


  </Window.Resources>

  <StackPanel>
    <TextBlock FontFamily="Verdana" FontSize="11"
               Margin="5,15,0,10" FontWeight="Bold">My Friends:</TextBlock>
    <ListBox Width="200" IsSynchronizedWithCurrentItem="True"
             ItemsSource="{Binding Source={StaticResource MyFriends}}"/>
    <TextBlock FontFamily="Verdana" FontSize="11"
               Margin="5,15,0,5" FontWeight="Bold">Information:</TextBlock>
    <ContentControl Content="{Binding Source={StaticResource MyFriends}}"
                    ContentTemplate="{StaticResource DetailTemplate}"/>
  </StackPanel>
</Window>

ContentControl は、Person の情報の提示方法を定義する、次のような DataTemplate を使用します。

<DataTemplate x:Key="DetailTemplate">
  <Border Width="300" Height="100" Margin="20"
          BorderBrush="Aqua" BorderThickness="1" Padding="8">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>
      <TextBlock Grid.Row="0" Grid.Column="0" Text="First Name:"/>
      <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=FirstName}"/>
      <TextBlock Grid.Row="1" Grid.Column="0" Text="Last Name:"/>
      <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=LastName}"/>
      <TextBlock Grid.Row="2" Grid.Column="0" Text="Home Town:"/>
      <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=HomeTown}"/>
    </Grid>
  </Border>
</DataTemplate>

この例が生成するスクリーンショットを次に示します。 ContentControl は、選択されている人の他のプロパティを示します。

コレクションへのバインディング

この例では、次の 2 つの点に注意する必要があります。

ListBox と ContentControl は、同じソースにバインドしています。どちらのコントロールもコレクションオブジェクト全体にバインドしているので、どちらのバインディングの Path プロパティも指定されていません。
この例が動作するには、IsSynchronizedWithCurrentItem プロパティを true に設定する必要があります。このプロパティを設定すると、選択されている項目は常に CurrentItem として設定されます。または、ListBox が CollectionViewSource からデータを取得する場合は、選択と現在の項目が自動的に同期されます。

Person クラスが次のように ToString メソッドをオーバーライドすることに注意してください。既定では、ListBox は ToString を呼び出して、バインドされたコレクション内の各オブジェクトの文字列表現を表示します。これにより、各 Person は ListBox の名前として表示されます。

Public Overrides Function ToString() As String
    Return Me._firstname.ToString
End Function

public override string ToString()
{
    return firstname.ToString();
}

参照

方法 : コレクションにバインドして選択に基づく情報を表示する

使用例

参照

処理手順

概念

その他の技術情報

その他のリソース