Aktualizace uživatelského rozhraní při změně kolekcí

Dokončeno

V této lekci uživatel vybere oblíbené barvy. Dostupné barvy jsou uvedeny v rozevíracím seznamu ( ComboBox ovládací prvek). Uživatel vybere barvu a přidá ji do oblíbených položek stisknutím tlačítka. Níže jsou zobrazeny oblíbené barvy. Když vyberete oblíbenou barvu, zobrazí se tlačítko, které uživateli umožní odebrat vybranou barvu ze svých oblíbených položek.

Screenshot of sample databinding app running and displaying favorite colors.

Nejprve přidejte možnost vybrat barvu z LotsOfColors kolekce a přidat ji do seznamu oblíbených barev.

1. Vytvoření SelectedColor vlastnosti

Začněme kódem a pak si projdeme uživatelské rozhraní.

Potřebujeme způsob, jak určit, kterou položku (tj. instance ColorDescriptor třídy) uživatel vybere v rozevíracím seznamu. Ovládací ComboBox prvek má SelectedItem vlastnost, která získá a nastaví aktuálně vybranou položku. Tuto vlastnost tedy můžeme svázat s vlastností typu ColorDescriptor v našem kódu.

Otevřete Soubor ColorListLogic.cs a přidejte následující kód:

private ColorDescriptor _selectedColor;

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

Tento model by teď měl znát. Jedná se o standardní vlastnost zdobenou mechanismem INotifyPropertyChanged , s pomocí ObservableObject základní třídy.

2. Vytvoření FavoriteColors seznamu

Seznam FavoriteColors ukládá barvy, které uživatel zvolil jako oblíbené. Je to jen jednoduchá vlastnost.

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

3. Přidejte vybranou barvu k oblíbeným položkám.

Přidání vybrané barvy do oblíbených položek probíhá v AddSelectedColorToFavorites metodě.

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

Předpokladem je, SelectedColor že při zavolání této metody se vyplní barva, která by se měla přidat do seznamu oblíbených položek.

S tímto kódem už jsme hotovi (prozatím). Pojďme se zaměřit na XAML.

4. Změňte na ListBoxComboBox

Protože chceme mít úplný seznam barev, které se mají zobrazit v rozevíracím seznamu (což je ComboBox ovládací prvek), musíme změnit XAML. Naštěstí oba ListBox a ComboBox jsou potomky ItemsControl ovládacího prvku a fungují podobně, i když existují rozdíly v tom, jak vypadají a chovají se. Vše, co musíme udělat, je nahrazeno ListBoxComboBox v souboru ColorList.xaml. K tomu můžete použít příkaz Pro úpravy>najít a nahradit rychlé nahrazení> (CtrlL+H).

Screenshot of Visual Studio showing the Quick Replace command.

Pokud teď aplikaci rychle spustíte, uvidíte, že ListBox byla nahrazena znakem , ComboBoxale barvy se stále zobrazují pomocí stejné šablony.

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

5. Extrahování šablony do prostředku

Když už mluvíme o šabloně, budete ji muset později znovu použít pro seznam oblíbených barev. Je vhodné uložit šablonu jenom na jednom místě, aby byl xaml čitelnější. Důležitější je, že tím zajistíte, že změny šablony ovlivní všechny instance. Pojďme šablonu extrahovat do prostředku.

Každý FrameworkElement může mít svůj seznam prostředků. Rozhodli jsme se pro tuto stránku nastavit globální šablonu, takže přidáme <Page.Reources> značku nad <Grid> prvek. Pak přesuňte celou <DataTemplate> značku a její obsah do ní.

<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 vás upozorní, že objekty v rámci <Page.Resources> značky (což je IDictionary) musí mít Key atribut, takže ho <DataTemplate>přidejte do .

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

Tento klíč nám umožňuje odkazovat na tuto šablonu jinde na stránce, například ComboBox.ItemTemplate, která ztratila svůj obsah. ComboBox Pokud chcete prostředek použítColorDescriptor, můžete značku odebrat <ComboBox.ItemTemplate> a použít ji jako atribut uvnitř samotné značky<ComboBox>. Celá <ComboBox> značka vypadá takto:

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

