Koleksiyonlar değiştiğinde kullanıcı arabirimini güncelleştirme

10 dakika

Bu derste kullanıcı sık kullanılan renkleri seçecektir. Kullanılabilir renkler bir açılan listede (denetim ComboBox ) listelenir. Kullanıcı bir renk seçer ve bir düğmeye basarak rengi sık kullanılanlarınıza ekler. Sık kullanılan renkler aşağıda görüntülenir. Sık kullanılan bir rengin seçilmesi, kullanıcının seçili rengi sık kullanılanlarından kaldırmasını sağlayan bir düğme de görüntüler.

Screenshot of sample databinding app running and displaying favorite colors.

İlk olarak, koleksiyondan LotsOfColors bir renk seçme özelliğini ekleyin ve bunu sık kullanılan renkler listesine ekleyin.

1. Özelliği oluşturma `SelectedColor`

Kodla başlayalım ve ardından kullanıcı arabiriminde ilerleyeceğiz.

Kullanıcının açılan listede hangi öğeyi (yani sınıfın ColorDescriptor örneğini) seçtiğini belirlemek için bir yönteme ihtiyacımız var. Denetimin ComboBox , seçili durumdaki öğeyi alan ve ayarlayan bir SelectedItem özelliği vardır. Bu nedenle, bu özelliği kodumuzda türündeki ColorDescriptor bir özelliğe bağlayabiliriz.

ColorListLogic.cs dosyasını açın ve aşağıdaki kodu ekleyin:

private ColorDescriptor _selectedColor;

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

Bu desenin şimdiye kadar tanıdık olması gerekir. Temel sınıfın INotifyPropertyChanged yardımıyla ObservableObject mekanizmayla dekore edilmiş standart bir özelliktir.

2. Listeyi oluşturma `FavoriteColors`

Liste, FavoriteColors kullanıcının sık kullanılanları olarak seçtiği renkleri depolar. Sadece basit bir özellik.

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

3. Seçili rengi sık kullanılanlara ekleme

Seçilen rengi sık kullanılanlara ekleme yönteminde AddSelectedColorToFavorites gerçekleşir.

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

Bu yöntem çağrıldığında sık SelectedColor kullanılanlar listesine eklenmesi gereken renkle doldurulduğu varsayımıdır.

Bu işlemle kodla işimiz bitti (şimdilik). Şimdi dikkatimizi XAML'e çevirelim.

4.`ListBoxComboBox`

Bir açılan listede (denetim olan ComboBox ) renklerin tam listesinin gösterilmesini istediğimiz için XAML'yi değiştirmemiz gerekir. Neyse ki, hem hem ComboBox de ListBox denetimin ItemsControl alt öğeleridir ve görünüşleri ve davranışları arasında bir fark olmasına rağmen benzer şekilde çalışırlar. Tek yapmamız gereken ColorList.xaml dosyasında ile değiştirmektir ListBoxComboBox . Bunun için Bul ve Değiştir>Hızlı Değiştir komutunu (CtrlL+H) kullanabilirsiniz.>

Screenshot of Visual Studio showing the Quick Replace command.

Uygulamayı şimdi hızlı bir şekilde çalıştırırsanız, öğesinin ListBox ile ComboBoxdeğiştirildiğini ancak renklerin yine de aynı şablon kullanılarak görüntülendiğini görebilirsiniz.

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

5. Şablonu kaynağa ayıklama

Şablondan bahsetmişken, şablonu daha sonra sık kullanılan renkler listesi için yeniden kullanmanız gerekir. XAML'nizin daha okunabilir olması için şablonu yalnızca tek bir yerde depolamak iyi bir fikirdir. Daha da önemlisi, şablonda yapılan değişikliklerin her örneği etkilemesini sağlar. Şablonu bir kaynağa ayıklayalım.

Herhangi birinin FrameworkElement kaynak listesi olabilir. Şablonumuzu bu sayfa için genel yapmayı seçtik, bu nedenle öğesinin <Grid> üzerine bir <Page.Reources> etiket ekleyelim. Ardından etiketin tamamını <DataTemplate> ve içindekileri taşıyı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, etiket içindeki <Page.Resources> nesnelerin (bir ) IDictionaryözniteliği Key olması gerektiği konusunda sizi uyarır, bu nedenle bunu öğesine <DataTemplate>ekleyin.

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

