Memperbarui antarmuka pengguna saat koleksi berubah

  • 10 menit

Dalam pelajaran ini, pengguna akan memilih warna favorit. Warna yang tersedia tercantum dalam menu dropdown ( ComboBox kontrol). Pengguna memilih warna, dan menambahkannya ke favorit Anda dengan menekan tombol. Warna favorit ditampilkan di bawah ini. Memilih warna favorit juga menampilkan tombol yang memungkinkan pengguna menghapus warna yang dipilih dari favorit mereka.

Screenshot of sample databinding app running and displaying favorite colors.

Pertama, tambahkan kemampuan untuk memilih warna dari LotsOfColors koleksi, dan tambahkan ke daftar warna favorit.

1. Buat SelectedColor properti

Mari kita mulai dengan kode, dan kemudian kita akan bekerja dengan cara kita melalui UI.

Kami memerlukan cara untuk menentukan item mana (yaitu, instans ColorDescriptor kelas) yang dipilih pengguna di menu dropdown. Kontrol ComboBox memiliki SelectedItem properti, yang mendapatkan dan mengatur item yang saat ini dipilih. Jadi, kita dapat mengikat properti ini ke properti jenis ColorDescriptor dalam kode kita.

Buka ColorListLogic.cs dan tambahkan kode berikut:

private ColorDescriptor _selectedColor;

public ColorDescriptor SelectedColor
{
    get => _selectedColor;
    set => Set(ref _selectedColor, value);
}

Pola ini harus sudah tidak asing lagi sekarang. Ini adalah properti standar, dihiasi dengan INotifyPropertyChanged mekanisme, dengan bantuan ObservableObject kelas dasar.

2. Buat FavoriteColors daftar

Daftar menyimpan FavoriteColors warna yang dipilih pengguna untuk menjadi favorit mereka. Ini hanya properti sederhana.

public List<ColorDescriptor> FavoriteColors { get; } = 
    new List<ColorDescriptor>();

3. Tambahkan warna terpilih ke favorit

Menambahkan warna yang dipilih ke favorit terjadi dalam AddSelectedColorToFavorites metode .

public void AddSelectedColorToFavorites()
{
    FavoriteColors.Add(SelectedColor);
}

Asumsinya adalah bahwa ketika metode ini dipanggil, SelectedColor diisi dengan warna yang harus ditambahkan ke daftar favorit.

Dengan ini, kita sudah selesai dengan kode (untuk saat ini). Mari kita mengalihkan perhatian kita ke XAML.

4. Ubah menjadi ListBoxComboBox

Karena kita ingin memiliki daftar lengkap warna yang akan ditampilkan dalam dropdown (yang merupakan ComboBox kontrol), kita perlu mengubah XAML. Untungnya, keduanya ListBox dan ComboBox merupakan keturunan ItemsControl kontrol, dan mereka bekerja sama meskipun ada perbedaan dalam bagaimana mereka terlihat dan berperilaku. Yang harus kita lakukan adalah mengganti ListBox dengan ComboBox dalam file ColorList.xaml. Anda dapat menggunakan perintah Edit>Temukan dan Ganti>Ganti Cepat (CtrlL+H) untuk ini.

Screenshot of Visual Studio showing the Quick Replace command.

Jika Anda dengan cepat menjalankan aplikasi sekarang, Anda dapat melihat bahwa ListBox telah diganti dengan ComboBox, tetapi warna masih ditampilkan dengan menggunakan templat yang sama.

Screenshot of favorite colors app showing the color selection combo box.

5. Ekstrak templat ke sumber daya

Berbicara tentang templat, Anda harus menggunakannya kembali untuk daftar warna favorit nanti. Ada baiknya untuk hanya menyimpan templat di satu tempat, sehingga XAML Anda lebih mudah dibaca. Yang lebih penting, ini memastikan bahwa perubahan pada templat memengaruhi setiap instans. Mari kita ekstrak templat ke sumber daya.

