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

Tamamlandı

Bu derste, Kullanıcı sık kullanılan renkler ' i seçer. Kullanılabilir renkler bir açılan pencerede (bir ComboBox Denetim) listelenir. Kullanıcı bir renk seçer ve bir düğmeye basarak bunu sık kullanılanlara 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ına izin veren bir düğme de görüntüler.

Çalışan ve sık kullanılan renkleri görüntüleyen örnek veri bağlama uygulamasının ekran görüntüsü.

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

1. özelliği oluşturma SelectedColor

Kod ile başlayalım, ardından kullanıcı arabiriminden bizim gibi çalışacağız.

Kullanıcının açılan menüde seçtiği öğe (yani, sınıf örneği) belirlemede bir yönteme ihtiyacımız var ColorDescriptor . ComboBoxDenetim SelectedItem , şu anda seçili olan öğeyi alıp ayarlayan bir özelliğine sahiptir. Bu nedenle, bu özelliği kodumuza türünde bir özelliğe bağlayabiliriz ColorDescriptor .

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

private ColorDescriptor _selectedColor;

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

Bu düzenin şimdi tanıdık olması gerekir. INotifyPropertyChangedTemel sınıfın yardımıyla, mekanizmasıyla donatılmış standart bir özelliktir ObservableObject .

2. listeyi oluşturun FavoriteColors

FavoriteColorsListe, kullanıcının sık kullanılanları olarak seçtiği renkleri depolar. Bu yalnızca basit bir özelliktir.

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

3. seçili rengi sık kullanılanlara ekleyin

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

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

Varsayım, bu yöntem çağrıldığında, SelectedColor Sık Kullanılanlar listesine eklenmesi gereken renkle doldurulur.

Bununla birlikte, kodla (şimdilik) yaptık. Şimdi XAML 'e dikkat edin.

4. ListBox``ComboBox

Bir açılan pencerede (bir denetim) gösterilecek renklerin tam listesini almak istiyoruz ComboBox , XAML 'yi değiştirmemiz gerekiyor. Her ikisi de ve denetimin alt öğeleri olan Luckily ListBox ComboBox , ve ItemsControl bunların nasıl görünmekte ve davrandığına bir fark olmasına rağmen benzer şekilde çalışır. Her şey, ListBox ComboBox colorlist. xaml dosyasında ile değiştirin. > Bunun için Bul ve Değiştir > hızlı değiştirme komutunu (CTRLL + H) kullanabilirsiniz.

hızlı değiştirme komutunu gösteren Visual Studio ekran görüntüsü.

Uygulamayı hemen hemen çalıştırırsanız, ListBox ' ın bir ile değiştirildiğini görebilirsiniz ComboBox , ancak renkler aynı şablon kullanılarak gösterilmeye devam eder.

Renk seçimi Birleşik giriş kutusunu gösteren en sevdiğiniz renkler uygulamasının ekran görüntüsü.

5. şablonu bir kaynağa ayıklayın

Şablon konuşuyor, daha sonra sık kullanılan renklerin listesi için onu yeniden kullanmanız gerekir. XAML 'in daha okunaklı olması için şablonu tek bir yerde depolamak iyi bir fikirdir. Daha önemlisi, bu, şablonda yapılan değişikliklerin her örneği etkilemesini sağlar. Şablonu bir kaynağa ayıklayalim.

Herhangi birinin FrameworkElement kaynak listesine sahip olabilir. Bu sayfa için şablonumuzu Global hale getirmeyi seçtik, bu nedenle <Page.Reources> öğenin üzerine bir etiket ekleyelim <Grid> . Ardından, tüm <DataTemplate> etiketi ve içeriğini onun içinde taşıyın.

<Page.Resources>
    <DataTemplate x:DataType="local:ColorDescriptor">
        <StackPanel Orientation="Horizontal">
            <Rectangle Width="80" 
                       Height="20">
                <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 nesnelerin <Page.Resources> (bir IDictionary ) bir özniteliğe sahip olması gerektiğini (bir) uyarır Key , bu nedenle öğesine ekleyin <DataTemplate> .

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

Bu anahtar, sayfanın içeriğini kaybettiği gibi sayfada başka bir yerde bu şablona başvurmamızı sağlar ComboBox.ItemTemplate . ComboBoxKaynağını kullanmak için ColorDescriptor <ComboBox.ItemTemplate> etiketi kaldırabilir ve etiketi kendi içinde bir öznitelik olarak kullanabilirsiniz <ComboBox> . Etiketin tamamı şöyle <ComboBox> görünür:

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

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

