Cómo: Enlazar a una colección y mostrar información basada en la selección

  • Artículo

En un escenario sencillo maestro-detalle, tiene un elemento ItemsControl enlazado a datos, como ListBox. En función de la selección del usuario, se muestra más información sobre el elemento seleccionado. En este ejemplo se muestra cómo implementar este escenario.

Ejemplo

En este ejemplo, People es un elemento ObservableCollection<T> de las clases Person. Esta clase Person contiene tres propiedades: FirstName, LastName y HomeTown, todas del tipo 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 usa el siguiente elemento DataTemplate, que define cómo se presenta la información de 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>

A continuación se muestra una captura de pantalla de lo que produce el ejemplo. ContentControl muestra las demás propiedades de la persona seleccionada.

Enlace a una colección

Los dos aspectos que se deben observar en este ejemplo son los siguientes:

  1. ListBox y ContentControl se enlazan al mismo origen. Las propiedades Path de ambos enlaces no se especifican porque ambos controles se enlazan a todo el objeto de la colección.

  2. Debe establecer la propiedad IsSynchronizedWithCurrentItem en true para que funcione. Al establecer esta propiedad, se garantiza que el elemento seleccionado siempre se establezca como CurrentItem. Como alternativa, si ListBox obtiene los datos de CollectionViewSource, sincroniza automáticamente la selección y la moneda.

Tenga en cuenta que la clase Person invalida el método ToString de la siguiente manera. De manera predeterminada, ListBox llama a ToString y muestra una representación de cadena de cada objeto de la colección enlazada. Por eso cada Person aparece como un nombre en ListBox.

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

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

Vea también