Comment : effectuer une liaison à une collection et afficher des informations basées sur la sélection
Dans un scénario maître/détail simple, vous disposez d'un ItemsControl lié aux données, tel qu'un ListBox. Selon la sélection de l'utilisateur, vous affichez davantage d'informations sur l'élément sélectionné. Cet exemple indique comment implémenter ce scénario.
Exemple
Dans cet exemple, People est un ObservableCollection<T> de la classe Person. Cette classe Person contient trois propriétés : FirstName, LastName et HomeTown, de type string.
<Window x:Class="SDKSample.Window1"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>
Le ContentControl utilise le DataTemplate suivant qui définit comment les informations d'un Person sont présentées :
<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 l'exemple. ContentControl affiche toutes les autres propriétés de la personne sélectionnée.
.png "Liaison à une collection")
Les deux choses à remarquer dans cet exemple sont :
ListBox et ContentControl sont liés à la même source. Les propriétés Path des deux liaisons ne sont pas spécifiées car les deux contrôles créent une liaison à l'objet de collection tout entier.
Vous devez affecter la valeur true à la propriété IsSynchronizedWithCurrentItem pour que cela se produise. La définition de cette propriété garantit que l'élément sélectionné est toujours défini comme CurrentItem. Ou bien, si ListBox obtient ses données à partir de CollectionViewSource, celui-ci synchronise automatiquement la sélection et la devise.
Notez que la classe Person remplace la méthode ToString de la façon suivante. Par défaut, ListBox appelle ToString et affiche une représentation sous forme de chaîne de chaque objet dans la collection liée. C'est pourquoi chaque Person apparaît comme prénom dans le ListBox.
Public Overrides Function ToString() As String
Return Me._firstname.ToString
End Function
public override string ToString()
{
return firstname.ToString();
}
Voir aussi
Tâches
Comment : utiliser le modèle maître/détail avec des données hiérarchiques
Comment : utiliser le modèle maître/détail avec des données XML hiérarchiques
Concepts
Vue d'ensemble de la liaison de données
Vue d'ensemble des modèles de données