6. Kullanıcı arabiriminin geri kalanını oluşturun

UI basittir. Tüm denetimler (açılan menü, Sık Kullanılanlara Ekle düğmesi, Sık Kullanılanlar listesi (üst bilgi metni) ve Sık Kullanılanları Kaldır düğmesi) tek bir dikey pencerede yerleştirilir StackPanel . Öğenin tüm içeriğini <Grid> aşağıdakiler ile 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>

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

7. uygulamayı çalıştırın

Uygulamayı şimdi çalıştırın, öğesinden bir renk seçin ComboBox ve Sık Kullanılanlara Ekle düğmesini seçin. Hiçbir şey olmaz. Sınıfında yönteminin sonuna bir kesme noktası eklemek AddSelectedColorToFavorites ColorListDataContext kodun çalışıp çalışmadığını gösterir. Seçilen renk FavoriteColors listeye eklenir.

Kullanıcı arabiriminin bu değişiklikleri yansıtmasının nedeni, List<ColorDescriptor> koleksiyon değiştiğinde Kullanıcı arabirimine bildirilmesi gerekir. Listeler için, bu arabirim aracılığıyla yapılır System.Collections.Specialized.INotifyCollectionChanged . Neyse ki bunu uygulamanız gerekmez. System.Collections.ObjectModel.ObservableCollection<T>Sınıfta ihtiyacımız olan her şey zaten var.

Uygulamamızı çalışır hale getirmek için tüm yapmanız gerekir ObservableCollection<T> List<T> özelliği için sınıfı yerine sınıfı kullanmaktır FavoriteColors .

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

Uygulamayı şimdi çalıştırırsanız, açılan listeden renkler ' i seçip Sık Kullanılanlara Ekle düğmesini seçerek artık düzgün bir şekilde çalışır. Seçilen sık kullanılan renkler içinde yansıtılır ListBox . Harika!

Listeye eklenen sık kullanılan renklerin gösterildiği örnek uygulamanın ekran görüntüsü.

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

Uygulamayı başlattığınızda, açılan listede bir renk seçili değildir. Artık Sık Kullanılanlara Ekle düğmesine tıklarsanız, bu null liste listesine eklenir. Bu bir hatadır!

Yöntemine bir denetim ekleyebiliriz null AddSelectedColorToFavorites , ancak bu, Sık Kullanılanlara Ekle düğmesinin çalışır duruma geldiğinde gösterilmesini engellemez. Bunun yerine, yalnızca açılan listede her zaman bir öğe seçilmiş olduğundan emin olalım. DropDown SelectedItem özelliği, koddaki özelliğe iki yönlü olarak bağlı olduğundan SelectedColor , bunu başlangıç sırasında geçerli bir değere başlatalım. Oluşturucunun sonuna aşağıdaki satırı ekleyin ColorListDataContext :

SelectedColor = LotsOfColors[0];

Bu, LotsOfColors uygulama başladığında listenin ilk öğesinin seçili olmasını sağlar. Kullanıcı koleksiyona ekleyemeyecektir null FavoriteColors .

9. sık kullanılan renkleri kaldır

Sonraki adım, ' den sık kullanılan renkleri kaldırabilme özelliği eklemektir ListBox . Bu, Kullanıcı tarafından ' de bir öğe seçen ListBox ve Sık Kullanılanları Kaldır düğmesini seçen bir işlem gerçekleşir.

Çalışma şekli ile aynı şekilde ComboBox , kullanıcının özelliği aracılığıyla seçtiği öğeyi izleyebiliriz ListBox SelectedItem . Bunu koddaki bir özelliğe bağlayabiliriz. Bunu ColorListDataContext sınıfına 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 ayrıca, Sık Kullanılanlar listesinden öğe kaldırma düğmesinin görünür olup olmadığını denetlemek için bir Boole özelliği de içerir. ' Deki herhangi bir değişiklik SelectedFavoriteColor , Kullanıcı arabiriminin bu özelliği sorgulamasını ve uygun şekilde hareket etmesini sağlar.

En sık kullanılan listesinden rengin kaldırılmasını gerçekleştirmek için bir daha yöntemi yazmanız gerekir.

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

XAML 'de düğmeyi yukarı bağlamak için ColorList. xaml ' yi açın ve Sık Kullanılanları Kaldır düğmesinin xaml 'ini değiştirin. Bunu, görünürlük bağlamasının yanı sıra tıklama bağlamasını da içerecek şekilde değiştirin.

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

