Cómo: Enlazar a una colección y mostrar información basada en la selección
TOC
Collapse the table of content
Expand the table of content

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

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.

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="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 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:

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

  2. 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 override string ToString()
{
    return firstname.ToString();
}


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

Adiciones de comunidad

AGREGAR
Mostrar:
© 2016 Microsoft