Compartilhar via

Como associar a uma coleção e exibir informações com base na seleção

  • Artigo

Em um cenário simples de mestre/detalhe, você tem um ItemsControl associado a dados, como um ListBox. Com base na seleção do usuário, você exibe mais informações sobre o item selecionado. Este exemplo mostra como implementar esse cenário.

Exemplo

Neste exemplo, People é um ObservableCollection<T> das classes Person. Esta classe Person contém três propriedades: FirstName, LastNamee HomeTown, todas do 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>

O ContentControl usa o seguinte DataTemplate que define como as informações de um Person são apresentadas:

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

Veja a seguir uma captura de tela do que o exemplo produz. O ContentControl mostra as outras propriedades da pessoa selecionada.

associação Associação a uma coleção

Os dois itens a serem notados neste exemplo são:

  1. O ListBox e o ContentControl ligam à mesma origem. As propriedades Path de ambas as associações não são especificadas porque ambos os controles estão associados ao objeto da coleção inteira.

  2. Você deve definir a propriedade IsSynchronizedWithCurrentItem para true para que isso funcione. Definir essa propriedade garante que o item selecionado esteja sempre definido como o CurrentItem. Como alternativa, se o ListBox receber dados de um CollectionViewSource, a seleção e a moeda serão sincronizadas automaticamente.

Observe que a classe Person substitui o método ToString da seguinte maneira. Por padrão, o ListBox chama ToString e exibe uma representação de cadeia de caracteres de cada objeto na coleção associada. É por isso que cada Person aparece como um primeiro nome no ListBox.

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

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

Consulte também