Tüm bu sol taraf, özelliğine bağlamak için ListBox kullanılır SelectedItem Logic.SelectedFavoriteColor . SelectedItemÖZNITELIĞINI XAML içinde öğesine ekleyin ListBox .

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

Uygulamayı şimdi çalıştırın ve sık kullanılan renkler listesine renk ekleyebildiğinizi ve bunları kaldırabildiğinizi doğrulayın. Sık Kullanılanlardan Kaldır düğmesinin nasıl göründüğünü ve kaldırıldığına bağlı olarak, sık kullanılan bir rengin seçili olup olmadığına göre nasıl kaybolduğunu unutmayın.

Özet

Bu ders ComboBox , bir veya denetimindeki seçili öğeyi ListBox , özelliklerini bir C# özelliğine bağlayarak nasıl elde edebilir ve ayarlayakullanabileceğinizi gösteren bir SelectedItem özelliktir. Ayrıca ObservableCollection , kod içinde kullanmanın, Kullanıcı arabiriminin birden çok öğe görüntüleyen denetimlerin içeriğini otomatik olarak güncelleştirmesine neden olduğunu gördünüz.

Bu derste, Kullanıcı sık kullanılan renkler ' i seçer. Kullanılabilir renkler bir açılan pencerede (bir ComboBox Denetim) listelenir. Kullanıcı bir renk seçer ve bir düğmeye basarak bunu kendi sık kullanılanlara 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ına izin veren bir düğme de görüntüler.

Kaldır düğmesi kullanılabilir olan seçili sık kullanılan rengi gösteren örnek uygulamanın ekran görüntüsü.

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

1. özelliği oluşturma SelectedColor

Kod ile başlayalım, ardından kullanıcı arabiriminden bizim gibi çalışacağız.

Kullanıcının açılan menüde seçtiği öğe (yani, sınıf örneği) belirlemede bir yönteme ihtiyacımız var ColorDescriptor . ComboBoxDenetim SelectedItem , şu anda seçili olan öğeyi alıp ayarlayan bir özelliğine sahiptir. Bu nedenle, bu özelliği kodumuza türünde bir özelliğe bağlayabiliriz ColorDescriptor .

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

private ColorDescriptor _selectedColor;

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

Bu düzenin şimdi tanıdık olması gerekir. INotifyPropertyChangedTemel sınıfın yardımıyla, mekanizmasıyla donatılmış standart bir özelliktir ObservableObject .

2. listeyi oluşturun FavoriteColors

FavoriteColorsListe, kullanıcının kendi sık kullanılanlarını tercih etdikleri renkleri depolar. Bu yalnızca basit bir özelliktir.

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

3. seçili rengi sık kullanılanlara ekleyin

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

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

Varsayım, bu yöntem çağrıldığında, SelectedColor Sık Kullanılanlar listesine eklenmesi gereken renkle doldurulur.

Bununla birlikte, kodla (şimdilik) yaptık. Şimdi XAML 'e dikkat edin.

4. ListBox``ComboBox

Bir açılan pencerede (bir denetim) gösterilecek renklerin tam listesini almak istiyoruz ComboBox , XAML 'yi değiştirmemiz gerekiyor. Hem hem de denetimin alt öğeleri olan Luckily, ve ListBox ComboBox ItemsControl nasıl görüntikleri ve davrandıkları konusunda çok fazla fark olmasına rağmen benzer şekilde çalışır. Her şey, ListBox ComboBox colorlist. xaml dosyasında ile değiştirin. > Bunun için Bul ve Değiştir > hızlı değiştirme komutunu (CTRLL + H) kullanabilirsiniz.

hızlı değiştirme komutunu gösteren Visual Studio ekran görüntüsünü tekrarlayın.

Uygulamayı hemen hemen çalıştırırsanız, ListBox ' ın bir ile değiştirildiğini görebilirsiniz ComboBox , ancak renkler aynı şablon kullanılarak gösterilmeye devam eder.

ComboBox içindeki renk listesini gösteren örnek uygulamanın ekran görüntüsü.

5. şablonu bir kaynağa ayıklayın

Şablon konuşuyor, daha sonra sık kullanılan renklerin listesi için onu yeniden kullanmanız gerekir. XAML 'in daha okunaklı olması için şablonu tek bir yerde depolamak iyi bir fikirdir. Daha önemlisi, bu, şablonda yapılan değişikliklerin her örneği etkilemesini sağlar. Şablonu bir kaynağa ayıklayalim.

