Tech/Silverlight2009. 10. 12. 15:59

자, 이제 Element Binding 사용법에 대해서 알아봅시다!

Element Binding은 FrameworkElement객체의 속성끼리 Binding을 시키는 방법인데요.
Binding하는 개체가 FrameworkElement여야 한다는 것이 제약점입니다.

우선 Blend 3에서 아주 간편하게 Element Binding을 하는 방법을 알아보겠습니다.



위와 같이 Background Image라는 타이틀을 갖고 각종 이미지들을 담고 있는 ListBox를 만들었습니다.

이 ListBox를 이용하여 수행하도록 만들고 싶은 동작은 ListBox에 있는 Item을 선택할 때, 선택된 Item에 따라 배경 이미지가 바뀌는 것입니다.



ListBox의 Properties로 가서 Source에 우측 조그만 사각형 박스를 클릭하여 Data Binding을 클릭하면,
(Data Binding이 되어 있으면 노란색으로 표시가 됩니다)



1. Data Field, Element Property, Explicit Data Context중에서 Element Property로 들어갑니다.
2. 제가 원하는 건 이미지 정보를 담고 있는 ListBox와 연결을 시키는 것이기 때문에 scene elements에서 "imgList"를 선택합니다.
3. scene elements에서 선택한 개체와 관련된 상세한 속성들이 우측 Properties목록에 좌르르륵~ 나오게 되는데요, 이중에 원하는 정보가 있으면 그대로 연결하면 됩니다. 하지만 제가 원하는 속성은 이 곳에 명시되어 있지 않습니다. 제가 원하는 속성은 ListBox에서 선택된 Item의 이미지 정보니까요.
4. Use a custom path expression을 체크하고, SelectedItem.Children[1].Source라고 적어준 후에 Binding direction을 'TwoWay'로 설정해 줍니다.

이제 OK버튼만 누르면 끝!

이렇게 만들어진 Element Binding은 xaml상에서 어떻게 쓰여져 있을까요?

Source="{Binding SelectedItem.Children[1].Source, ElementName=imgList, Mode=TwoWay, UpdateSourceTrigger=Explicit}"

Binding된 속성, FrameworkElement 객체, Binding Mode 등의 정보들이 그대로 설정한 것과 똑같이 쓰여져 있습니다.



1번 이미지를 클릭한 것이 보이시죠?  ^ㅁ^)/

참 쉽죠잉~ ' ㅍ')~

'Tech > Silverlight' 카테고리의 다른 글

Silverlight Pixel Shader 개발 팁  (0) 2009.10.28
[Element Binding]  (0) 2009.10.12
[SketchFlow를 만들자 2]  (0) 2009.10.09
[Blend에서 Behvaior 사용해보기]  (0) 2009.10.09
Posted by 알 수 없는 사용자