Compartir a través de

Cómo: Usar el patrón principal-detalle con datos jerárquicos

  • Artículo

En este ejemplo se muestra cómo implementar el escenario principal-detalle.

Ejemplo

En este ejemplo, LeagueList es una colección de Leagues. Cada League tiene Name y una colección de Divisions, y cada Division tiene un nombre y una colección de Teams. Cada Team tiene un nombre de equipo.

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:src="clr-namespace:SDKSample"
  Width="400" Height="180"
  Title="Master-Detail Binding" 
  Background="Silver">
  <Window.Resources>
    <src:LeagueList x:Key="MyList"/>

  <DockPanel DataContext="{Binding Source={StaticResource MyList}}">
    <StackPanel>
      <Label>My Soccer Leagues</Label>
      <ListBox ItemsSource="{Binding}" DisplayMemberPath="Name"
               IsSynchronizedWithCurrentItem="true"/>
    </StackPanel>

    <StackPanel>
      <Label Content="{Binding Path=Name}"/>
      <ListBox ItemsSource="{Binding Path=Divisions}" DisplayMemberPath="Name"
               IsSynchronizedWithCurrentItem="true"/>
    </StackPanel>

    <StackPanel>
      <Label Content="{Binding Path=Divisions/Name}"/>
      <ListBox DisplayMemberPath="Name" ItemsSource="{Binding Path=Divisions/Teams}"/>
    </StackPanel>
  </DockPanel>
</Window>

La siguiente captura de pantalla muestra el ejemplo. El objeto DivisionsListBox realiza automáticamente un seguimiento de las selecciones en LeaguesListBox y muestra los datos correspondientes. El objeto TeamsListBox realiza un seguimiento de las selecciones de los otros dos controles ListBox.

Captura de pantalla que muestra un ejemplo de escenario principal-detalle.

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

  1. Los tres controles ListBox se enlazan al mismo origen. La propiedad Path del enlace se establece para especificar qué nivel de datos quiere que muestre ListBox.

  2. Debe establecer la propiedad IsSynchronizedWithCurrentItem en true en los controles ListBox de los que se realiza el seguimiento de la selección. 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.

La técnica es ligeramente diferente cuando se usan datos XML. Por ejemplo, consulte Uso del patrón principal-detalle con datos XML jerárquicos.

Vea también