Aktualizowanie interfejsu użytkownika podczas zmiany kolekcji

  • 10 min

W tej lekcji użytkownik wybierze ulubione kolory. Dostępne kolory są wyświetlane na liście rozwijanej (kontrolki ComboBox ). Użytkownik wybiera kolor i dodaje go do ulubionych, naciskając przycisk. Poniżej zostaną wyświetlone ulubione kolory. Wybranie ulubionego koloru powoduje również wyświetlenie przycisku, który umożliwia użytkownikowi usunięcie wybranego koloru z ulubionych.

Screenshot of sample databinding app running and displaying favorite colors.

Najpierw dodaj możliwość wybrania koloru z LotsOfColors kolekcji i dodania go do listy ulubionych kolorów.

1. Tworzenie SelectedColor właściwości

Zacznijmy od kodu, a następnie przejdziemy przez interfejs użytkownika.

Potrzebujemy sposobu określenia, który element (czyli wystąpienie ColorDescriptor klasy) użytkownik wybiera na liście rozwijanej. Kontrolka ComboBoxSelectedItem ma właściwość , która pobiera i ustawia aktualnie wybrany element. Dlatego możemy powiązać tę właściwość z właściwością typu ColorDescriptor w naszym kodzie.

Otwórz plik ColorListLogic.cs i dodaj następujący kod:

private ColorDescriptor _selectedColor;

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

Ten wzorzec powinien być teraz znany. Jest to standardowa właściwość, ozdobiona INotifyPropertyChanged mechanizmem, z pomocą klasy bazowej ObservableObject .

2. Tworzenie FavoriteColors listy

Lista FavoriteColors przechowuje kolory, które użytkownik wybrał jako ulubione. To tylko prosta właściwość.

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

3. Dodaj wybrany kolor do ulubionych

Dodanie wybranego koloru do ulubionych odbywa się w metodzie AddSelectedColorToFavorites .

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

Założeniem jest to, że po wywołaniu tej metody jest wypełniany kolorem, SelectedColor który należy dodać do listy ulubionych.

W tym celu wykonaliśmy kod (na razie). Zwróćmy uwagę na XAML.

4. Zmień wartość na ListBox a ComboBox

Ponieważ chcemy mieć pełną listę kolorów, które mają być wyświetlane na liście rozwijanej (która jest kontrolką ComboBox ), musimy zmienić kod XAML. Na szczęście zarówno, jak ListBox i ComboBox są potomkami ItemsControl kontrolki, i działają podobnie pomimo różnicy w wyglądzie i zachowaniu. Wszystko, co musimy zrobić, to zastąpić ListBox ciąg ciągiem ComboBox w pliku ColorList.xaml. W tym celu możesz użyć polecenia Edytuj>znajdź i zastąp szybkie zastępowanie> (CtrlL+H).

Screenshot of Visual Studio showing the Quick Replace command.

Jeśli teraz szybko uruchomisz aplikację, zobaczysz, że ListBox element został zastąpiony symbolem ComboBox, ale kolory są nadal wyświetlane przy użyciu tego samego szablonu.

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

5. Wyodrębnianie szablonu do zasobu

Mówiąc o szablonie, musisz użyć go ponownie do listy ulubionych kolorów później. Dobrym pomysłem jest przechowywanie tylko szablonu w jednym miejscu, aby kod XAML był bardziej czytelny. Co ważniejsze, gwarantuje to, że zmiany w szablonie wpływają na każde wystąpienie. Wyodrębnijmy szablon do zasobu.

Każda FrameworkElement może mieć listę zasobów. Wybraliśmy, aby szablon był globalny dla tej strony, dlatego dodajmy <Page.Reources> tag powyżej <Grid> elementu. Następnie przenieś cały <DataTemplate> tag i jego zawartość wewnątrz.

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

Program Visual Studio ostrzega, że obiekty w tagu <Page.Resources> (czyli IDictionary) muszą mieć Key atrybut, więc dodaj go do <DataTemplate>elementu .

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

Ten klucz umożliwia nam odwoływanie się do tego szablonu z innego miejsca na stronie, takiego jak ComboBox.ItemTemplate, który utracił jego zawartość. ComboBox Aby użyć ColorDescriptor zasobu, możesz usunąć <ComboBox.ItemTemplate> tag i użyć go jako atrybutu wewnątrz samego tagu<ComboBox>. Cały <ComboBox> tag wygląda następująco:

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