Aplikaci můžete spustit znovu, jen abyste ověřili, že šablona položky funguje.

6. Sestavení zbytku uživatelského rozhraní

Uživatelské rozhraní je jednoduché. Všechny ovládací prvky (rozevírací seznam, tlačítko Přidat k oblíbeným , seznam oblíbených položek (s textem záhlaví) a tlačítko Odebrat z oblíbených položek ) se umístí do jednoho svislého uzlu StackPanel. Celý obsah <Grid> prvku nahraďte následujícím kódem:

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

Mezi aktuálně vybranou položkou TwoWay a ComboBoxSelectedColor vlastností ColorListLogic třídy existuje vazba.

7. Spuštění aplikace

Spusťte aplikaci, vyberte barvu z tlačítka ComboBoxa vyberte tlačítko Přidat k oblíbeným . Nic se nestane. Přidání zarážky na konec AddSelectedColorToFavorites metody ve ColorListLogic třídě ukazuje, že kód funguje. Vybraná barva se přidá do FavoriteColors seznamu.

Důvodem, proč uživatelské rozhraní neodráží změny v tomto List<ColorDescriptor> případě, je nutné, aby uživatelské rozhraní bylo při změně kolekce upozorněno. Pro seznamy se to provádí prostřednictvím System.Collections.Specialized.INotifyCollectionChanged rozhraní. Naštěstí to nemusíme implementovat. Třída System.Collections.ObjectModel.ObservableCollection<T> už má všechno, co potřebujeme.

Aby naše aplikace fungovala, stačí použít ObservableCollection<T> třídu místo List<T> třídy pro FavoriteColors vlastnost.

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

Pokud teď aplikaci spustíte, vyberete barvy z rozevíracího seznamu a vyberete tlačítko Přidat k oblíbeným položkám . Vybrané oblíbené barvy se projeví v objektu ListBox. Hezké!

Screenshot of sample app showing favorite colors added to list.

8. Vyhněte se přidávání prázdných položek

Při spuštění aplikace není v rozevíracím seznamu vybraná žádná barva. Pokud teď vyberete tlačítko Přidat k oblíbeným , nullpřidá se do seznamu s. Jedná se o chybu, takže ji opravíme.

Do metody bychom mohli přidat null kontrolu AddSelectedColorToFavorites , ale to by nezabránilo zobrazení tlačítka Přidat do oblíbených položek , pokud není funkční. Místo toho se jen ujistěme, že v rozevíracím seznamu je vždy vybraná položka. Vzhledem k tomu, že SelectedItem vlastnost rozevíracího seznamu je obousměrně svázaná s SelectedColor vlastností v kódu, pojďme ji jednoduše inicializovat na platnou hodnotu při spuštění. Na konec konstruktoru ColorListLogic přidejte následující řádek:

SelectedColor = LotsOfColors[0];

Tím se zajistí, že se při spuštění aplikace vybere první položka LotsOfColors seznamu. Uživatel nebude moct do kolekce přidat nullFavoriteColors .

9. Odebrání oblíbených barev

Dalším krokem je přidání možnosti odebrat oblíbené barvy z objektu ListBox. K tomu dojde tak, že uživatel vybere položku v seznamu ListBoxa vybere tlačítko Odebrat z oblíbených položek .

Podobně jako v průběhu práce ComboBox můžeme sledovat položku, kterou uživatel vybral ve ListBox své SelectedItem vlastnosti. Můžeme to svázat s vlastností v kódu. Přidejte ji do ColorListLogic třídy.

private ColorDescriptor _selectedFavoriteColor;

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

public bool IsRemoveFavoriteColorButtonVisible => SelectedFavoriteColor != null;

Předchozí kód obsahuje také logickou vlastnost pro řízení, zda má být tlačítko pro odebrání položek ze seznamu oblíbených položek viditelné. Jakákoli změna, která způsobí, že SelectedFavoriteColor uživatelské rozhraní bude dotazovat tuto vlastnost, a odpovídajícím způsobem jednat.

Abychom skutečně provedli odebrání barvy z oblíbeného seznamu, musíme napsat ještě jednu metodu.

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

