Sdílet prostřednictvím

Postupy: Vytvoření vazby k kolekci a zobrazení informací na základě výběru

  • Článek

Ve scénáři master-detail máte například data vázaná na ItemsControl, například ListBox. Na základě výběru uživatele zobrazíte další informace o vybrané položce. Tento příklad ukazuje, jak tento scénář implementovat.

Příklad

V tomto příkladu je PeopleObservableCollection<T> tříd Person. Tato třída Person obsahuje tři vlastnosti: FirstName, LastNamea HomeTown, všechny typy 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 používá následující DataTemplate definující způsob zobrazení informací 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>

Následuje snímek obrazovky, který ukazuje výstup příkladu. ContentControl zobrazí další vlastnosti vybrané osoby.

Vazba na kolekci

V tomto příkladu si můžete všimnout těchto dvou věcí:

  1. ListBox a ContentControl se vážou ke stejnému zdroji. Path vlastnosti obou propojení nejsou zadány, protože oba ovládací prvky jsou připojeny na celý objekt kolekce.

  2. Aby to fungovalo, musíte nastavit vlastnost IsSynchronizedWithCurrentItem na true. Nastavení této vlastnosti zajišťuje, že vybraná položka je vždy nastavena jako CurrentItem. Případně, pokud ListBox načte data z CollectionViewSource, synchronizuje automaticky výběr a měnu.

Všimněte si, že třída Person přepíše metodu ToString následujícím způsobem. Ve výchozím nastavení ListBox volá ToString a zobrazí řetězcovou reprezentaci každého objektu v vázané kolekci. Proto se každý Person objevuje jako křestní jméno v ListBox.

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

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

Viz také