Możesz ponownie uruchomić aplikację, aby sprawdzić, czy szablon elementu działa.

6. Skompiluj resztę interfejsu użytkownika

Interfejs użytkownika jest prosty. Wszystkie kontrolki (lista rozwijana, przycisk Dodaj do ulubionych , lista ulubionych (z tekstem nagłówka) i przycisk Usuń z ulubionych są umieszczane w jednym pionie StackPanel. Zastąp całą zawartość <Grid> elementu następującymi elementami:

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

TwoWay Istnieje powiązanie między aktualnie wybranym elementem w obiekcie ComboBox i SelectedColor właściwością ColorListLogic klasy .

7. Uruchamianie aplikacji

Uruchom aplikację teraz, wybierz kolor z ComboBoxpozycji , a następnie wybierz przycisk Dodaj do ulubionych . Nic się nie stanie. Dodanie punktu przerwania na końcu AddSelectedColorToFavorites metody w ColorListLogic klasie pokazuje, że kod działa. Wybrany kolor zostanie dodany do FavoriteColors listy.

Powodem, dla którego interfejs użytkownika nie odzwierciedla zmian w tym List<ColorDescriptor> artykule, jest to, że interfejs użytkownika musi zostać powiadomiony, gdy kolekcja ulegnie zmianie. W przypadku list odbywa się to za pośrednictwem interfejsu System.Collections.Specialized.INotifyCollectionChanged . Na szczęście nie musimy tego implementować. Klasa System.Collections.ObjectModel.ObservableCollection<T> ma już wszystko, czego potrzebujemy.

Aby nasza aplikacja działała, musimy użyć ObservableCollection<T> klasy zamiast List<T> klasy dla FavoriteColors właściwości .

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

Jeśli teraz uruchomisz aplikację, wybierz kolory z listy rozwijanej i wybierz przycisk Dodaj do ulubionych teraz działa prawidłowo. Wybrane ulubione kolory są odzwierciedlane w obiekcie ListBox. Ładne!

Screenshot of sample app showing favorite colors added to list.

8. Unikaj dodawania pustych elementów

Po uruchomieniu aplikacji nie ma zaznaczonego koloru na liście rozwijanej. Jeśli teraz wybierzesz przycisk Dodaj do ulubionych , nulls zostaną dodane do listy. Jest to usterka, więc poprawmy ją!

Możemy dodać null sprawdzanie do AddSelectedColorToFavorites metody, ale nie uniemożliwiłoby to wyświetlania przycisku Dodaj do ulubionych , gdy nie jest ona funkcjonalna. Zamiast tego upewnijmy się, że na liście rozwijanej zawsze jest zaznaczony element. Ponieważ właściwość listy rozwijanej SelectedItem jest dwukierunkowa powiązana z SelectedColor właściwością w kodzie, po prostu zainicjujmy ją do prawidłowej wartości na początku. Dodaj następujący wiersz na końcu konstruktora ColorListLogic :

SelectedColor = LotsOfColors[0];

Dzięki temu podczas uruchamiania aplikacji zostanie wybrany pierwszy element LotsOfColors listy. Użytkownik nie będzie mógł dodać elementu null do kolekcji FavoriteColors .

9. Usuń ulubione kolory

Następnym krokiem jest dodanie możliwości usunięcia ulubionych kolorów z elementu ListBox. Dzieje się tak, gdy użytkownik wybierze element w elemencie ListBox, a następnie wybierze przycisk Usuń z ulubionych .

Podobnie jak w ComboBox przypadku działania, możemy śledzić element wybrany przez użytkownika we ListBox właściwości .SelectedItem Możemy powiązać to z właściwością w kodzie. Dodaj to do ColorListLogic klasy .

private ColorDescriptor _selectedFavoriteColor;

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

public bool IsRemoveFavoriteColorButtonVisible => SelectedFavoriteColor != null;

Powyższy kod zawiera również właściwość logiczną służącą do kontrolowania, czy przycisk usuwania elementów z listy ulubionych powinien być widoczny. Każda zmiana powoduje, że SelectedFavoriteColor interfejs użytkownika wysyła zapytanie do tej właściwości i działa odpowiednio.

Aby rzeczywiście usunąć kolor z listy ulubionej, musimy napisać jeszcze jedną metodę.

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

Aby połączyć przycisk w górę w języku XAML, otwórz plik ColorList.xaml i zmień przycisk Usuń z ulubionych XAML. Zmień ją tak, aby zawierała Visibility powiązanie, a także Click powiązanie.

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

Wszystko, co pozostało, to powiązanie ListBoxwartości "s SelectedItem z właściwością Logic.SelectedFavoriteColor ". SelectedItem Dodaj atrybut do ListBox elementu w języku XAML.

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

Uruchom aplikację teraz i sprawdź, czy możesz dodać kolory do listy ulubionych kolorów, a także je usunąć. Zwróć uwagę, jak przycisk Usuń z ulubionych jest wyświetlany i znika, zgodnie z tym, czy wybrano ulubiony kolor, który można usunąć.

Podsumowanie

W tej lekcji pokazano, jak można uzyskać i ustawić wybrany element w kontrolce ComboBox lub ListBox przez powiązanie ich SelectedItem właściwości z właściwością języka C#. Pokazano również, jak użycie w ObservableCollection kodzie powoduje, że interfejs użytkownika automatycznie aktualizuje zawartość kontrolek, które wyświetlają wiele elementów.

W tej lekcji użytkownik wybierze swoje ulubione kolory. Dostępne kolory są wyświetlane na liście rozwijanej (kontrolki ComboBox ). Użytkownik wybiera kolor i dodaje go do ulubionych, naciskając przycisk. Ulubione kolory są wyświetlane poniżej pełnej listy. Wybranie ulubionego koloru powoduje również wyświetlenie przycisku, który umożliwia użytkownikowi usunięcie wybranego koloru z ulubionych.

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

Najpierw dodamy możliwość wybrania koloru z LotsOfColors kolekcji i dodania go do listy ulubionych kolorów.

1. Tworzenie SelectedColor właściwości

Zacznijmy od kodu, a następnie przejdziemy przez zmiany interfejsu użytkownika.

Potrzebujemy sposobu określenia, który element (czyli wystąpienie ColorDescriptor klasy) użytkownik wybiera na liście rozwijanej. Kontrolka ComboBoxSelectedItem ma właściwość , która pobiera i ustawia aktualnie wybrany element. Dlatego możemy powiązać tę właściwość z właściwością typu ColorDescriptor w naszym kodzie.

Otwórz ColorListDataContext.cs plik i dodaj następujący kod:

private ColorDescriptor? _selectedColor;

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

Ten wzorzec powinien być teraz znany. Jest to standardowa właściwość, wykorzystująca INotifyPropertyChanged mechanizm, z pomocą klasy bazowej ObservableObject .

2. Tworzenie FavoriteColors listy

Lista FavoriteColors przechowuje kolory wybrane przez użytkownika jako ulubione. To tylko prosta właściwość.

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

3. Dodaj wybrany kolor do ulubionych

Dodanie wybranego koloru do ulubionych odbywa się w metodzie AddSelectedColorToFavorites . Jako środek ostrożności sprawdź, czy SelectedColor właściwość ma wartość null. Jeśli tak jest, wróć z metody . W przeciwnym razie dodaj wybrany kolor do FavoriteColors listy.

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

Po wywołaniu SelectedColor tej metody należy wypełnić kolor dodawany do listy ulubionych, ale najlepiej nie przyjąć założeń.

W tym celu wykonaliśmy kod (na razie). Zwróćmy uwagę na XAML.

4. Zmień wartość na ListBox a ComboBox

Ponieważ chcemy mieć pełną listę kolorów, które mają być wyświetlane na liście rozwijanej (która jest kontrolką ComboBox ), musimy zmienić kod XAML. Na szczęście zarówno, jak ListBox i ComboBox są potomkami ItemsControl kontroli, i działają podobnie pomimo licznych różnic w wyglądzie i zachowaniu. Wszystko, co musimy zrobić, to zastąpić ListBox ciąg ciągiem ComboBoxColorList.xaml w pliku . W tym celu możesz użyć polecenia Edytuj>znajdź i zastąp szybkie zastępowanie> (CtrlL+H).

Repeat screenshot of Visual Studio showing Quick Replace command.

Jeśli teraz szybko uruchomisz aplikację, zobaczysz, że ListBox element został zastąpiony symbolem ComboBox, ale kolory są nadal wyświetlane przy użyciu tego samego szablonu.

Screenshot of sample app showing color list in a ComboBox.

5. Wyodrębnianie szablonu do zasobu

Mówiąc o szablonie, musisz użyć go ponownie do listy ulubionych kolorów później. Dobrym pomysłem jest przechowywanie tylko szablonu w jednym miejscu, aby kod XAML był bardziej czytelny. Co ważniejsze, gwarantuje to, że zmiany w szablonie wpływają na każde wystąpienie. Wyodrębnijmy szablon do zasobu.

Każda FrameworkElement może mieć listę zasobów. Wybraliśmy, aby szablon był globalny dla całego Windowelementu , więc dodajmy <Window.Reources> tag powyżej <Grid> elementu. Następnie przenieś cały <DataTemplate> tag i jego zawartość wewnątrz.

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

Jest <Window.Resources> to słownik, więc każdy wpis powinien również mieć klucz. Dodaliśmy go do elementu <DataTemplate>.

<DataTemplate x:Key="ColorTemplate">

Ten klucz umożliwia nam odwoływanie się do tego szablonu z innego miejsca w Windowobiekcie , takiego jak ComboBox.ItemTemplate, który stracił jego zawartość. ComboBox Aby użyć ColorDescriptor zasobu, możesz usunąć <ComboBox.ItemTemplate> tag i użyć go jako atrybutu wewnątrz samego tagu<ComboBox>. Cały <ComboBox> tag wygląda następująco:

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

Możesz ponownie uruchomić aplikację, aby sprawdzić, czy szablon elementu działa.

6. Skompiluj resztę interfejsu użytkownika

Interfejs użytkownika jest prosty. Wszystkie kontrolki (lista rozwijana, przycisk Dodaj do ulubionych, lista ulubionych (z tekstem nagłówka) i przycisk Usuń z ulubionych ) są zagnieżdżone w jednym pionie StackPanel. Zastąp cały <Grid> element następującym elementem:

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

TwoWay Istnieje powiązanie między aktualnie wybranym elementem w obiekcie ComboBox i SelectedColor właściwością ColorListDataContext klasy .

7. Utwórz procedurę obsługi kliknięć dla Add to Favorites przycisku

Zaimplementowaliśmy już logikę dodawania wybranego koloru do FavoriteColors listy w metodzie AddSelectedColorToFavorites . Musimy jednak wywołać tę metodę, gdy użytkownik kliknie przycisk.

Add to Favorites Kliknij dwukrotnie przycisk w projektancie wizualizacji w programie Visual Studio. Spowoduje to utworzenie Button_Click metody w kodzie i odwołanie do niej w Click zdarzeniu w języku XAML:

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

Zmień nazwę metody na Button_ClickAddToFavorites_Click w kodziebehind i XAML. Możesz to zrobić, zmieniając jego nazwę w kodzie, a następnie używając ikony śrubokręta, wybierając pozycję "Zmień nazwę Button_Click na AddToFavorites_Click". Spowoduje to również zmianę nazwy metody w pliku XAML.

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

Dodaj właściwość wygody na początku ColorList klasy, aby ułatwić dostęp do elementu ColorListDataContext:

private ColorListDataContext DC => (ColorListDataContext)DataContext;

Następnie w metodzie AddToFavorites_Click wywołaj wcześniej napisaną logikę z ColorListDataContext klasy :

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

8. Uruchamianie aplikacji

Uruchom aplikację teraz, wybierz kolor z ComboBoxpozycji , a następnie wybierz przycisk Dodaj do ulubionych . Nic się nie stanie. Dodanie punktu przerwania na końcu AddSelectedColorToFavorites metody w ColorListDataContext klasie pokazuje, że kod działa. Wybrany kolor zostanie dodany do FavoriteColors listy.

Powodem, dla którego interfejs użytkownika nie odzwierciedla zmian w tym List<ColorDescriptor> artykule, jest to, że interfejs użytkownika musi zostać powiadomiony, gdy kolekcja ulegnie zmianie. W przypadku list odbywa się to za pośrednictwem interfejsu System.Collections.Specialized.INotifyCollectionChanged . Na szczęście nie musimy tego implementować. Klasa System.Collections.ObjectModel.ObservableCollection<T> ma już wszystko, czego potrzebujemy.

Aby nasza aplikacja działała, musimy użyć ObservableCollection<T> klasy zamiast List<T> klasy dla FavoriteColors właściwości .

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

Jeśli teraz uruchomisz aplikację, wybierz kolory z listy rozwijanej i wybierz przycisk Dodaj do ulubionych teraz działa prawidłowo. Wybrane ulubione kolory są odzwierciedlane w obiekcie ListBox. Ładne!

Screenshot of sample app showing selected color added to favorites.

9. Unikaj dodawania pustych elementów

Po uruchomieniu aplikacji nie ma zaznaczonego koloru na liście rozwijanej. Obecnie mamy null zaewidencjonowania AddSelectedColorToFavorites metody , aby uniemożliwić dodawanie elementów o wartości null do listy po wybraniu przycisku Dodaj do ulubionych . Zmieńmy to, aby upewnić się, że na liście rozwijanej zawsze jest zaznaczony kolor.

Sprawdzanie null nie uniemożliwia wyświetlania przycisku Dodaj do ulubionych , gdy nie działa. Dlatego upewnijmy się, że zawsze jest zaznaczony element. Ponieważ właściwość listy rozwijanej SelectedItem jest dwukierunkowa powiązana z SelectedColor właściwością w kodzie, po prostu zainicjujmy ją do prawidłowej wartości na początku. Dodaj następujący wiersz na końcu konstruktora ColorListDataContext :

SelectedColor = LotsOfColors[0];

Dzięki temu podczas uruchamiania aplikacji zostanie wybrany pierwszy element LotsOfColors listy. Użytkownik nie będzie mógł dodać elementu null do kolekcji FavoriteColors .

10. Usuń ulubione kolory

Następnym krokiem jest dodanie możliwości usunięcia ulubionych kolorów z elementu ListBox. Dzieje się tak, gdy użytkownik wybierze element w elemencie ListBoxi wybierz przycisk Usuń z ulubionych .

Podobnie jak w ComboBox przypadku działania, możemy śledzić element wybrany przez użytkownika we ListBox właściwości .SelectedItem Możemy powiązać to z właściwością w kodzie. Dodaj nową właściwość do klasy w ColorListDataContext następujący sposób:

private ColorDescriptor? _selectedFavoriteColor;

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

public bool IsRemoveFavoriteEnabled => SelectedFavoriteColor != null;

Powyższy kod zawiera również właściwość logiczną służącą do kontrolowania, czy przycisk usuwania elementów z listy ulubionych powinien być widoczny. Każda zmiana powoduje, że SelectedFavoriteColor interfejs użytkownika wysyła zapytanie do tej właściwości i działa odpowiednio.

Aby rzeczywiście usunąć kolor z listy ulubionej, musimy napisać jeszcze jedną metodę.

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

Następnie powiąż ListBoxelement SelectedItem z właściwością SelectedFavoriteColor . SelectedItem Dodaj atrybut do elementu w CodeList.xamlpliku ListBox .

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

Aby połączyć przycisk Usuń z ulubionych , zmień przycisk Usuń z ulubionych XAML przycisku , aby zawierał IsEnabled powiązanie, a także Click program obsługi zdarzeń.

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

Musimy również dodać metodę do ColorList.xaml.csmetody , aby wywołać RemoveFromFavoriteColor metodę RemoveFromFavorites_Click w naszej logice.

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

Uruchom aplikację teraz i sprawdź, czy możesz dodać kolory do listy ulubionych kolorów, a także je usunąć. Zwróć uwagę, jak przycisk Usuń z ulubionych jest wyłączony i włączony, zgodnie z tym, czy wybrano ulubiony kolor, który można usunąć.

W ramach ćwiczenia spróbuj ukryć całą część ulubione kolory interfejsu użytkownika, gdy kolekcja jest pusta FavoriteColors . Wskazówka: użyj elementu , StackPanel aby zgrupować objęte kontrolki i powiązać StackPanelwidoczność z właściwością w ColorListDataContext klasie. Za każdym razem, gdy zostanie dodany lub usunięty ulubiony kolor, powiadom interfejs użytkownika o zmianach tej właściwości.

Podsumowanie

W tej lekcji pokazano, jak można uzyskać i ustawić wybrany element w kontrolce ComboBox lub ListBox przez powiązanie ich SelectedItem właściwości z właściwością języka C#. Pokazano również, jak użycie w ObservableCollection kodzie powoduje, że interfejs użytkownika automatycznie aktualizuje zawartość kontrolek, które wyświetlają wiele elementów.