Bu anahtar, ComboBox.ItemTemplateiçeriğini kaybeden gibi sayfanın başka bir yerinden bu şablona başvurmamıza olanak tanır. ComboBox Kaynağı kullanmak ColorDescriptor için etiketi kaldırabilir ve etiketin <ComboBox.ItemTemplate> içinde <ComboBox> bir öznitelik olarak kullanabilirsiniz. Etiketin tamamı <ComboBox> şöyle görünür:

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

Öğe şablonunun çalıştığını doğrulamak için uygulamayı yeniden çalıştırabilirsiniz.

6. Kullanıcı arabiriminin geri kalanını derleme

Kullanıcı arabirimi basittir. Tüm denetimler (açılan liste, Sık Kullanılanlara Ekle düğmesi, sık kullanılanlar listesi (üst bilgi metniyle) ve Sık Kullanılanlardan Kaldır düğmesi) tek bir dikey StackPaneliçine yerleştirilir. öğesinin tüm içeriğini <Grid> aşağıdakilerle değiştirin:

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

içinde seçili durumdaki öğe ComboBox ile SelectedColor sınıfının özelliği ColorListLogic arasında bir TwoWay bağlama vardır.

7. Uygulamayı çalıştırma

Uygulamayı şimdi çalıştırın, içinden ComboBoxbir renk seçin ve Sık Kullanılanlara Ekle düğmesini seçin. Hiçbir şey olmaz. sınıfındaki yöntemin AddSelectedColorToFavoritesColorListLogic sonuna bir kesme noktası eklemek, kodun çalıştığını gösterir. Seçilen renk listeye eklenir FavoriteColors .

Kullanıcı arabiriminin bu List<ColorDescriptor> içindeki değişiklikleri yansıtmama nedeni, koleksiyon değiştiğinde kullanıcı arabiriminin bilgilendirilmesi gerektiğidir. Listeler için bu işlem arabirim üzerinden System.Collections.Specialized.INotifyCollectionChanged yapılır. Neyse ki bunu uygulamamız gerekmiyor. Sınıfta System.Collections.ObjectModel.ObservableCollection<T> ihtiyacımız olan her şey zaten var.

Uygulamamızın çalışmasını sağlamak için tek yapmamız gereken özelliği için FavoriteColors sınıfı yerine List<T> sınıfını kullanmaktırObservableCollection<T>.

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

Uygulamayı şimdi çalıştırıyorsanız, açılan listeden renkleri seçip Sık Kullanılanlara Ekle düğmesini seçmek artık düzgün çalışıyor. Seçilen sık kullanılan renkler öğesine ListBoxyansıtılır. Güzel!

Screenshot of sample app showing favorite colors added to list.

8. Boş öğeler eklemekten kaçının

Uygulamayı başlattığınızda, açılan listede seçili renk yoktur. Sık Kullanılanlara Ekle düğmesini şimdi seçerseniz, nullbunlar listeye eklenir. Bu bir hata, bu yüzden düzeltelim!

Yöntemine AddSelectedColorToFavorites bir null denetim ekleyebiliriz, ancak bu, sık kullanılanlara ekle düğmesinin işlevsel olmadığında gösterilmesini engellemez. Bunun yerine, açılan listede her zaman bir öğe seçildiğinden emin olalım. Açılan listenin SelectedItem özelliği koddaki özelliğe iki yönlü bağlı SelectedColor olduğundan, bunu başlangıçta geçerli bir değere başlatalım. Oluşturucunun sonuna ColorListLogic aşağıdaki satırı ekleyin:

SelectedColor = LotsOfColors[0];

Bu, uygulama başlatıldığında listenin ilk öğesinin LotsOfColors seçilmesini sağlar. Kullanıcı koleksiyona bir nullFavoriteColors ekleyemez.

9. Sık kullanılan renkleri kaldırma

Sonraki adım, sık kullanılan renkleri 'den kaldırma özelliğini eklemektir ListBox. Bu, kullanıcının içinde ListBoxbir öğe seçip Sık Kullanılanlardan Kaldır düğmesini seçmesi ile gerçekleşir.

Çalışma şekline ComboBox benzer şekilde, kullanıcının özelliği aracılığıyla SelectedItem içinde seçtiği öğeyi ListBox izleyebiliriz. Bunu koddaki bir özelliğe bağlayabiliriz. Bunu sınıfına ColorListLogic ekleyin.

