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 알림이 이루어지는 것을 확인할 수 있습니다.