Перейти к основному содержимому

Добавление элементов в пользовательскую коллекцию

На этой странице вы реализуете коллекцию из альбомов, которые пользователь добавил, путем выбора в диалоговом окне поиска и нажатии кнопки Buy Album. Также вы отобразите их в основном окне.

Observable Collection (рус: Наблюдаемая коллекция)​

Первым шагом, вы добавите observable коллекцию во view model основного окна. Она будет содержать альбомы, которые пользователь выбрал в диалоговом окне поиска.

Выполните следующие действия:

  • Остановите приложение, если оно запущено.
  • Найдите и откройте файл MainWindowViewModel.cs.
  • Добавьте observable коллекцию, как показано ниже:
public ObservableCollection<AlbumViewModel> Albums { get; } = new();

Обработка результата диалогового окна​

Вторым шагом, мы изменим реактивную команду покупки альбома так, чтобы диалоговое окно возвращало объект (AlbumViewModel) в observable коллекцию.

Выполните следующие действия:

  • Измените код инициализации реактивной команды, как показано ниже:
BuyMusicCommand = ReactiveCommand.CreateFromTask(async () =>
{
    var store = new MusicStoreViewModel();
    var result = await ShowDialog.Handle(store);
    if (result != null)
    {
        Albums.Add(result);
    }
});

View основного окна​

Теперь вы добавите XAML во view основного окна, чтобы отобразить элементы observable коллекции. Вы снова будете использовать data template (рус: шаблон данных), но в этот раз внутри ItemsControl. Это базовый класс для всех компонентов UI, которые отображают несколько элементов, к примеру ListBox, поэтому кое-что вам уже будет знакомо.

Для добавления ItemsControl и его data template (рус: шаблона данных), выполните следующие действия:

  • Найдите и откройте файл MainWindow.axaml.
  • В элемент <Window> добавьте следующее пространство имен:
xmlns:views="clr-namespace:Avalonia.MusicStore.Views"
  • Под элементом button добавьте следующий XAML, как показано ниже:
<ItemsControl Margin="0 40 0 0" ItemsSource="{Binding Albums}">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>

  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <views:AlbumView Margin="0 0 20 20" />
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>
  • Нажмите Debug для сборки и запуска проекта.
  • Нажмите на кнопку с иконкой.
  • Введите текст.
  • Выберите альбом нажав на него.
  • Нажмите Buy Album.
  • Повторите еще раз.

По мере поиска и выбора альбомов, вы увидите увеличение пользовательской коллекции. Однако после перезапуска приложения, коллекция будет снова пуста.

На следующей странице вы узнаете, как добавить в приложение persistence данные.