private ColorDescriptor _selectedFavoriteColor;

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

public bool IsRemoveFavoriteColorButtonVisible => SelectedFavoriteColor != null;

Yukarıdaki kod, sık kullanılanlar listesinden öğe kaldırma düğmesinin görünür olup olmayacağını denetlemek için bir Boole özelliği de içerir. herhangi bir değişiklik SelectedFavoriteColor , kullanıcı arabiriminin bu özelliği sorgulamasına ve buna göre davranmasına neden olur.

Rengin sık kullanılanlar listesinden kaldırılmasını gerçekleştirmek için bir yöntem daha yazmamız gerekir.

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

Düğmeyi XAML'de yukarı çevirmek için ColorList.xaml dosyasını açın ve Sık Kullanılanlardan Kaldır düğmesinin XAML'sini değiştirin. Bağlamanın yanı sıra bağlamayı Visibility da içereceği şekilde Click değiştirin.

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

Geriye kalan tek şey , 'SelectedItemleri ListBoxözelliğine Logic.SelectedFavoriteColor bağlamaktır. özniteliğini SelectedItem XAML'ye ListBox ekleyin.

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

Uygulamayı şimdi çalıştırın ve sık kullanılan renklerin listesine renk ekleyebildiğinizi ve bunları kaldırabildiğinizi doğrulayın. Sık Kullanılanlardan Kaldır düğmesinin, kaldırılabilir bir sık kullanılan rengi seçili olup olmadığına göre nasıl göründüğüne ve kaybolduğuna dikkat edin.

Özet

Bu derste, özelliklerini bir ComboBoxListBox C# özelliğine bağlayarak SelectedItem veya denetiminde seçili öğeyi nasıl edinebileceğiniz ve ayarlayabileceğiniz gösterilmiştir. Kodda kullanmanın ObservableCollection kullanıcı arabiriminin birden çok öğe görüntüleyen denetimlerin içeriğini otomatik olarak güncelleştirmesine nasıl neden olduğunu da gördünüz.

Bu derste kullanıcı en sevdiği renkleri seçecektir. Kullanılabilir renkler bir açılan listede (denetim ComboBox ) listelenir. Kullanıcı bir renk seçer ve bir düğmeye basarak rengi sık kullanılanlara ekler. Sık kullanılan renkler tam listenin altında görüntülenir. Sık kullanılan bir rengin seçilmesi, kullanıcının seçili rengi sık kullanılanlarından kaldırmasını sağlayan bir düğme de görüntüler.

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

İlk olarak, koleksiyondan LotsOfColors bir renk seçme özelliğini ekleyeceğiz ve bunu sık kullanılan renkler listesine ekleyeceğiz.

1. Özelliği oluşturma `SelectedColor`

Kodla başlayalım ve ardından kullanıcı arabirimi değişikliklerinde ilerleyeceğiz.

Aşağıdaki kodu açın ColorListDataContext.cs ve ekleyin:

private ColorDescriptor? _selectedColor;

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

Bu desenin şimdiye kadar tanıdık olması gerekir. Temel sınıfın yardımıyla ObservableObject mekanizmadan INotifyPropertyChanged yararlanan standart bir özelliktir.

2. Listeyi oluşturma `FavoriteColors`

Liste, FavoriteColors kullanıcının sık kullanılanları olarak seçtiği renkleri depolar. Sadece basit bir özellik.

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

3. Seçili rengi sık kullanılanlara ekleme

Seçilen rengi sık kullanılanlara ekleme yönteminde AddSelectedColorToFavorites gerçekleşir. Önlem olarak özelliğinin SelectedColor olup nullolmadığını denetleyin. Bu durumda yönteminden geri dönün. Aksi takdirde, seçilen rengi FavoriteColors listeye ekleyin.

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

Bu yöntem çağrıldığında, SelectedColor sık kullanılanlar listesine eklenen renkle doldurulmalıdır, ancak varsayımlarda bulunmamak en iyisidir.

Bu işlemle kodla işimiz bitti (şimdilik). Şimdi dikkatimizi XAML'e çevirelim.

4.`ListBoxComboBox`