Apa pun FrameworkElement dapat memiliki daftar sumber dayanya. Kami memilih untuk membuat templat kami global untuk halaman ini, jadi mari kita tambahkan <Page.Reources> tag di atas <Grid> elemen . Kemudian, pindahkan seluruh <DataTemplate> tag dan kontennya di dalamnya.

<Page.Resources>
    <DataTemplate x:DataType="local:ColorDescriptor">
        <StackPanel Orientation="Horizontal">
            <Rectangle Width="30" 
                       Height="30">
                <Rectangle.Fill>
                    <SolidColorBrush Color="{x:Bind Color}"/>
                </Rectangle.Fill>
            </Rectangle>
            <TextBlock Text="{x:Bind Name}" 
                       Margin="20, 10, 0, 10"/>
        </StackPanel>
    </DataTemplate>
</Page.Resources>

Visual Studio memperingatkan Anda bahwa objek dalam <Page.Resources> tag (yang merupakan IDictionary) harus memiliki Key atribut, jadi tambahkan ke <DataTemplate>.

<DataTemplate x:Key="ColorTemplate" 
              x:DataType="local:ColorDescriptor">

Kunci ini memungkinkan kita untuk merujuk ke templat ini dari tempat lain di halaman, seperti ComboBox.ItemTemplate, yang telah kehilangan kontennya. Untuk menggunakan ComboBoxColorDescriptor sumber daya, Anda dapat menghapus <ComboBox.ItemTemplate> tag, dan menggunakannya sebagai atribut di dalam tag itu <ComboBox> sendiri. Seluruh <ComboBox> tag terlihat seperti ini:

<ComboBox ItemsSource="{x:Bind Logic.LotsOfColors}" 
          Margin="20" 
          Width="200"
          HorizontalAlignment="Left" 
          VerticalAlignment="Top"
          ItemTemplate="{StaticResource ColorTemplate}"/>

Anda dapat menjalankan aplikasi lagi, hanya untuk memverifikasi bahwa templat item berfungsi.

6. Bangun UI lainnya

Antarmuka penggunanya sederhana. Semua kontrol (dropdown, tombol Tambahkan ke Favorit , daftar favorit (dengan teks header), dan tombol Hapus dari Favorit ) ditempatkan dalam satu vertikal StackPanel. Ganti seluruh konten <Grid> elemen dengan yang berikut ini:

<StackPanel>
    <ComboBox ItemsSource="{x:Bind Logic.LotsOfColors}" 
              Margin="20, 20, 20, 0" 
              Width="200"
              HorizontalAlignment="Left" 
              VerticalAlignment="Top"
              ItemTemplate="{StaticResource ColorTemplate}"
              SelectedItem="{x:Bind Logic.SelectedColor, Mode=TwoWay}" 
              />

    <Button Margin="20" 
            Click="{x:Bind Logic.AddSelectedColorToFavorites}">Add to Favorites</Button>
    <TextBlock FontSize="25" 
               Margin="20, 20, 20, 0">Favorite colors</TextBlock>

    <ListBox ItemsSource="{x:Bind Logic.FavoriteColors}"
             ItemTemplate="{StaticResource ColorTemplate}"
             Margin="20, 20, 20, 0"/>

    <Button Margin="20">Remove from Favorites</Button>
</StackPanel>

Ada pengikatan TwoWay antara item yang saat ini dipilih di ComboBox dan SelectedColor properti ColorListLogic kelas.

7. Jalankan aplikasi

Jalankan aplikasi sekarang, pilih warna dari ComboBox, dan pilih tombol Tambahkan ke Favorit . Tidak ada yang terjadi. Menambahkan titik henti ke akhir AddSelectedColorToFavorites metode di ColorListLogic kelas menunjukkan bahwa kode berfungsi. Warna yang dipilih ditambahkan ke FavoriteColors daftar.

Alasan UI tidak mencerminkan perubahan dalam hal ini List<ColorDescriptor> adalah bahwa UI perlu diberi tahu ketika koleksi berubah. Untuk daftar, ini dilakukan melalui System.Collections.Specialized.INotifyCollectionChanged antarmuka. Untungnya, kita tidak perlu menerapkan ini. Kelas System.Collections.ObjectModel.ObservableCollection<T> sudah memiliki semua yang kita butuhkan.

