方法: コレクションにバインドして選択に基づく情報を表示するHow to: Bind to a Collection and Display Information Based on Selection

簡単なマスター詳細シナリオでは、ListBox などのデータ バインドされた ItemsControl があります。In a simple master-detail scenario, you have a data-bound ItemsControl such as a ListBox. ユーザーの選択に基づいて、選択された項目に関する詳細情報を表示します。Based on user selection, you display more information about the selected item. この例では、このシナリオを実装する方法を示します。This example shows how to implement this scenario.

例Example

この例の People は、Person クラスの ObservableCollection<T> です。In this example, People is an ObservableCollection<T> of Person classes. この Person クラスには FirstName、LastName、HomeTown の 3 つのプロパティが含まれ、すべて string 型です。This Person class contains three properties: FirstName, LastName, and HomeTown, all of type string.

<Window x:Class="SDKSample.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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 が使用されます。The ContentControl uses the following DataTemplate that defines how the information of a Person is presented:

<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>

次に、この例で生成される内容のスクリーンショットを示します。The following is a screenshot of what the example produces. ContentControl には、選択されたユーザーの他のプロパティが表示されます。The ContentControl shows the other properties of the person selected.

コレクションへのバインディングBinding to a collection

この例では、次の 2 つの点に注意してください。The two things to notice in this example are:

  1. ListBox と ContentControl は同じソースにバインドされます。The ListBox and the ContentControl bind to the same source. どちらのコントロールもコレクション オブジェクト全体にバインドされるため、両方のバインディングの Path プロパティは指定されません。The Path properties of both bindings are not specified because both controls are binding to the entire collection object.

  2. これを機能させるには、IsSynchronizedWithCurrentItem プロパティを true に設定する必要があります。You must set the IsSynchronizedWithCurrentItem property to true for this to work. このプロパティを設定すると、選択された項目が常に CurrentItem として設定されます。Setting this property ensures that the selected item is always set as the CurrentItem. または、ListBox で CollectionViewSource からデータが取得される場合は、選択と通貨が自動的に同期されます。Alternatively, if the ListBox gets it data from a CollectionViewSource, it synchronizes selection and currency automatically.

Person クラスでは、次のように ToString メソッドがオーバーライドされていることに注意してください。Note that the Person class overrides the ToString method the following way. 既定では、ListBox によって ToString が呼び出され、バインドされたコレクション内の各オブジェクトの文字列形式が表示されます。By default, the ListBox calls ToString and displays a string representation of each object in the bound collection. そのため、各 Person が ListBox の名として表示されます。That is why each Person appears as a first name in the ListBox.

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

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

関連項目See also