Herhangi birinin FrameworkElement kaynak listesine sahip olabilir. Kendi şablonumuzu tüm için Global hale getirmeyi seçtik Window , bu nedenle <Window.Reources> öğenin üzerine bir etiket ekleyelim <Grid> . Ardından, tüm <DataTemplate> etiketi ve içeriğini onun içinde taşıyın.

<Window.Resources>
    <DataTemplate x:Key="ColorTemplate" DataType="local:ColorDescriptor">
        <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üktür olduğundan, her girdinin de bir anahtarı olmalıdır. Öğesine ekleyin <DataTemplate> .

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

Bu anahtar, Window içeriğini kaybettiğiniz gibi, içindeki başka bir yerde bu şablona başvurmamızı sağlar ComboBox.ItemTemplate . ComboBoxKaynağını kullanmak için ColorDescriptor <ComboBox.ItemTemplate> etiketi kaldırabilir ve etiketi kendi içinde bir öznitelik olarak kullanabilirsiniz <ComboBox> . Etiketin tamamı şöyle <ComboBox> görünür:

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

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

6. Kullanıcı arabiriminin geri kalanını oluşturun

UI basittir. Tüm denetimler (açılan menü, Sık Kullanılanlara Ekle düğmesi, Sık Kullanılanlar listesi (üst bilgi metni) ve Sık Kullanılanları Kaldır düğmesi) tek bir dikey pencerede yerleştirilir StackPanel . Öğenin tüm içeriğini <Grid> aşağıdakiler ile 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>

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

7. düğme için tıklama işleyicisini oluşturun Add to Favorites

Yöntemdeki listeye seçili rengi ekleme mantığını zaten uyguladık FavoriteColors AddSelectedColorTofavorites . Bununla birlikte, Kullanıcı düğmeye tıkladığında bu yöntemi çağırmaları gerekir.

Add to FavoritesVisual Studio ' de görsel tasarımcıda düğmeye çift tıklayın. Bu, Button_Click codebehind içinde bir yöntem ve Click xaml 'deki olayda buna bir başvuru oluşturur:

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

Button_ClickYöntemini hem codebehind hem de xaml 'de olarak yeniden adlandırın AddToFavorites_Click . Bunu kodda yeniden adlandırarak ve ardından ampul simgesini kullanarak "yeniden adlandır" seçeneğini belirleyerek yapabilirsiniz Button_Click AddToFavorites_Click . Bu işlem, XAML dosyasındaki yöntem adını da değiştirmek için çok önemlidir.

yeniden adlandırma düğmesine tıklama yöntemine Visual Studio hızlı eylem seçeneğinin ekran görüntüsü..

ColorListDaha kolay erişim sağlamak için sınıfın en üstüne bir kullanışlı özellik ekleyin ColorListDataContext :

private ColorListDataContext DC => (ColorListDataContext)DataContext;

Sonra AddToFavorites_Click yönteminde, 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ırın

Uygulamayı şimdi çalıştırın, öğesinden bir renk seçin ComboBox ve Sık Kullanılanlara Ekle düğmesini seçin. Hiçbir şey olmaz. Sınıfında yönteminin sonuna bir kesme noktası eklemek AddSelectedColorToFavorites ColorListDataContext kodun çalışıp çalışmadığını gösterir. Seçilen renk FavoriteColors listeye eklenir.

Kullanıcı arabiriminin bu değişiklikleri yansıtmasının nedeni, List<ColorDescriptor> koleksiyon değiştiğinde Kullanıcı arabirimine bildirilmesi gerekir. Listeler için, bu arabirim aracılığıyla yapılır System.Collections.Specialized.INotifyCollectionChanged . Neyse ki bunu uygulamanız gerekmez. System.Collections.ObjectModel.ObservableCollection<T>Sınıfta ihtiyacımız olan her şey zaten var.

Uygulamamızı çalışır hale getirmek için tüm yapmanız gerekir ObservableCollection<T> List<T> özelliği için sınıfı yerine sınıfı kullanmaktır FavoriteColors .

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

Uygulamayı şimdi çalıştırırsanız, açılan listeden renkler ' i seçip Sık Kullanılanlara Ekle düğmesini seçerek artık düzgün bir şekilde çalışır. Seçilen sık kullanılan renkler içinde yansıtılır ListBox . Harika!

