'SelectedItems'에 해당되는 글 2건

  1. 2011.04.18 사용자 지정 Attached Property의 이해
  2. 2010.04.09 ListBox SelectedItems Binding for MVVM
안녕하세요.
이번 포스팅에서는 사용자 지정 Attached Property에 대해 이해와, 예제를 다룹니다.

1. 다른건 다 기본 내용을 쓰고싶은데, 이거 하나만 추가하고싶어,,

예를 들어서, ListBox에서 여러개를 선택가능하게 하되, 최대갯수를 제한하고 싶은 경우를 봅시다.
기본의 ListBox에서는 MultiSelect를 할수있게/없게 하는 기능은 있어도, 최대 갯수를 지정할 수는 없습니다.
이를 구현하는데 쉽게 생각할 수 있는 방법은 상속입니다. 부모의 기능은 그대로 사용하고 싶은데, 내것 하나만 추가됬으면 하는 경우 니까요


상속을 이용한 MultiSelectionCount 구현

하지만, 이렇게 구현하게되면 하나의 프로퍼티 때매, 전체를상속 받아야 하며,  새로 구현한 아이만을 사용해서 구현하여야 합니다.
좀 더 효과적으로 구현할 수 있는 방법이 있까요?!
이번 포스팅에서 설명하고하 하는 사용자 지정 Attached property를 사용하면 됩니다.

우선
사용자 지정 Attached property를 설명하기 앞써, 사용자 지정을 뺀 Attached property에 대해 이야기 해봅시다.

2.  Attached property란?
    Attacted Property란 어떤 객체에서든지 설정할 수 있는 global한 속성입니다. 
    보통의 경우 부모요소에 포함된 값을 부모가 직접 지정할 수는 없고,  자식요소가 지정해야할 경우에 사용할 수 있도록 해줍니다.
    그러기 위해서  global하게 구현이 되어 있고요.   
    먼가 말로 표현하니 어렵게 느껴지는데요, 평소에 많이 사용하던 Property로 예제를 보면 무릎을 탁 치시게 될꺼에요.


평소에도 많이 사용하는 Attatced Property.  (DockPanel.Dock)
  
즉, 여기서 DockPanel.Dock속성은 부모인 DockPanel에서 정할 수 있는 것이 아니라,
DockPanel안에 포함되는 자식 요소에서 설정되어야 하기 때문에, DockPanel 클래스 안에서는 DockProeperty를 static Dependency Property로 만든 다음 GetDock과 SetDock Metheod를 public으로 제공합니다.



바로 이게 정의는 내가하나, 남들이 정의해서 써야할때-_-!! 사용하는 것이 Attached Property입니다. 
평소에도 사용하시면서 보셨거죠?
 
자 , 그럼 본론으로 들어가 봅시다.

3.  사용자 지정 Attacted Property란?

 위에서 구현하고자 했었던 ListBox에서 여러개를 선택가능하게 하되, 최대갯수를 제한하려고 해 봅시다.
 바로 이 Attacted Property를 이용해서 말이지요. 

 다음과 같이 구현하면 됩니다.


사용자 정의 Atteched Property를 사용할 경우

* 10원 팁 : 아래와 같이 propa를 치게되면 인텔리센스가 적당히 atteched Property를 생성하는것을 도와줍니다.




4. 사용을 해보자.

xaml에서 그럼 실제로 구현한 내용을 적용해 봅시다.


사용자 정의 Attacted Property를 사용할 경우 vs ListBox를 상속받아 구현할 경우 사용

* 별첨


C#코드에서 사용자 정의 Property를 사용하는 방법

어찌보면 extention method 와 비슷하다고 보실 수 있네요.

전체 예제는 아래에 첨부합니다.




저작자 표시
신고

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를 아래와 같이 구현합니다.

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

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

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

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

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

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

 

신고