Udostępnij za pośrednictwem

Jak: wiązać się z kolekcją i wyświetlać informacje na podstawie wyboru

  • Artykuł

W prostym scenariuszu szczegółów wzorca masz ItemsControl związane z danymi, takie jak ListBox. Na podstawie wyboru użytkownika wyświetlasz więcej informacji o wybranym elemencie. W tym przykładzie pokazano, jak zaimplementować ten scenariusz.

Przykład

W tym przykładzie People to ObservableCollection<T> klasy Person. Ta klasa Person zawiera trzy właściwości: FirstName, LastNamei HomeTown, wszystkie typy 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>

W ContentControl używa się następujących DataTemplate, które określają sposób prezentowania informacji o 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>

Poniżej przedstawiono zrzut ekranu przedstawiający sposób tworzenia przykładu. ContentControl pokazuje inne właściwości wybranej osoby.

Powiązanie z kolekcją

Dwie kwestie, które należy zauważyć w tym przykładzie, to:

  1. ListBox i ContentControl są powiązane z tym samym źródłem. Nie określono właściwości Path obu powiązań, ponieważ obie kontrolki są powiązane z całym obiektem kolekcji.

  2. Należy ustawić właściwość IsSynchronizedWithCurrentItem na true, aby ta wartość działała. Ustawienie tej właściwości gwarantuje, że wybrany element jest zawsze ustawiony jako CurrentItem. Alternatywnie, jeśli ListBox pobiera dane z CollectionViewSource, synchronizuje wybór i walutę automatycznie.

Należy pamiętać, że klasa Person zastępuje metodę ToString w następujący sposób. Domyślnie ListBox wywołuje ToString i wyświetla reprezentację ciągu każdego obiektu w powiązanej kolekcji. Dlatego każda Person jest wyświetlana jako imię w ListBox.

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

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

Zobacz też