Untuk membuat aplikasi kami berfungsi, yang harus kita lakukan adalah menggunakan ObservableCollection<T> kelas alih-alih List<T> kelas untuk FavoriteColors properti.

public ObservableCollection<ColorDescriptor> FavoriteColors { get; } = 
    new ObservableCollection<ColorDescriptor>();

Jika Anda menjalankan aplikasi sekarang, memilih warna dari menu dropdown dan memilih tombol Tambahkan ke Favorit sekarang berfungsi dengan baik. Warna favorit yang dipilih tercermin dalam ListBox. Bagus!

Screenshot of sample app showing favorite colors added to list.

8. Hindari menambahkan item kosong

Saat Anda meluncurkan aplikasi, tidak ada warna yang dipilih di menu dropdown. Jika Anda memilih tombol Tambahkan ke Favorit sekarang, nulls ditambahkan ke daftar. Ini adalah bug, jadi mari kita perbaiki!

Kita dapat menambahkan null pemeriksaan ke AddSelectedColorToFavorites metode , tetapi itu tidak akan mencegah tombol Tambahkan ke Favorit muncul ketika tidak berfungsi. Sebagai gantinya, mari kita pastikan bahwa selalu ada item yang dipilih di menu dropdown. Karena properti dropdown SelectedItem terikat dua arah ke SelectedColor properti dalam kode, mari kita inisialisasikan ke nilai yang valid pada awalnya. Tambahkan baris berikut ke akhir ColorListLogic konstruktor:

SelectedColor = LotsOfColors[0];

Ini memastikan bahwa item pertama daftar LotsOfColors dipilih saat aplikasi dimulai. Pengguna tidak akan dapat menambahkan null ke FavoriteColors koleksi.

9. Hapus warna favorit

Langkah selanjutnya adalah menambahkan kemampuan untuk menghapus warna favorit dari ListBox. Ini akan terjadi oleh pengguna yang memilih item di ListBox, dan memilih tombol Hapus dari Favorit .

Demikian pula dengan cara kerjanya ComboBox , kita dapat melacak item yang telah dipilih pengguna di ListBox melalui propertinya SelectedItem . Kita dapat mengikat ini ke properti dalam kode. Tambahkan ini ke ColorListLogic kelas .

private ColorDescriptor _selectedFavoriteColor;

public ColorDescriptor SelectedFavoriteColor
{
    get => _selectedFavoriteColor;
    set
    {
        Set(ref _selectedFavoriteColor, value);
        RaisePropertyChanged(nameof(IsRemoveFavoriteColorButtonVisible));
    }
}

public bool IsRemoveFavoriteColorButtonVisible => SelectedFavoriteColor != null;

Kode sebelumnya juga menyertakan properti Boolean untuk mengontrol apakah tombol untuk menghapus item dari daftar favorit harus terlihat. Setiap perubahan SelectedFavoriteColor yang menyebabkan UI mengkueri properti ini, dan bertindak sesuai.

Untuk benar-benar melakukan penghapusan warna dari daftar favorit, kita perlu menulis satu metode lagi.

public void RemoveFavoriteColor()
{
    FavoriteColors.Remove(SelectedFavoriteColor);
}

Untuk menyambungkan tombol di XAML, buka ColorList.xaml, dan ubah XAML tombol Hapus dari Favorit . Ubah sehingga mencakup pengikatan Visibility serta pengikatan Click .

<Button Margin="20" 
        Visibility="{x:Bind Logic.IsRemoveFavoriteColorButtonVisible, Mode=OneWay}"
        Click="{x:Bind Logic.RemoveFavoriteColor}">Remove from Favorites</Button>

Semua yang tersisa adalah untuk mengikat ListBox's SelectedItem ke Logic.SelectedFavoriteColor properti . SelectedItem Tambahkan atribut ke ListBox dalam XAML.

