Bagikan melalui

Cara: Menghubungkan ke Koleksi dan Menampilkan Informasi Berdasarkan Pilihan

Dalam skenario master-detail sederhana, Anda memiliki ItemsControl terkait data seperti ListBox. Berdasarkan pilihan pengguna, Anda menampilkan informasi selengkapnya tentang item terpilih. Contoh ini menunjukkan cara menerapkan skenario ini.

Contoh

Dalam contoh ini, People adalah kelas ObservableCollection<T> dari Person. Kelas ini Person berisi tiga properti: FirstName, LastName, dan HomeTown, semua jenis 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>

Penggunaan ContentControl berikut ini DataTemplate yang menentukan bagaimana informasi Person disajikan:

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

Berikut ini adalah cuplikan layar dari apa yang dihasilkan contoh. ContentControl menunjukkan properti lain dari orang yang dipilih.

Pengikatan ke koleksi

Dua hal yang perlu diperhatikan dalam contoh ini adalah:

  1. ListBox dan ContentControl mengikat ke sumber yang sama. Properti dari kedua penautan Path tidak ditentukan karena kedua kontrol terhubung dengan seluruh objek dalam koleksi.

  2. Anda harus mengatur properti IsSynchronizedWithCurrentItem menjadi true agar ini berfungsi. Mengatur properti ini memastikan bahwa item yang dipilih selalu diatur sebagai CurrentItem. Atau, jika ListBox mendapatkannya data dari CollectionViewSource, ia menyinkronkan pilihan dan mata uang secara otomatis.

Perhatikan bahwa Person kelas mengambil alih ToString metode dengan cara berikut. Secara bawaan, ListBox memanggil ToString dan menampilkan representasi string dari setiap objek dalam koleksi yang telah terikat. Itulah sebabnya masing-masing Person muncul sebagai nama depan di ListBox.

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

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

Lihat juga

  • Last updated on