Pokud chcete tlačítko převést v XAML nahoru, otevřete ColorList.xaml a změňte XAML na tlačítko Odebrat z oblíbených položek. Změňte ji tak, aby obsahovala Visibility vazbu i Click vazbu.

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

Vše, co zbývá, je vytvořit vazbu objektu ListBoxLogic.SelectedFavoriteColor 's SelectedItem vlastností. SelectedItem Přidejte atribut do jazyka ListBox XAML.

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

Spusťte aplikaci a ověřte, že můžete přidat barvy do seznamu oblíbených barev a odebrat je. Všimněte si, jak se zobrazí tlačítko Odebrat z oblíbených položek a zmizí podle toho, jestli máte vybranou oblíbenou barvu, kterou je možné odebrat.

Shrnutí

Tato lekce znázorňuje, jak můžete získat a nastavit vybranou položku v ovládacím prvku vazbou ComboBoxListBox jejich SelectedItem vlastností na vlastnost jazyka C#. Viděli jste také, jak použití ObservableCollection v kódu způsobí, že uživatelské rozhraní automaticky aktualizuje obsah ovládacích prvků, které zobrazují více položek.

V této lekci uživatel vybere své oblíbené barvy. Dostupné barvy jsou uvedeny v rozevíracím seznamu ( ComboBox ovládací prvek). Uživatel vybere barvu a přidá ji do oblíbených položek stisknutím tlačítka. Oblíbené barvy se zobrazí pod úplným seznamem. Když vyberete oblíbenou barvu, zobrazí se tlačítko, které uživateli umožní odebrat vybranou barvu ze svých oblíbených položek.

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

Nejprve přidáme možnost vybrat barvu z LotsOfColors kolekce a přidat ji do seznamu oblíbených barev.

1. Vytvoření SelectedColor vlastnosti

Začněme kódem a pak projdeme změny uživatelského rozhraní.

Potřebujeme způsob, jak určit, kterou položku (tj. instance ColorDescriptor třídy) uživatel vybere v rozevíracím seznamu. Ovládací ComboBox prvek má SelectedItem vlastnost, která získá a nastaví aktuálně vybranou položku. Tuto vlastnost tedy můžeme svázat s vlastností typu ColorDescriptor v našem kódu.

Otevřete ColorListDataContext.cs a přidejte následující kód:

private ColorDescriptor? _selectedColor;

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

Tento model by teď měl znát. Jedná se o standardní vlastnost, která INotifyPropertyChanged využívá mechanismus pomocí ObservableObject základní třídy.

2. Vytvoření FavoriteColors seznamu

Seznam FavoriteColors ukládá barvy, které uživatel zvolil jako oblíbenou. Je to jen jednoduchá vlastnost.

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

3. Přidejte vybranou barvu k oblíbeným položkám.

Přidání vybrané barvy do oblíbených položek probíhá v AddSelectedColorToFavorites metodě. V rámci preventivních opatření zkontrolujte, zda SelectedColor je nullvlastnost . Pokud ano, vraťte se z metody. V opačném případě přidejte vybranou barvu do FavoriteColors seznamu.

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

Při volání SelectedColor této metody by měla být naplněna barvou přidanou do seznamu oblíbených položek, ale nejlepší není vytvořit předpoklady.

S tímto kódem už jsme hotovi (prozatím). Pojďme se zaměřit na XAML.

4. Změňte na ListBoxComboBox

Protože chceme mít úplný seznam barev, které se mají zobrazit v rozevíracím seznamu (což je ComboBox ovládací prvek), musíme změnit XAML. Naštěstí oba ListBox a ComboBox jsou potomky ItemsControl ovládacího prvku a fungují podobně, i když existují mnoho rozdílů v tom, jak vypadají a chovají se. Jediné, co musíme udělat, je nahradit ListBoxComboBox v ColorList.xaml souboru. K tomu můžete použít příkaz Pro úpravy>najít a nahradit rychlé nahrazení> (CtrlL+H).

Repeat screenshot of Visual Studio showing Quick Replace command.

Pokud teď aplikaci rychle spustíte, uvidíte, že ListBox byla nahrazena znakem , ComboBoxale barvy se stále zobrazují pomocí stejné šablony.