<ListBox SelectedItem="{x:Bind Logic.SelectedFavoriteColor, Mode=TwoWay}"... >

Jalankan aplikasi sekarang, dan verifikasi bahwa Anda dapat menambahkan warna ke daftar warna favorit, serta menghapusnya. Perhatikan bagaimana tombol Hapus dari Favorit muncul dan menghilang, sesuai dengan apakah Anda memiliki warna favorit yang dipilih yang dapat dihapus.

Ringkasan

Pelajaran ini menggambarkan bagaimana Anda dapat memperoleh dan mengatur item yang dipilih dalam atau ComboBoxListBox kontrol, dengan mengikat propertinya SelectedItem ke properti C#. Anda juga telah melihat cara menggunakan ObservableCollection dalam kode menyebabkan UI memperbarui konten kontrol yang menampilkan beberapa item secara otomatis.

Dalam pelajaran ini, pengguna akan memilih warna favorit mereka. Warna yang tersedia tercantum dalam menu dropdown ( ComboBox kontrol). Pengguna memilih warna dan menambahkannya ke favorit mereka dengan menekan tombol. Warna favorit ditampilkan di bawah daftar lengkap. Memilih warna favorit juga menampilkan tombol yang memungkinkan pengguna menghapus warna yang dipilih dari favorit mereka.

Screenshot of sample app showing selected favorite color with remove button available.

Pertama, kita akan menambahkan kemampuan untuk memilih warna dari LotsOfColors koleksi, dan menambahkannya ke daftar warna favorit.

1. Buat SelectedColor properti

Mari kita mulai dengan kode, dan kemudian kita akan bekerja dengan cara kita melalui perubahan UI.

Kami memerlukan cara untuk menentukan item mana (yaitu, instans ColorDescriptor kelas) yang dipilih pengguna di menu dropdown. Kontrol ComboBox memiliki SelectedItem properti, yang mendapatkan dan mengatur item yang saat ini dipilih. Jadi, kita dapat mengikat properti ini ke properti jenis ColorDescriptor dalam kode kita.

Buka ColorListDataContext.cs dan tambahkan kode berikut:

private ColorDescriptor? _selectedColor;

public ColorDescriptor? SelectedColor
{
    get => _selectedColor;
    set => Set(ref _selectedColor, value);
}

Pola ini harus sudah tidak asing lagi sekarang. Ini adalah properti standar, memanfaatkan INotifyPropertyChanged mekanisme, dengan bantuan ObservableObject kelas dasar.

2. Buat FavoriteColors daftar

Daftar menyimpan FavoriteColors warna yang dipilih pengguna untuk menjadi favorit mereka. Ini hanya properti sederhana.

public List<ColorDescriptor> FavoriteColors { get; } = 
    new List<ColorDescriptor>();

3. Tambahkan warna terpilih ke favorit

Menambahkan warna yang dipilih ke favorit terjadi dalam AddSelectedColorToFavorites metode . Sebagai tindakan pencegahan, periksa apakah SelectedColor propertinya adalah null. Jika ya, kembalikan dari metode . Jika tidak, tambahkan warna yang dipilih ke FavoriteColors daftar.

public void AddSelectedColorToFavorites()
{
    if (SelectedColor == null) return;
    FavoriteColors.Add(SelectedColor);
}

Ketika metode ini dipanggil, SelectedColor harus diisi dengan warna yang ditambahkan ke daftar favorit, tetapi yang terbaik adalah tidak membuat asumsi.

Dengan ini, kita sudah selesai dengan kode (untuk saat ini). Mari kita mengalihkan perhatian kita ke XAML.

4. Ubah menjadi ListBoxComboBox

Karena kita ingin memiliki daftar lengkap warna yang akan ditampilkan dalam dropdown (yang merupakan ComboBox kontrol), kita perlu mengubah XAML. Untungnya, keduanya ListBox dan ComboBox merupakan keturunan ItemsControl kontrol, dan mereka bekerja sama meskipun ada banyak perbedaan dalam bagaimana mereka terlihat dan berperilaku. Yang harus kita lakukan adalah mengganti ListBox dengan ComboBox dalam ColorList.xaml file. Anda dapat menggunakan perintah Edit>Temukan dan Ganti>Ganti Cepat (CtrlL+H) untuk ini.

