ListViewで学ぶコレクションのBind通知

ListViewの実装

まずは最小構成でListViewを実装。

MyNote.xaml

     <ListView x:Name="lstMemo">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ImageCell  Text="{Binding Title}"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

MyNote.xaml.cs

    public partial class MyNotePage : ContentPage
    {
        private List<MemoData> memos;

        public MyNotePage()
        {
            InitializeComponent();

            // データを設定
            memos = new List<MemoData>();
            for (int i = 0; i < 10; i++)
            {
                MemoData memo = new MemoData();
                memo.Title = "title" + i.ToString();
                memos.Add(memo);
            }

            // リストビューのソースに設定
            lstMemo.ItemsSource = memos;
        }
    }


    public class MemoData
    {
        public string Title
        {
            get;
            set;
        }
    }

実行すると以下の画面が表示されます。

コレクションが変更された場合のバインド通知

確認用のボタンを実装しコレクションに対してレコードを追加してみます。

<Button x:Name="btnListAdd" Text="リスト追加" />

// ボタンイベント
btnListAdd.Clicked += (sender, e) => {
     memos.Add(new MemoData() { Title = "NewData" });
};

この状態で実行ボタンを押下しても

リストには追加されず。

コレクションの要素を動的にバインド通知を行う場合は、ObservableCollectionを利用します。
List→ ObservableCollectionに変更するだけでOKです。

//private List<MemoData> memos;
private ObservableCollection<MemoData> memos;

//memos = new List<MemoData>();
memos = new ObservableCollection<MemoData>();

再ビルドし確認すると今度はリストに追加されるようになります。

コレクション内のアイテムの要素が変更された場合のバインド通知

コレクション内部の要素を更新してみます。

<Button x:Name="btnItemUpdate" Text="要素更新" />

btnItemUpdate.Clicked += (sender, e) => {
    memos[0].Title = memos[0].Title + "update";            
};

ボタンをクリックしてみますが、更新はされず。

コレクション内の要素を動的にバインド通知を行う場合は、
設定しているクラスにお馴染みの変更通知イベントを設定する必要があります。

    public class MemoData : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private string title;
        public string Title
        {
            get{ return this.title; }
            set{
                if (title != value)
                {
                    title = value;
                    if (PropertyChanged != null)
                    {
                        PropertyChanged(this, new PropertyChangedEventArgs(nameof(Title)));
                    }
                }
            }
        }
    }

再ビルドして実行するとBind通知が行われる事が確認できます。