Bir açılan listede (denetim olan ComboBox ) renklerin tam listesinin gösterilmesini istediğimiz için XAML'yi değiştirmemiz gerekir. Neyse ki, hem hem ComboBox de ListBox denetimin ItemsControl alt öğeleridir ve görünüş ve davranışlarında çok sayıda farklılık olmasına rağmen benzer şekilde çalışırlar. Tek yapmamız gereken dosyadaki ColorList.xaml ile ComboBox değiştirmekListBox. Bunun için Bul ve Değiştir>Hızlı Değiştir komutunu (CtrlL+H) kullanabilirsiniz.>

Repeat screenshot of Visual Studio showing Quick Replace command.

Screenshot of sample app showing color list in a ComboBox.

5. Şablonu kaynağa ayıklama

Herhangi birinin FrameworkElement kaynak listesi olabilir. Şablonumuzun tamamı Windowiçin genel olmasını seçtik, bu nedenle öğesinin <Grid> üzerine bir <Window.Reources> etiket ekleyelim. Ardından etiketin tamamını <DataTemplate> ve içindekileri taşıyı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>

<Window.Resources> bir sözlük olduğundan her girişin de bir anahtarı olmalıdır. öğesine ekledik <DataTemplate>.

<DataTemplate x:Key="ColorTemplate">

Bu anahtar, içeriğini kaybeden gibi içinde WindowComboBox.ItemTemplatebaşka bir yerden bu şablona başvurmamıza olanak tanır. ComboBox Kaynağı kullanmak ColorDescriptor için etiketi kaldırabilir ve etiketin <ComboBox.ItemTemplate> içinde <ComboBox> bir öznitelik olarak kullanabilirsiniz. Etiketin tamamı <ComboBox> şöyle görünür:

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

Öğe şablonunun çalıştığını doğrulamak için uygulamayı yeniden çalıştırabilirsiniz.

6. Kullanıcı arabiriminin geri kalanını derleme

Kullanıcı arabirimi basittir. Tüm denetimler (açılan liste, Sık Kullanılanlara Ekle düğmesi, sık kullanılanlar listesi (üst bilgi metniyle) ve Sık Kullanılanlardan Kaldır düğmesi) tek bir dikey StackPaneliçinde iç içe yerleştirilmiş. Öğesinin tamamını <Grid> aşağıdakilerle değiştirin:

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

içinde seçili durumdaki öğe ComboBox ile SelectedColor sınıfının özelliği ColorListDataContext arasında bir TwoWay bağlama vardır.

7. Düğme için Tıklama işleyicisi `Add to Favorites` oluşturma

Yönteminde seçilen rengi FavoriteColors listeye ekleme mantığını zaten uyguladık AddSelectedColorToFavorites . Ancak, kullanıcı düğmeye tıkladığında bu yöntemi çağırmamız gerekir.

Visual Studio'da görsel tasarımcıdaki düğmeye çift tıklayın Add to Favorites . Bu, arka planda kodda bir Button_Click yöntem ve XAML'deki olayda Click buna bir başvuru oluşturur:

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

Button_Click yöntemini AddToFavorites_Click hem codebehind hem de XAML'de olarak yeniden adlandırın. Bunu yapmak için kodda yeniden adlandırabilir ve ardından tornavida simgesini kullanarak "Yeniden adlandır Button_ClickAddToFavorites_Click" seçeneğini belirleyebilirsiniz. Bu işlem, XAML dosyasındaki yöntemin adını da değiştirir.

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

öğesine erişmeyi ColorListDataContextkolaylaştırmak için sınıfının en üstüne ColorList bir convenience özelliği ekleyin:

private ColorListDataContext DC => (ColorListDataContext)DataContext;

Ardından yönteminde AddToFavorites_Click sınıfından önceden yazılmış mantığı çağırın ColorListDataContext :

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

8. Uygulamayı çalıştırma

Uygulamayı şimdi çalıştırın, içinden ComboBoxbir renk seçin ve Sık Kullanılanlara Ekle düğmesini seçin. Hiçbir şey olmaz. sınıfındaki yöntemin AddSelectedColorToFavoritesColorListDataContext sonuna bir kesme noktası eklemek, kodun çalıştığını gösterir. Seçilen renk listeye eklenir FavoriteColors .

Uygulamamızın çalışmasını sağlamak için tek yapmamız gereken özelliği için FavoriteColors sınıfı yerine List<T> sınıfını kullanmaktırObservableCollection<T>.

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

Screenshot of sample app showing selected color added to favorites.

9. Boş öğe eklemekten kaçının