Repeat screenshot of Visual Studio showing Quick Replace command.

Jika Anda dengan cepat menjalankan aplikasi sekarang, Anda dapat melihat bahwa ListBox telah diganti dengan ComboBox, tetapi warna masih ditampilkan dengan menggunakan templat yang sama.

Screenshot of sample app showing color list in a ComboBox.

5. Ekstrak templat ke sumber daya

Berbicara tentang templat, Anda harus menggunakannya kembali untuk daftar warna favorit nanti. Ada baiknya untuk hanya menyimpan templat di satu tempat, sehingga XAML Anda lebih mudah dibaca. Yang lebih penting, ini memastikan bahwa perubahan pada templat memengaruhi setiap instans. Mari kita ekstrak templat ke sumber daya.

Apa pun FrameworkElement dapat memiliki daftar sumber dayanya. Kami memilih untuk membuat templat kami global untuk seluruh Window, jadi mari kita tambahkan <Window.Reources> tag di atas <Grid> elemen . Kemudian, pindahkan seluruh <DataTemplate> tag dan kontennya di dalamnya.

<Window.Resources>
    <DataTemplate x:Key="ColorTemplate">
        <StackPanel Orientation="Horizontal">
            <Rectangle Width="80" 
                       Height="20">
                <Rectangle.Fill>
                    <SolidColorBrush Color="{Binding Color}"/>
                </Rectangle.Fill>
            </Rectangle>
            <TextBlock Text="{Binding Name}" 
                       Margin="20, 10, 0, 10"/>
        </StackPanel>
    </DataTemplate>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</Window.Resources>

<Window.Resources> adalah kamus, jadi setiap entri juga harus memiliki kunci. Kami telah menambahkannya ke <DataTemplate>.

<DataTemplate x:Key="ColorTemplate">

Kunci ini memungkinkan kita untuk merujuk ke templat ini dari tempat lain di dalam Window, seperti ComboBox.ItemTemplate, yang telah kehilangan kontennya. Untuk menggunakan ComboBoxColorDescriptor sumber daya, Anda dapat menghapus <ComboBox.ItemTemplate> tag, dan menggunakannya sebagai atribut di dalam tag itu <ComboBox> sendiri. Seluruh <ComboBox> tag terlihat seperti ini:

<ComboBox ItemsSource="{x:Bind Logic.LotsOfColors}" 
          Margin="20" 
          Width="200"
          HorizontalAlignment="Left" 
          VerticalAlignment="Top"
          ItemTemplate="{StaticResource ColorTemplate}"/>

Anda dapat menjalankan aplikasi lagi, hanya untuk memverifikasi bahwa templat item berfungsi.

6. Bangun UI lainnya

Antarmuka penggunanya sederhana. Semua kontrol (dropdown, tombol Tambahkan ke Favorit , daftar favorit (dengan teks header), dan tombol Hapus dari Favorit ) ditumpuk dalam satu vertikal StackPanel. Ganti seluruh elemen <Grid> dengan berikut:

<StackPanel>
    <ComboBox ItemsSource="{Binding LotsOfColors}" 
              Margin="20, 20, 20, 0" 
              Width="200"
              HorizontalAlignment="Left" 
              VerticalAlignment="Top"
              ItemTemplate="{StaticResource ColorTemplate}"
              SelectedItem="{Binding SelectedColor, Mode=TwoWay}" />

    <Button 
        Margin="20" 
        HorizontalAlignment="Left">Add to Favorites</Button>

    <TextBlock
            FontSize="25" 
            Margin="20, 20, 20, 0">Favorite colors</TextBlock>

    <ListBox ItemsSource="{Binding FavoriteColors}"
             ItemTemplate="{StaticResource ColorTemplate}"
             Margin="20, 20, 20, 0"
             HorizontalAlignment="Left"/>

    <Button Margin="20" 
            HorizontalAlignment="Left">Remove from Favorites</Button>