Sık kullanılanlara eklenen seçili rengi gösteren örnek uygulamanın ekran görüntüsü.

9. boş öğeler eklemekten kaçının

Uygulamayı başlattığınızda, açılan listede bir renk seçili değildir. Artık Sık Kullanılanlara Ekle düğmesine tıklarsanız, bu null liste listesine eklenir. Bu bir hatadır, bu nedenle düzeltin!

yöntemine bir denetim ekleyebiliriz, ancak bu işlevsiz olduğunda Sık Kullanılanlara Ekle null AddSelectedColorToFavorites düğmesinin sızması engellenebilir. Bunun yerine, açılan listelerde her zaman seçili bir öğe olduğundan emin olayız. Açılan liste özelliği kodda özelliğine iki yollu bağlı olduğundan, yalnızca başlatma sırasında geçerli bir SelectedItem SelectedColor değere başlatabilirsiniz. Oluşturucuslarının sonuna aşağıdaki satırı ColorListDataContext ekleyin:

SelectedColor = LotsOfColors[0];

Bu, uygulama başlatıldığında listenin LotsOfColors ilk öğesinin seçildiğinden emin olun. Kullanıcı, koleksiyona bir null FavoriteColors ekser.

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

Sonraki adım, 'den sık kullanılan renkleri kaldırma yeteneği ListBox eklemektir. Bu, kullanıcı içinde bir öğe seçerek ve ListBox Sık Kullanılanlardan Kaldır düğmesini seçerek gerçekleşir.

Nasıl çalıştığına ComboBox benzer şekilde, kullanıcının özelliği aracılığıyla öğesinde seçmiş olduğu ListBox öğeyi SelectedItem izleyebiliriz. Bunu kodda bir özele bağlarız. Bunu sınıfına ColorListDataContext ekleyin.

private ColorDescriptor _selectedFavoriteColor;

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

public bool IsRemoveFavoriteEnabled => SelectedFavoriteColor != null;

Yukarıdaki kod, öğeleri sık kullanılanlar listesinden kaldıran düğmenin görünür olup olmadığını denetlemek için bir Boole özelliği de içerir. kullanıcı arabiriminin SelectedFavoriteColor bu özelliği sorgulaması ve uygun şekilde davranması için yapılan herhangi bir değişiklik.

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);
}

Ardından, ListBox 'nin SelectedItem'larını özelliğine SelectedFavoriteColor bağlayın. SelectedItem ListBox CodeList.xaml içinde özniteliğini ekleyin.

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

XAML'de Sık Kullanılanlardan Kaldır düğmesini açmak için ColorList.xaml'i açın ve Sık Kullanılanlardan Kaldır düğmesinin XAML'sini değiştirme. Bağlamanın yanı sıra Click olay IsEnabled işleyicisini de dahil olacak şekilde değiştirebilirsiniz.

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

Ayrıca mantığımızda çağrısı yapmak RemoveFromFavorites_Click için ColorList.xaml.cs'ye RemoveFromFavoriteColor yöntemini de eklememiz gerekir.

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

Uygulamayı şimdi çalıştırın ve sık kullanılan renkler listesine renk ekp kaldırabilirsiniz. Kaldırılacak bir sık kullanılan rengin seçili olup olmadığına göre, Sık Kullanılanlardan Kaldır düğmesinin nasıl devre dışı bırakıldığına ve etkinleştirilme özelliğine sahip olduğunu unutmayın.

Alıştırma olarak, koleksiyon boş olduğunda kullanıcı arabiriminin Tüm Sık Kullanılan Renkler bölümünü FavoriteColors gizlemeyi deneyin. İpucu: Etkilenen denetimleri grup etmek ve 'nin Görünürlüğünü sınıfındaki bir özele bağlamak StackPanel için bir StackPanel ColorListDataContext kullanın. Sık kullanılan bir renk ekleniyor veya kaldırılıyorsa, kullanıcı arabirimine bu özellikte yapılan değişiklikler hakkında bilgi verme.

Özet

Bu derste, özelliklerini bir C# özelliğine bağarak bir veya denetiminde seçili öğeyi nasıl edinebilirsiniz ComboBox ListBox ve SelectedItem ayarlayabilirsiniz. Ayrıca kodda kullanmanın kullanıcı ObservableCollection arabiriminin birden çok öğenin görüntüleniyor denetimlerin içeriklerini otomatik olarak güncelleştirmesini nasıl neden olduğunu da gördünüz.