통합검색
· 마을서비스란?  · 포럼마을  · 일반마을  · 테마마을  · 마을랭킹  · 활동왕
· 덱스퍼트란?  · 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 강좌
 ListBox Item Size Animation 2008-07-23 오후 3:35:59
 kdw234  kdw234님께 메시지 보내기kdw234님을 내 주소록에 추가합니다.kdw234님의 개인게시판 가기 번호: 37391  / 읽음:4,075
 
사용자 삽입 이미지

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

<ListBox>
<ListBox.ItemContainerStyle>
<Style>
<Style.Triggers>
<EventTrigger RoutedEvent="ListBoxItem.MouseEnter">
<BeginStoryboard>
<Storyboard TargetProperty="Content.Height">
<DoubleAnimation To="100" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ListBoxItem.MouseLeave">
<BeginStoryboard>
<Storyboard TargetProperty="Content.Height">
<DoubleAnimation To="30" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>

<!-- ListBox Items -->
<Rectangle Fill="Red" Width="250" Height="30" />
<Rectangle Fill="Orange" Width="250" Height="30" />
<Rectangle Fill="Yellow" Width="250" Height="30" />
<Rectangle Fill="Green" Width="250" Height="30" />
<Rectangle Fill="Blue" Width="250" Height="30" />
<Rectangle Fill="DarkBlue" Width="250" Height="30" />
<Rectangle Fill="Purple" Width="250" Height="30" />
</
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

 

[코멘트] 좋음
2012-07-02 16:40
 ssam827  ssam827님께 메시지 보내기ssam827님을 내 주소록에 추가합니다.ssam827님의 개인게시판 가기 
ㅠㅠ
저장 취소
코멘트쓰기
  좋음   놀람   궁금   화남   슬픔   최고   침묵   시무룩   부끄럼   난감
* 코멘트는 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.