Screenshot of sample app showing color list in a ComboBox.

5. Extrahování šablony do prostředku

Když už mluvíme o šabloně, budete ji muset později znovu použít pro seznam oblíbených barev. Je vhodné uložit šablonu jenom na jednom místě, aby byl xaml čitelnější. Důležitější je, že tím zajistíte, že změny šablony ovlivní všechny instance. Pojďme šablonu extrahovat do prostředku.

Každý FrameworkElement může mít svůj seznam prostředků. Rozhodli jsme se, že naše šablona bude globální pro celý Window, takže přidáme <Window.Reources> značku nad <Grid> prvek. Pak přesuňte celou <DataTemplate> značku a její obsah do ní.

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

Jedná se <Window.Resources> o slovník, takže každá položka by měla mít také klíč. Přidali jsme ho do .<DataTemplate>

<DataTemplate x:Key="ColorTemplate">

Tento klíč nám umožňuje odkazovat na tuto šablonu odjinud Windowuvnitř , například ComboBox.ItemTemplate, která ztratila svůj obsah. ComboBox Pokud chcete prostředek použítColorDescriptor, můžete značku odebrat <ComboBox.ItemTemplate> a použít ji jako atribut uvnitř samotné značky<ComboBox>. Celá <ComboBox> značka vypadá takto:

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

Aplikaci můžete spustit znovu, jen abyste ověřili, že šablona položky funguje.

6. Sestavení zbytku uživatelského rozhraní

Uživatelské rozhraní je jednoduché. Všechny ovládací prvky (rozevírací seznam, tlačítko Přidat k oblíbeným, seznam oblíbených položek (s textem záhlaví) a tlačítko Odebrat z oblíbených položek) jsou vnořené do jednoho svislého .StackPanel Celý <Grid> prvek nahraďte následujícím kódem:

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

Mezi aktuálně vybranou položkou TwoWay a ComboBoxSelectedColor vlastností ColorListDataContext třídy existuje vazba.

7. Vytvoření obslužné rutiny kliknutí pro Add to Favorites tlačítko

Logiku pro přidání vybrané barvy do FavoriteColors seznamu v AddSelectedColorToFavorites metodě jsme už implementovali. Tuto metodu však potřebujeme vyvolat, když uživatel klikne na tlačítko.

Poklikejte na Add to Favorites tlačítko v návrháři vizuálů v sadě Visual Studio. Tím se Button_Click v kódu vytvoří metoda a odkaz na ni v Click události v XAML:

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

Přejmenujte metodu Button_Click do AddToFavorites_Click kódu i XAML. Můžete to udělat tak, že ho přejmenujete v kódu a pak pomocí ikony šroubováku vyberete "Přejmenovat Button_Click na AddToFavorites_Click". To se postará také o změnu názvu metody v souboru XAML.

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

Přidejte do horní části ColorList třídy vlastnost pro usnadnění přístupu k ColorListDataContext:

private ColorListDataContext DC => (ColorListDataContext)DataContext;

Potom v AddToFavorites_Click metodě vyvoláte dříve napsanou logiku ColorListDataContext z třídy:

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

8. Spusťte aplikaci.

Spusťte aplikaci, vyberte barvu z tlačítka ComboBoxa vyberte tlačítko Přidat k oblíbeným . Nic se nestane. Přidání zarážky na konec AddSelectedColorToFavorites metody ve ColorListDataContext třídě ukazuje, že kód funguje. Vybraná barva se přidá do FavoriteColors seznamu.

Důvodem, proč uživatelské rozhraní neodráží změny v tomto List<ColorDescriptor> případě, je nutné, aby uživatelské rozhraní bylo při změně kolekce upozorněno. Pro seznamy se to provádí prostřednictvím System.Collections.Specialized.INotifyCollectionChanged rozhraní. Naštěstí to nemusíme implementovat. Třída System.Collections.ObjectModel.ObservableCollection<T> už má všechno, co potřebujeme.

Aby naše aplikace fungovala, stačí použít ObservableCollection<T> třídu místo List<T> třídy pro FavoriteColors vlastnost.

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

