Freigeben über

Vorgehensweise: Binden an eine Sammlung und Anzeigen von Informationen auf Grundlage der Auswahl

  • Artikel

In einem einfachen Master-Detail-Szenario haben Sie ein datengebundenes ItemsControl-Element wie ein ListBox-Element. Basierend auf der Benutzerauswahl zeigen Sie weitere Informationen zum ausgewählten Element an. In diesem Beispiel wird gezeigt, wie Sie dieses Szenario implementieren.

Beispiel

In diesem Beispiel ist People ein ObservableCollection<T>-Element von Person-Klassen. Diese Person-Klasse enthält drei Eigenschaften: FirstName, LastNameund HomeTown, alle vom Typ 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>

Das ContentControl-Element verwendet das folgende DataTemplate-Element, das definiert, wie die Informationen eines Person-Elements dargestellt werden:

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

Dies ist ein Screenshot des Ergebnisses des Beispiels. Das ContentControl-Element zeigt andere Eigenschaften der ausgewählten Person an.

Bindung an eine Sammlung

Die beiden Punkte, die Sie in diesem Beispiel beachten müssen, sind:

  1. Die ListBox und die ContentControl sind an dieselbe Quelle gebunden. Die Path-Eigenschaften beider Bindungen werden nicht angegeben, da beide Steuerelemente an das gesamte Sammlungsobjekt gebunden sind.

  2. Sie müssen die eigenschaft IsSynchronizedWithCurrentItem auf true festlegen, damit dies funktioniert. Durch Festlegen dieser Eigenschaft wird sichergestellt, dass das ausgewählte Element immer als CurrentItemfestgelegt ist. Wenn alternativ ListBox die Daten von einem CollectionViewSource-Element abruft, werden Auswahl und Währung automatisch synchronisiert.

Beachten Sie, dass die Person Klasse die ToString Methode auf die folgende Weise außer Kraft setzt. Standardmäßig ruft das ListBox-Steuerelement die ToString-Methode auf und zeigt eine Zeichenfolgendarstellung jedes Objekts in der gebundenen Sammlung an. Aus diesem Grund erscheint jede Person als Vorname in der ListBox.

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

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

Weitere Informationen