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

Artículo
08/24/2008

Actualización: noviembre 2007

En un escenario principal-detalle simple, hay un objeto ItemsControl enlazado a datos, como un control ListBox. Basándose en 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 una colección ObservableCollection<T> de clases Person. Esta clase Person contiene tres propiedades: FirstName, LastName y HomeTown, todas de tipo 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>

ContentControl utiliza la plantilla de datos DataTemplate siguiente, 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 el ejemplo genera. ContentControl muestra las demás propiedades de la persona seleccionada.

Enlace a una colección

Los dos puntos importantes de este ejemplo son:

ListBox y ContentControl se enlazan al mismo origen. No se especifican las propiedades Path de ambos enlaces porque los dos controles se enlazan al objeto de colección completo.
Para que funcione, debe establecer la propiedad IsSynchronizedWithCurrentItem en true. Al establecer esta propiedad se garantiza que el elemento seleccionado se establezca siempre como CurrentItem. Como alternativa, si el control ListBox obtiene sus datos de un objeto CollectionViewSource, sincronizará automáticamente la selección y la actualización.

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

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

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

Para obtener el ejemplo completo, vea Ejemplo Binding to a Collection.

Vea también

Compartir a través de

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

Ejemplo

Vea también

Tareas

Conceptos

Otros recursos

Recursos adicionales