자려고 누웠다가, 스타한판만 더하고 자야지 하고 일어나서 포스팅 하고 있는 김대욱입니다. (-_-)
저번 사내 교육 때 보여주려고 준비했었던 예재인데요, 어디에 짱박아 둔지 몰라서 못 보여 줬던 자료입니다.
그림을 보시면 이해가 되셨을 텐데요, 마우스를 올리면 해당 아이템의 크기가 변하는 것(?)입니다.
Style과 EventTrigger, Animation을 적절히 활용한 예라고 할 수 있는데요.
코드는 아래와 같습니다.
|
<ListBox> |
가장먼저 눈에 들어 오는 것은 ListBox에 총 7가지의 무지개 색 Rectangle 객체가 추가되어 있다는 사실 입니다. 그리고 위해 뭔가 주저리주저리 써있는데요, 하나씩 살펴보겠습니다.
<ListBox.ItemContainerStyle>라는 녀석은 ListBoxItemContainer의 스타일을 지정하는 Property로 ListBox에 추가된 Item을 둘러싸고 있는 일종의 Container에 대한 스타일입니다. 이를 통해 리스트 박스에 추가된 객체들의 Style을 일괄적으로 지정 해 줄 수 도 있습니다.
<EventTrigger> 의 RoutedEvent Property를 사용해 마우스가 올려졌을 때 와 떠났을 때에 대한 이벤트를 정의합니다.
StoryBoard를 시작하기위해 <BeginStoryboard> 를 사용했으며 마우스동작에 따라 객체의 높이가 변하게 할것이므로, StoryBoard의 TargetProperty를 Content.Height로 설정합니다.
그리고 Height Property는 Double형이므로, DoubleAnimation을 사용하여 크기가 변하는 Animation을 구현합니다.
MouseEnter이벤트가 발생했을 경우에는 크기를 100까지 키우고, Leave이벤트가 발생 했을 때는 다시 30으로 변환합니다.
MouseLeave의 Animation에서의 To="30"은 생략이 가능하며, 기본적으로 Trigger가 적용되기 전의 값으로 설정됩니다.
이와 같은 방법을 사용하여 위 그림과 같은 DockBar같은 형식의 구현도 가능합니다~
김대욱(kdw234@naver.com) / http://whatisthat.co.kr