Uygulamayı başlattığınızda, açılan listede seçili renk yoktur. Sık Kullanılanlara Ekle düğmesini seçtiğinizde 'null' öğelerin listeye eklenmesini önlemek için şu anda yönteminde bir null denetimimiz AddSelectedColorToFavorites var. Şimdi bunu değiştirerek açılan listede her zaman bir renk seçildiğinden emin olalım.

Denetim, null Sık Kullanılanlara Ekle düğmesinin işlevsel olmadığında gösterilmesini engellemez. Bu nedenle, her zaman seçili bir öğe olduğundan emin olalım. Açılan listenin SelectedItem özelliği koddaki özelliğe iki yönlü bağlı SelectedColor olduğundan, bunu başlangıçta geçerli bir değere başlatalım. Oluşturucunun sonuna ColorListDataContext aşağıdaki satırı ekleyin:

SelectedColor = LotsOfColors[0];

Bu, uygulama başlatıldığında listenin ilk öğesinin LotsOfColors seçilmesini sağlar. Kullanıcı koleksiyona bir nullFavoriteColors ekleyemez.

10. Sık kullanılan renkleri kaldırma

private ColorDescriptor? _selectedFavoriteColor;

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

public bool IsRemoveFavoriteEnabled => SelectedFavoriteColor != null;

Rengin sık kullanılanlar listesinden kaldırılmasını gerçekleştirmek için bir yöntem daha yazmamız gerekir.

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

Ardından, 's SelectedItem öğesini özelliğine SelectedFavoriteColor bağlayınListBox. özniteliğini SelectedItem içine ListBoxCodeList.xamlekleyin.

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

Sık Kullanılanlardan Kaldır düğmesini bağlamak için Sık Kullanılanlardan Kaldır düğmesinin XAML'sini bağlamanın yanı sıra olay işleyicisini IsEnabledClick de içerecek şekilde değiştirin.

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

Mantığımızı çağırmak RemoveFromFavoriteColor için ColorList.xaml.csyöntemine de eklememiz RemoveFromFavorites_Click gerekir.

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

Alıştırma olarak, koleksiyon boş olduğunda kullanıcı arabiriminin Sık Kullanılan Renkler bölümünün tamamını gizlemeyi FavoriteColors deneyin. İpucu: etkilenen denetimleri gruplandırmak ve 'nin Görünürlüğünü sınıftaki ColorListDataContext bir özelliğe bağlamak StackPaneliçin kullanınStackPanel. Sık kullanılan bir renk eklendiğinde veya kaldırıldığında, bu özellikte yapılan değişiklikler hakkında kullanıcı arabirimini bilgilendirin.

Özet

Bu derste, özelliklerini bir C# özelliğine bağlayarak SelectedItem veya ComboBoxListBox denetiminde seçili öğeyi nasıl edinebileceğiniz ve ayarlayabileceğiniz gösterilmiştir. Kodda kullanmanın ObservableCollection kullanıcı arabiriminin birden çok öğe görüntüleyen denetimlerin içeriğini otomatik olarak güncelleştirmesine nasıl neden olduğunu da gördünüz.

Devam et

1. Özelliği oluşturma SelectedColor

2. Listeyi oluşturma FavoriteColors

3. Seçili rengi sık kullanılanlara ekleme

4.ListBoxComboBox

5. Şablonu kaynağa ayıklama

6. Kullanıcı arabiriminin geri kalanını derleme

7. Uygulamayı çalıştırma

8. Boş öğeler eklemekten kaçının

9. Sık kullanılan renkleri kaldırma

Özet

1. Özelliği oluşturma SelectedColor

2. Listeyi oluşturma FavoriteColors

3. Seçili rengi sık kullanılanlara ekleme

4.ListBoxComboBox

5. Şablonu kaynağa ayıklama

6. Kullanıcı arabiriminin geri kalanını derleme

7. Düğme için Tıklama işleyicisi Add to Favorites oluşturma

8. Uygulamayı çalıştırma

9. Boş öğe eklemekten kaçının

10. Sık kullanılan renkleri kaldırma

Özet

Geri Bildirim

1. Özelliği oluşturma `SelectedColor`

2. Listeyi oluşturma `FavoriteColors`

4.`ListBoxComboBox`

1. Özelliği oluşturma `SelectedColor`

2. Listeyi oluşturma `FavoriteColors`

4.`ListBoxComboBox`

7. Düğme için Tıklama işleyicisi `Add to Favorites` oluşturma