이전 포스트에서 ListBox.ItemContainerStyle을 사용해서 아이템에 일괄적으로 애니메이션을 주는 방법에 대해 소개했었습니다. 그리고 마지막 쯤에 이를 사용하여 쉽게 DockBar를 구현 할 수 있다고 했는데요.
시간도 많고 잠도 안오고 해서.. (아까 잔다더니 아직도 안자고 있음) 구현해보았습니다.

아래 예제처럼 Gif이미지로 캡쳐 하려고 했는데 -_- 화질도 구리고 용량도 커져서 동영상으로 올립니다. 혹시 괜찮은 화면 녹화 프로그램있으시면 추천 부탁드려요~

그럼 코드를 살펴보겠습니다.

망할 들여쓰기가 적용이 안되서 올라가네요 -_- ㅋ (워드에서 써서 올리고 있는 중입니다.)

별건 없지만, 뭔가 굉장히 코드가 길어 보이고 뭔가 어려워 보입니다. 하지만, 이전 포스트를 이해 하셨다면 전혀 두려워 하실 필요는 없습니다. 이전 코드와 비교해볼 때 달라 진 것은 고작 20라인 정도니까요.
노란색 부분이 이전 글과 비교해볼 때 추가된 코드입니다. 그럼 한줄 한줄 살펴보겠습니다.

<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>

ListBox에서 아이템이 선택되었을 때 배경색으로 사용되는 HighlightBrush를 Transparent로 설정해줍니다. (그럼 선택이 되어도 배경은 투명이겠죠? ) 만약 위와 같이 투명으로 해주지 않을 경우 아래 와 같이 선택되었을 때 파란색으로 채워집니다.

그리고 DockBar에 추가될 Image객체들의 기본적인 Style을 지정해줍니다.

<Style TargetType="Image">
<Setter Property="Width" Value="45"/>
<Setter Property="Height" Value="45"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Cursor" Value="Hand" />
</Style>

위에서부터 차례대로 가로,세로, 여백, 커서를 의미합니다.

<ListBox.Template>
<ControlTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True" />
</ControlTemplate>
</ListBox.Template>

이번 예제에서 가장 핵심이 되는 부분인데요, ListBox의 Template을 변경하는 부분입니다. ControlTemplate객체를 생성하고 StackPanel을 추가합니다. 그리고 Orientation을 Horizontal로 설정한 뒤 IsItemHost속성을 True설정합니다. IsItemHost는 "현재 이 객체가 이 템플릿을 사용하는 객체의 아이템들을 가지고 있을 녀석이다." 정도로 생각하시면 되겠습니다. 이렇게 하면 ListBox에 아이템이 추가 될 때마다 StackPanel에 추가가 되고 Orientation이 Horizontal이므로, 가로로 차곡차곡 쌓이게 됩니다.

<EventTrigger RoutedEvent="ListBoxItem.MouseUp">
<BeginStoryboard>
<Storyboard AutoReverse="True" RepeatBehavior="2x" Storyboard.TargetProperty="Content.Margin">
<ThicknessAnimation To="0,0,0,10" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

마우스를 눌렀다가 떼었을 때의 이벤트입니다. 동영상을 보셨다면 아시겠지만, 아이템을 클릭했을 때 제자리에서 위 아래로 움직이는 연출을 위해서 입니다. ThicknessAnimation을 사용해 Margin의 Bottom Property를 10까지 증가 시켰고 AutoReverse속성이 True이기 때문에 위에서 아래로 한번 움직이게 됩니다. 그리고 RepeatBehavior가 2x이기 때문에, Animation이 2번 반복됩니다.

어렵지 않죠? 이렇게 간단하게 Template과 EventTrigger만을 사용해서도 손쉽게 재미있는 UI를 구현할 수 있습니다.

김대욱 (kdw234@naver.com) / http://whatisthat.co.kr

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

자려고 누웠다가, 스타한판만 더하고 자야지 하고 일어나서 포스팅 하고 있는 김대욱입니다. (-_-)
저번 사내 교육 때 보여주려고 준비했었던 예재인데요, 어디에 짱박아 둔지 몰라서 못 보여 줬던 자료입니다.
그림을 보시면 이해가 되셨을 텐데요, 마우스를 올리면 해당 아이템의 크기가 변하는 것(?)입니다.
Style과 EventTrigger, Animation을 적절히 활용한 예라고 할 수 있는데요.
코드는 아래와 같습니다.

가장먼저 눈에 들어 오는 것은 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

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.