[Xamarin.CrossPlatform] マスタ/詳細アプリのプロジェクトを理解する4

前回の「[Xamarin.CrossPlatform] マスタ/詳細アプリのプロジェクトを理解する3」では、最初に実行されるMainPage.csとリスト表示をするファイルItemsPage.xaml、ItemPages.xaml.csについて見てきました。
今回は、リストに表示するデータ作成部分について見ていきます。

おさらい

マスタ/詳細プロジェクトは実行すると以下のような画面になり、データがリスト表示されます。

見てわかる通り、1つの項目はアイテムのタイトルと詳細から成り立っています。

Items.cs

リストに表示される1つのデータはItemsクラスに格納します。このクラスはModelsフォルダ内にあります。Itemsクラスのコードは以下のようになっており、リストに表示するタイトル部分のTextプロパティと、詳細部分のDescriptionプロパティを持っていることがわかります。IDは主キーとして使用します。

using System;

namespace MasterDetailSample
{
    public class Item
    {
        public string Id { get; set; }
        public string Text { get; set; }
        public string Description { get; set; }
    }
}

ItemsViewModel.cs

ItemsViewModelクラスは、ItemsPageとItemデータの橋渡しとなるクラスです。このクラスはBaseViewModelクラスを継承して作られています。

 

using System;
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace MasterDetailSample
{
    public class ItemsViewModel : BaseViewModel
    {
        public ObservableCollection<Item> Items { get; set; }
        public Command LoadItemsCommand { get; set; }

        public ItemsViewModel()
        {
            Title = "Browse";
            Items = new ObservableCollection<Item>();
            LoadItemsCommand = new Command(async () => await ExecuteLoadItemsCommand());

            MessagingCenter.Subscribe<NewItemPage, Item>(this, "AddItem", async (obj, item) =>
            {
                var _item = item as Item;
                Items.Add(_item);
                await DataStore.AddItemAsync(_item);
            });
        }

        async Task ExecuteLoadItemsCommand()
        {
            if (IsBusy)
                return;

            IsBusy = true;

            try
            {
                Items.Clear();
                var items = await DataStore.GetItemsAsync(true);
                foreach (var item in items)
                {
                    Items.Add(item);
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex);
            }
            finally
            {
                IsBusy = false;
            }
        }
    }
}

ItemsViewModelは、リストに表示するデータ(Itemsクラス)を管理します。

12行目をみるとわかる通り、このデータはObservableCollectionで管理をします。ObservableCollectionはアイテムに対して、追加、更新、削除などの変更があった場合に、コレクションの変更通知(CollectionChanged)を出すことができるようになっています。

次に21〜26行目を見てみましょう。MessagingCenter.SubscribeはXamarin.Forms側からメッセージを受け取った際に処理を行うものです。ここではアイテムの追加処理をしています。ここではAddItemというメッセージが送られてきた時に処理が行われるようにしています。

では、どこでAddItemのメッセージを送信しているのかというと、新規アイテム追加ページ()NewItemPage.xaml.cs)のSaveを押した時です。その部分のコードは以下のようになっています。

async void Save_Clicked(object sender, EventArgs e)
{
    MessagingCenter.Send(this, "AddItem", Item);
    await Navigation.PopToRootAsync();
}

次に29行目からExecuteLoadItemsCommand()ですが、このメソッドはページが表示されたときに実行されます。保存されているデータを取り出してリストに表示をします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください