ListBox SelectedItems Binding for MVVM

Introduction

MVVM패턴을 사용할 때 일반적으로 ListBox에 목록을 바인딩 하기 위해 ObservableCollection<T>를 ItemSource에 바인딩하는 방법을 사용합니다. ObservableCollection의 경우 INotifyCollectionChanged를 상속받아 구현되었기 때문에 목록이 변경되었을때 마다 ListBox에 변경을 알려 ListBox의 View와 ObservableCollection의 목록이 동일하게 유지될 수 있도록 돕습니다.

그리고 ListBox의 현재 선택된 항목을 ViewModel에서 제어하기 위해 ListBox의 SelectedItem속성에 ViewModel의 속성을 TwoWay로 바인딩합니다. 하나의 선택된 항목을 관리하기 위해서 SelectedItem을 이용할 수 있지만, 만약 ListBox에서 MultiSelect를 지원하는 경우 이슈가 발생합니다.

ListBox의 SelectedItems속성의 경우 읽기 전용이기 때문에 바인딩을 할수 없기 때문입니다. 때문에 ViewModel에서 View에 해당하는 ListBox를 가지고 있어야 하는데 View와 ViewModel을 분리하는 MVVM패턴에서 ViewModel에서 ListBox를 직접 조작하는 방법은 좋은 방법은 아닙니다. 이번시간에는 Multi Select를 지원하는 ListBox의 SelectedItems속성을 ViewModel에서 View에 종속적이지 않고 SelectedItems를 동기화 하는 방법에 대해 소개합니다.

Attached Property & Weak Event Pattern

위에서 언급했듯이 ListBox의 SelectedItems는 읽기 전용속성이기 때문에 직접적인 바인딩이 불가능합니다. 따라서 ListBox의 SelectedItems을 모니터링하고, 동기화할 목록 지정하기 위한 Attached Property를 아래와 같이 구현합니다.

public static INotifyCollectionChanged GetSelectedItems(ListBox obj) { return (INotifyCollectionChanged)obj.GetValue(SelectedItemsProperty); } public static void SetSelectedItems(ListBox obj, object value) { obj.SetValue(SelectedItemsProperty, (INotifyCollectionChanged)value); } public static readonly DependencyProperty SelectedItemsProperty = DependencyProperty.RegisterAttached("SelectedItems", typeof(INotifyCollectionChanged), typeof(ListBoxHelper), new UIPropertyMetadata(null, new PropertyChangedCallback(OnSelectedItemsChanged))); public static void OnSelectedItemsChanged(DependencyObject Sender, DependencyPropertyChangedEventArgs e) { if (Sender is ListBox == false) return; ListBox Target = Sender as ListBox; SelectedItemsHelper Helper = SelectedItemsHelper.GetSelectedItemsHelper(Target); if (e.NewValue == null && Helper != null) { Helper.StopListener(Helper.SelectedItemsSource); Helper.StopListener(Helper.SelectedItemsTarget); } else if (e.NewValue != null && Helper == null) { Helper = new SelectedItemsHelper(Target.SelectedItems as IList, e.NewValue as IList); Target.SetValue(SelectedItemsHelper.SelectedItemsHelperProperty, Helper); Helper.StartListener(Target.SelectedItems as IList); Helper.StartListener(e.NewValue as IList); } }

그리고 ListBox의 SelectedItems와 대상목록을 동기화 하는 SelectedItemsHelper를 구현합니다. 그리고 INotifyCollectionChanged를 상속받아 구현된 SelectedItems와 대상목록의 CollectionChanged 이벤트를 WeakEvent패턴을 이용해 수신할수 있도록 SelectedItemsHelper에 IWeakEventListener를 상속받고 구현합니다.

※ WeakEvent 패턴이란 이벤트를 수신하거나 제거될때 발생할수 있는 메모리 누수문제등을 위해 설계된 패턴으로 명시적으로 이벤트 수신기와 이벤트 관리자 클래스를 제공하여 이벤트수신기에 대한 수명을 직접관리하고 구조적으로 이벤트 처리를 독립시킬수 있습니다. AttachedProperty를 이용해 이벤트 처리와 관련된 기능을 구현 할 때 이벤트 수신/해제가 빈번하게 발생해 메모리 누수가 발생할수 있어 WeakEvent 패턴이용해 명시적으로 관리하면 효과적입니다.

public void StartListener(IList List) { CollectionChangedEventManager.AddListener(List as INotifyCollectionChanged, this); } public void StopListener(IList List) { CollectionChangedEventManager.RemoveListener(List as INotifyCollectionChanged, this); } private void CollectionChanged(object sender, NotifyCollectionChangedEventArgs e) { IList SourceList = sender as IList; IList TargetList = SourceList == SelectedItemsSource ? SelectedItemsTarget : SelectedItemsSource; StopListener(TargetList); if (e.Action == NotifyCollectionChangedAction.Add) AddItems(TargetList, e); else if (e.Action == NotifyCollectionChangedAction.Move) ReplaceItems(TargetList, e); else if (e.Action == NotifyCollectionChangedAction.Replace) ReplaceItems(TargetList, e); else if (e.Action == NotifyCollectionChangedAction.Remove) RemoveItems(TargetList, e); else if (e.Action == NotifyCollectionChangedAction.Reset) UpdateItems(SourceList, TargetList); StartListener(TargetList); }

SelectedItemsHelper에는 위와 같이 ListBox의 SelectedItems와 대상목록 중 한곳이 갱신되었을때 갱신된 내용을 다른 목록에도 반영시키는 것으로 두 목록을 동기화 합니다. 이렇게 하면 ViewModel상의 목록과 ListBox의 SelectedItems가 서로 같은 데이터를 유지할 수 있습니다. 아래 동영상은 Attached Property와 SelectedItemsHelper를 이용해 구현한 데모 프로그램의 동영상입니다.

위 동영상에서 사용된 ListBox는 아래 코드와 같이 ListBoxHelper.SelectedItems을 ViewModel의 목록으로 바인딩합니다.

<ListBox SelectionMode="Multiple" ItemsSource="{Binding Numbers}" l:ListBoxHelper.SelectedItems="{Binding SelectedNumbers}">

화면 아래쪽의 버튼을 클릭했을때 발생하는 ViewModel의 Command는 아래와 같이 임의의 항목을 SelectedNumbers에 등록하는 기능을 수행합니다. SelectedNumber는 ListBoxHelper.SelectedItems에 바인딩 되어 있기 때문에 SelectedNumber의 목록을 갱신하는 것만으로 ViewModel에서 View에 종속적이지 않는 상태로 ListBox의 SelectedItems를 갱신할 수 있습니다.

public void OnClickCommand() { SelectedNumbers.Clear(); SelectedNumbers.PasueNotifyCollectionChanged(); Random R = new Random((int)DateTime.Now.Ticks); for (int i = 0; i < 500; i++) { SelectedNumbers.Add(Numbers[R.Next(0, Numbers.Count)]); } SelectedNumbers.ResumeNotifyCollectionChaged(); SelectedNumbers.Refresh(); }

아래는 이번시간에 사용한 데모 프로그램 소스코드입니다.

WIT.Sample.CheckBoxListExample.zip