Pokud teď aplikaci spustíte, vyberete barvy z rozevíracího seznamu a vyberete tlačítko Přidat k oblíbeným položkám . Vybrané oblíbené barvy se projeví v objektu ListBox. Hezké!

Screenshot of sample app showing selected color added to favorites.

9. Vyhněte se přidávání prázdných položek

Při spuštění aplikace není v rozevíracím seznamu vybraná žádná barva. V současné době máme check-in metodu nullAddSelectedColorToFavorites , abychom zabránili přidání položek null do seznamu, když vyberete tlačítko Přidat do oblíbených položek . Pojďme to změnit, abychom zajistili, že v rozevíracím seznamu bude vždy vybraná barva.

Kontrola null nezabrání zobrazení tlačítka Přidat k oblíbeným položkám , pokud není funkční. Pojďme se tedy ujistit, že je vždy vybraná položka. Vzhledem k tomu, že SelectedItem vlastnost rozevíracího seznamu je obousměrně svázaná s SelectedColor vlastností v kódu, pojďme ji jednoduše inicializovat na platnou hodnotu při spuštění. Na konec konstruktoru ColorListDataContext přidejte následující řádek:

SelectedColor = LotsOfColors[0];

Tím se zajistí, že se při spuštění aplikace vybere první položka LotsOfColors seznamu. Uživatel nebude moct do kolekce přidat nullFavoriteColors .

10. Odebrání oblíbených barev

Dalším krokem je přidání možnosti odebrat oblíbené barvy z objektu ListBox. K tomu dochází tak, že uživatel vybere položku v seznamu ListBoxa vybere tlačítko Odebrat z oblíbených položek .

Podobně jako v průběhu práce ComboBox můžeme sledovat položku, kterou uživatel vybral ve ListBox své SelectedItem vlastnosti. Můžeme to svázat s vlastností v kódu. Přidejte novou vlastnost do ColorListDataContext třídy následujícím způsobem:

private ColorDescriptor? _selectedFavoriteColor;

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

public bool IsRemoveFavoriteEnabled => SelectedFavoriteColor != null;

Předchozí kód obsahuje také logickou vlastnost pro řízení, zda má být tlačítko pro odebrání položek ze seznamu oblíbených položek viditelné. Jakákoli změna, která způsobí, že SelectedFavoriteColor uživatelské rozhraní bude dotazovat tuto vlastnost, a odpovídajícím způsobem jednat.

Abychom skutečně provedli odebrání barvy z oblíbeného seznamu, musíme napsat ještě jednu metodu.

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

Dále svážete vlastnost ListBoxSelectedItemSelectedFavoriteColor s vlastností. SelectedItem Přidejte atribut do in ListBoxCodeList.xaml.

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

Pokud chcete připojit tlačítko Odebrat z oblíbených položek , změňte XAML tlačítka Odebrat z oblíbených položek tak, aby obsahoval IsEnabled vazbu a obslužnou rutinu Click události.

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

Potřebujeme také přidat metodu RemoveFromFavorites_Click pro ColorList.xaml.csvolání RemoveFromFavoriteColor v naší logice.

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

Spusťte aplikaci a ověřte, že můžete přidat barvy do seznamu oblíbených barev a odebrat je. Všimněte si, jak se tlačítko Odebrat z oblíbených položek zakáže a povolí podle toho, jestli máte vybranou oblíbenou barvu, kterou je možné odebrat.

V rámci cvičení zkuste skrýt celou část uživatelského rozhraní Oblíbené barvy , pokud FavoriteColors je kolekce prázdná. Tip: Použijte StackPanel k seskupení ovlivněných ovládacích prvků a vytvořte vazbu viditelnosti StackPanelna vlastnost ve ColorListDataContext třídě. Kdykoli přidáte nebo odeberete oblíbenou barvu, upozorněte uživatelské rozhraní na změny této vlastnosti.

Shrnutí

Tato lekce znázorňuje, jak můžete získat a nastavit vybranou položku v ovládacím ComboBox prvku pomocí ListBox vazby vlastností SelectedItem jazyka C#. Viděli jste také, jak použití ObservableCollection v kódu způsobí, že uživatelské rozhraní automaticky aktualizuje obsah ovládacích prvků, které zobrazují více položek.