Поделиться через

Как привязать к коллекции и отображать информацию на основе выбора

  • Статья

В простом сценарии с главной детализацией у вас есть привязанные к данным ItemsControl, такие как ListBox. На основе выбора пользователя вы отображаете дополнительные сведения о выбранном элементе. В этом примере показано, как реализовать этот сценарий.

Пример

В этом примере People — это ObservableCollection<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

См. также