Comment : effectuer une liaison à une collection et afficher des informations basées sur la sélectionHow to: Bind to a Collection and Display Information Based on Selection

Dans un scénario maître-détail simple, vous avez un ItemsControl lié aux données, tel qu’une ListBox.In a simple master-detail scenario, you have a data-bound ItemsControl such as a ListBox. En fonction de la sélection de l’utilisateur, vous pouvez afficher plus d’informations sur l’élément sélectionné.Based on user selection, you display more information about the selected item. Cet exemple montre comment implémenter ce scénario.This example shows how to implement this scenario.

ExempleExample

Dans cet exemple, People est une ObservableCollection<T> de Person classes.In this example, People is an ObservableCollection<T> of Person classes. Cette classe Person contient trois propriétés : FirstName, LastNameet HomeTown, tout type 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>

L' ContentControl utilise les DataTemplate suivantes qui définissent le mode de présentation des informations d’un Person :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>

La capture d’écran suivante illustre ce que produit l’exemple.The following is a screenshot of what the example produces. Le ContentControl affiche les autres propriétés de la personne sélectionnée.The ContentControl shows the other properties of the person selected.

Liaison à une collectionBinding to a collection

Les deux points à noter dans cet exemple sont les suivants :The two things to notice in this example are:

  1. Le ListBox et le ContentControl être liés à la même source.The ListBox and the ContentControl bind to the same source. Les propriétés Path des deux liaisons ne sont pas spécifiées, car les deux contrôles sont en liaison avec l’objet de collection entier.The Path properties of both bindings are not specified because both controls are binding to the entire collection object.

  2. Vous devez définir la propriété IsSynchronizedWithCurrentItem sur true pour que cela fonctionne.You must set the IsSynchronizedWithCurrentItem property to true for this to work. La définition de cette propriété permet de s’assurer que l’élément sélectionné est toujours défini en tant que CurrentItem.Setting this property ensures that the selected item is always set as the CurrentItem. Sinon, si le ListBox obtient des données à partir d’un CollectionViewSource, il synchronise automatiquement la sélection et la devise.Alternatively, if the ListBox gets it data from a CollectionViewSource, it synchronizes selection and currency automatically.

Notez que la classe Person remplace la méthode ToString de la façon suivante.Note that the Person class overrides the ToString method the following way. Par défaut, le ListBox appelle ToString et affiche une représentation sous forme de chaîne de chaque objet de la collection liée.By default, the ListBox calls ToString and displays a string representation of each object in the bound collection. C’est pourquoi chaque Person apparaît en tant que prénom dans le 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

Voir aussiSee also