</StackPanel>

Ada pengikatan TwoWay antara item yang saat ini dipilih di ComboBox dan SelectedColor properti ColorListDataContext kelas.

7. Buat penangan Klik untuk tombol Add to Favorites

Kami telah menerapkan logika untuk menambahkan warna yang dipilih ke FavoriteColors daftar dalam AddSelectedColorToFavorites metode . Namun, kita perlu memanggil metode ini ketika pengguna mengklik tombol .

Klik dua kali tombol Add to Favorites di desainer visual di Visual Studio. Ini membuat Button_Click metode di code-behind, dan referensi ke Click dalam peristiwa di XAML:

<Button ... Click="Button_Click">Add to Favorites</Button>

Ganti nama Button_Click metode menjadi AddToFavorites_Click dalam codebehind dan XAML. Anda dapat melakukan ini dengan mengganti namanya dalam kode, lalu menggunakan ikon obeng, memilih "Ganti nama Button_Click menjadi AddToFavorites_Click". Ini akan mengurus perubahan nama metode dalam file XAML juga.

Screenshot of Visual Studio quick action option to rename button click method..

Tambahkan properti kenyamanan ke bagian ColorList atas kelas untuk mempermudah akses ColorListDataContext:

private ColorListDataContext DC => (ColorListDataContext)DataContext;

Kemudian, dalam metode , AddToFavorites_Click panggil logika yang ditulis sebelumnya dari ColorListDataContext kelas :

private void AddToFavorites_Click(object sender, RoutedEventArgs e)
{
    DC.AddSelectedColorToFavorites();
}

8. Jalankan aplikasi

Jalankan aplikasi sekarang, pilih warna dari ComboBox, dan pilih tombol Tambahkan ke Favorit . Tidak ada yang terjadi. Menambahkan titik henti ke akhir AddSelectedColorToFavorites metode di ColorListDataContext kelas menunjukkan bahwa kode berfungsi. Warna yang dipilih ditambahkan ke FavoriteColors daftar.

Alasan UI tidak mencerminkan perubahan dalam hal ini List<ColorDescriptor> adalah bahwa UI perlu diberi tahu ketika koleksi berubah. Untuk daftar, ini dilakukan melalui System.Collections.Specialized.INotifyCollectionChanged antarmuka. Untungnya, kita tidak perlu menerapkan ini. Kelas System.Collections.ObjectModel.ObservableCollection<T> sudah memiliki semua yang kita butuhkan.

Untuk membuat aplikasi kami berfungsi, yang harus kita lakukan adalah menggunakan ObservableCollection<T> kelas alih-alih List<T> kelas untuk FavoriteColors properti.

public ObservableCollection<ColorDescriptor> FavoriteColors { get; } = 
    new ObservableCollection<ColorDescriptor>();

Jika Anda menjalankan aplikasi sekarang, memilih warna dari menu dropdown dan memilih tombol Tambahkan ke Favorit sekarang berfungsi dengan baik. Warna favorit yang dipilih tercermin dalam ListBox. Bagus!

Screenshot of sample app showing selected color added to favorites.

9. Hindari menambahkan item kosong

Saat Anda meluncurkan aplikasi, tidak ada warna yang dipilih di menu dropdown. Saat ini kami memiliki null cek masuk AddSelectedColorToFavorites metode untuk mencegah item 'null' ditambahkan ke daftar saat Anda memilih tombol Tambahkan ke Favorit . Mari kita ubah ini untuk memastikan bahwa selalu ada warna yang dipilih di menu dropdown.

Pemeriksaan null tidak mencegah tombol Tambahkan ke Favorit muncul saat tidak berfungsi. Jadi, mari kita pastikan bahwa selalu ada item yang dipilih. Karena properti dropdown SelectedItem terikat dua arah ke SelectedColor properti dalam kode, mari kita inisialisasikan ke nilai yang valid pada awalnya. Tambahkan baris berikut ke akhir ColorListDataContext konstruktor:

SelectedColor = LotsOfColors[0];

Ini memastikan bahwa item pertama daftar LotsOfColors dipilih saat aplikasi dimulai. Pengguna tidak akan dapat menambahkan null ke FavoriteColors koleksi.

10. Hapus warna favorit

Langkah selanjutnya adalah menambahkan kemampuan untuk menghapus warna favorit dari ListBox. Ini terjadi oleh pengguna yang memilih item di ListBox, dan memilih tombol Hapus dari Favorit .

Demikian pula dengan cara kerjanya ComboBox , kita dapat melacak item yang telah dipilih pengguna di ListBox melalui propertinya SelectedItem . Kita dapat mengikat ini ke properti dalam kode. Tambahkan properti baru ke ColorListDataContext kelas sebagai berikut:

private ColorDescriptor? _selectedFavoriteColor;

public ColorDescriptor? SelectedFavoriteColor
{
    get => _selectedFavoriteColor;
    set
    {
        Set(ref _selectedFavoriteColor, value);
        RaisePropertyChanged(nameof(IsRemoveFavoriteEnabled));
    }
}

public bool IsRemoveFavoriteEnabled => SelectedFavoriteColor != null;

Kode sebelumnya juga menyertakan properti Boolean untuk mengontrol apakah tombol untuk menghapus item dari daftar favorit harus terlihat. Setiap perubahan SelectedFavoriteColor yang menyebabkan UI mengkueri properti ini, dan bertindak sesuai.

Untuk benar-benar melakukan penghapusan warna dari daftar favorit, kita perlu menulis satu metode lagi.

public void RemoveFavoriteColor()
{
    if (SelectedFavoriteColor == null) return;
    FavoriteColors.Remove(SelectedFavoriteColor);
}

Selanjutnya, ikat ListBox's SelectedItem ke SelectedFavoriteColor properti . SelectedItem Tambahkan atribut ke ListBox dalam CodeList.xaml.

<ListBox SelectedItem="{Binding SelectedFavoriteColor, Mode=TwoWay}"... >

Untuk menyambungkan tombol Hapus dari Favorit , ubah XAML tombol Hapus dari Favorit sehingga menyertakan IsEnabled pengikatan, serta Click penanganan aktivitas.

<Button Margin="20" 
        HorizontalAlignment="Left"
        Click="RemoveFromFavorites_Click"
        IsEnabled="{Binding IsRemoveFavoriteEnabled}">Remove from Favorites</Button>

Kita juga perlu menambahkan metode ke RemoveFromFavorites_ClickColorList.xaml.cs, untuk memanggil RemoveFromFavoriteColor logika kita.

private void RemoveFromFavorites_Click(object sender, RoutedEventArgs e)
{
    DC.RemoveFavoriteColor();
}

Jalankan aplikasi sekarang, dan verifikasi bahwa Anda dapat menambahkan warna ke daftar warna favorit, serta menghapusnya. Perhatikan bagaimana tombol Hapus dari Favorit dinonaktifkan dan diaktifkan, sesuai dengan apakah Anda memiliki warna favorit yang dipilih yang dapat dihapus.

Sebagai latihan, coba sembunyikan seluruh bagian Warna Favorit dari UI saat FavoriteColors koleksi kosong. Petunjuk: gunakan untuk mengelompokkan kontrol yang StackPanel terpengaruh, dan mengikat StackPanelVisibilitas ke properti di ColorListDataContext kelas . Setiap kali warna favorit ditambahkan atau dihapus, beri tahu UI tentang perubahan pada properti ini.

Ringkasan

Pelajaran ini menggambarkan bagaimana Anda dapat memperoleh dan mengatur item yang dipilih dalam ComboBox atau ListBox kontrol dengan mengikat propertinya SelectedItem ke properti C#. Anda juga telah melihat cara menggunakan ObservableCollection dalam kode menyebabkan UI memperbarui konten kontrol yang menampilkan beberapa item secara otomatis.