Aracılığıyla paylaş

Nasıl yapılır: Koleksiyona Bağlama ve Seçime Göre Bilgi Görüntüleme

  • Makale

Basit bir ana ayrıntı senaryosunda, ListBoxgibi veriye bağlı bir ItemsControl vardır. Kullanıcı seçimine bağlı olarak, seçili öğe hakkında daha fazla bilgi görüntülersiniz. Bu örnekte bu senaryo nasıl uygulanacak gösterilmektedir.

Örnek

Bu örnekte People, Person sınıfların ObservableCollection<T>. Bu Person sınıfı üç özellik içerir: FirstName, LastNameve HomeTown, türü 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, Person bilgilerinin nasıl sunulduğunu tanımlayan aşağıdaki DataTemplate kullanır:

<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şağıda, örneğin ortaya çıkardığı sonuçların ekran görüntüsü verilmiştir. ContentControl, seçilen kişinin diğer özelliklerini gösterir.

Koleksiyona bağlama

Bu örnekte dikkate almak gereken iki şey şunlardır:

  1. ListBox ve ContentControl aynı kaynağa bağlanır. Her iki denetim de koleksiyon nesnesinin tamamına bağlandığından her iki bağlamanın Path özellikleri belirtilmez.

  2. Bunun çalışması için IsSynchronizedWithCurrentItem özelliğini true olarak ayarlamanız gerekir. Bu özelliğin ayarlanması, seçili öğenin her zaman CurrentItemolarak ayarlanmasını sağlar. Alternatif olarak, ListBox verilerini bir CollectionViewSource'den alıyorsa, seçimi ve para birimini otomatik olarak senkronize eder.

Person sınıfının ToString yöntemini aşağıdaki şekilde geçersiz kıldığını unutmayın. Varsayılan olarak, ListBoxToString çağırır ve ilişkili koleksiyondaki her nesnenin dize gösterimini görüntüler. Bu nedenle her PersonListBoxiçinde bir ad olarak görünür.

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

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

Ayrıca bkz.