통합검색
· 마을서비스란?  · 포럼마을  · 일반마을  · 테마마을  · 마을랭킹  · 활동왕
· 덱스퍼트란?  · TECBOX   · PRSBOX   · 이용안내  
· DEXT제품군  · 솔루션베이  · S/W & ESD 컴포넌트
· 프로그램베이
· LiveSeminar  · LiveConference
WPF & Silverlight 포럼마을입니다.
  마을등급 WPF & Silverlight   이 마을은 포럼마을 입니다이 마을은 자유가입제 마을 입니다 마을소개 페이지로 이동 전입신청
마을촌장촌장 서학수 주민 728 since 2008-07-17
우리마을 공지사항
질문&답변
강좌&팁
자유게시판
자료실
앨범
[마을 게시판]
WPF 강좌
랑데브 게시판
칼럼 게시판
개발자 고충상담
Dev Talk
자유토론방
벼룩시장
재나미 우스개
구인/프로젝트 정보
사람인 채용 게시판
  고객지원 게시판
마이 데브피아
 나의 e-Money 내역
 활동왕 My Page
 스크랩한 게시글보기
 쪽지관리
 주소록관리

 WPF 강좌
 XAML을 사용한 DockBar구현 2008-07-23 오후 3:35:37
 kdw234  kdw234님께 메시지 보내기kdw234님을 내 주소록에 추가합니다.kdw234님의 개인게시판 가기 번호: 37390  / 읽음:4,556

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

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

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

<ListBox HorizontalAlignment="Center">
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
<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.Resources>
<ListBox.Template>
<ControlTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True" />
</ControlTemplate>
</ListBox.Template>

<ListBox.ItemContainerStyle>
<Style>
<Setter Property="ListBoxItem.VerticalAlignment" Value="Bottom"/>
<Style.Triggers>
<EventTrigger RoutedEvent="ListBoxItem.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="70" Duration="0:0:0.3" Storyboard.TargetProperty="Content.Height"/>
<DoubleAnimation To="70" Duration="0:0:0.3" Storyboard.TargetProperty="Content.Width" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ListBoxItem.MouseLeave">
<BeginStoryboard HandoffBehavior="Compose">
<Storyboard >
<DoubleAnimation To="45" Duration="0:0:0.3" Storyboard.TargetProperty="Content.Height"/>
<DoubleAnimation To="45" Duration="0:0:0.3" Storyboard.TargetProperty="Content.Width" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<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
>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>

<!-- ListBox Items -->
<Image Source="Fish.ico" />
<Image Source="apps.ico"/>
<Image Source="Aquisition Al.ico"/>
<Image Source="Butterflying.ico"/>
<Image Source="computer.ico"/>
<Image Source="Duck.ico"/>
<Image Source="empty.ico"/>
<Image Source="favorites.ico"/>
<Image Source="Firefox.ico"/>
<Image Source="Font Manager.ico"/>
<Image Source="Hank.ico"/>
<Image Source
="Mozilla.ico"/>

</
ListBox>

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

별건 없지만, 뭔가 굉장히 코드가 길어 보이고 뭔가 어려워 보입니다. 하지만, 이전 포스트를 이해 하셨다면 전혀 두려워 하실 필요는 없습니다. 이전 코드와 비교해볼 때 달라 진 것은 고작 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

 
크리에이티브 커먼즈 라이선스Creative Commons License
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다. Creative Commons License
코멘트쓰기
  좋음   놀람   궁금   화남   슬픔   최고   침묵   시무룩   부끄럼   난감
* 코멘트는 500자 이내(띄어쓰기 포함)로 적어주세요.
목록 보기   지금 보고 계시는 글을 회원님의 my Mblog >> 스크랩에 넣어두고 다음에 바로 보실 수 있습니다.  
회사소개  |   개인정보취급방침  |  제휴문의  |   광고문의  |   E-Mail 무단수집거부  |   고객지원  |   이용안내  |   세금계산서
사업자등록번호 안내: 220-81-90008 / 통신판매업신고번호 제 2017-서울구로-0055호 / 대표: 홍영준, 서민호
08390, 서울시 구로구 디지털로32길 30, 1211호 / TEL. 02_6719_6200 / FAX. 02-6499-1910
Copyright ⓒ (주) 데브피아. All rights reserved.