방법: 선택에 따라 수집 및 표시 정보에 바인딩

간단한 마스터-세부 시나리오에서는 와 같은 데이터 ItemsControl 바인딩이 ListBox 있습니다. 사용자 선택에 따라 선택한 항목에 대한 자세한 정보를 표시합니다. 이 예제에서는 이 시나리오를 구현하는 방법을 보여줍니다.

예제

이 예제에서 PeopleObservableCollection<T> Person 클래스의 입니다. 이 클래스에는 , 및 의 Person 세 가지 FirstName LastName 속성이 HomeTown 포함됩니다. 모든 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 정보를 DataTemplate 표시 하는 방법을 정의 하는 다음을 사용 Person 합니다.

<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 선택한 사람의 다른 속성이 표시됩니다.

컬렉션에 바인딩

이 예제에서 알 수 있는 두 가지는 다음과 같습니다.

  1. ListBox및 는 동일한 ContentControl 소스에 바인딩합니다. Path두 컨트롤이 모두 전체 컬렉션 개체에 바인딩되므로 두 바인딩의 속성이 모두 지정되지 않습니다.

  2. 이 작업을 수행하려면 속성을 로 설정해야 IsSynchronizedWithCurrentItem true 합니다. 이 속성을 설정하면 선택한 항목이 항상 로 CurrentItem 설정됩니다. 또는 에서 데이터를 가져오는 경우 ListBox CollectionViewSource 선택 영역과 통화를 자동으로 동기화합니다.

Person클래스는 다음과 같은 방법으로 ToString 메서드를 재정의합니다. 기본적으로 호출 ListBox ToString 하 고 바인딩된 컬렉션에서 각 개체의 문자열 표현을 표시 합니다. 따라서 각 가 Person 에 이름으로 ListBox 표시됩니다.

public override string ToString()
{
    return firstname.ToString();
}
Public Overrides Function ToString() As String
    Return Me._firstname.ToString
End Function

추가 정보