온라인 개인맞춤형 SIGMA!!
Blog | Tag | Local | Guest | Login | Write |  RSS
Slide Image Menu
2008. 12. 23. 16:17 :: Advanced WPF

오늘은 Slide형태의 메뉴를 구현 해보도록 하겠습니다. 예전에 옥션이였나 G마켓이였나에서 본적이 있는 메뉴인데 생각이 나서 만들어 보았습니다. 아래는 시연동영상입니다.



1~6번까지 메뉴가 있으며 해당 번호를 클릭하면 슬라이드 되면세 해당 위치로 이동하게됩니다. 메뉴하나하나에 광고를 넣어서 광고용으로 사용해도 될것같습니다.  XAML을 사용해서 기본적인 내용을 구성했으며 C#에서는 이벤트에 따른 Animation호출 부분을 구현했습니다. 먼저 아래는 XAML 소스코드입니다.

view plaincopy to clipboardprint?
  1. <WINDOW title="Image Slide View - WPF KOREA(Http://whatisthat.co.kr)" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Height="275" Width="605" x:Class="ImageView.Window1" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ResizeMode="NoResize">  
  2.     <WINDOW.RESOURCES>  
  3.         <DOUBLEANIMATION x:Key="MoveAnimation" Storyboard.TargetName="Panels" Storyboard.TargetProperty="(Canvas.Left)" SpeedRatio="2" />  
  4.     </WINDOW.RESOURCES>  
  5.     <GRID>  
  6.         <CANVAS Height="250" Width="600" ClipToBounds="True">  
  7.             <STACKPANEL Height="250" x:Name="Panels" Orientation="Horizontal" Canvas.Left="0">  
  8.                 <IMG height=250 width=600 Source="1.jpg">  
  9.                 <IMG height=250 width=600 Source="2.jpg">  
  10.                 <IMG height=250 width=600 Source="3.jpg">  
  11.                 <IMG height=250 width=600 Source="4.jpg">  
  12.                 <IMG height=250 width=600 Source="5.jpg">  
  13.                 <IMG height=250 width=600 Source="6.jpg">  
  14.             </STACKPANEL>  
  15.         </CANVAS>  
  16.            
  17.         <STACKPANEL Height="30" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="5" Orientation="Horizontal">  
  18.             <STACKPANEL.RESOURCES>  
  19.                 <STYLE TargetType="TextBlock">  
  20.                     <Setter Property="FontSize" Value="30"/>  
  21.                     <Setter Property="Width" Value="25"/>  
  22.                     <Setter Property="Foreground" Value="White"/>  
  23.                     <Setter Property="FontFamily" Value="Verdata"/>  
  24.                     <Setter Property="FontStyle" Value="Italic"/>  
  25.                     <Setter Property="FontWeight" Value="Bold"/>  
  26.                     <Setter Property="Cursor" Value="Hand"/>  
  27.                     <Setter Property="Opacity" Value="0.5"/>  
  28.                     <Style.Triggers>  
  29.                         <Trigger Property="IsMouseOver" Value="True">  
  30.                             <Setter Property="Opacity" Value="1"/>  
  31.                         </Trigger>  
  32.                     </Style.Triggers>  
  33.                 </STYLE>  
  34.             </STACKPANEL.RESOURCES>  
  35.             <TEXTBLOCK Text="1" MouseDown="Button_Click" />  
  36.             <TEXTBLOCK Text="2" MouseDown="Button_Click" />  
  37.             <TEXTBLOCK Text="3" MouseDown="Button_Click" />  
  38.             <TEXTBLOCK Text="4" MouseDown="Button_Click" />  
  39.             <TEXTBLOCK Text="5" MouseDown="Button_Click" />  
  40.             <TEXTBLOCK Text="6" MouseDown="Button_Click" />  
  41.         </STACKPANEL>  
  42.   
  43.     </GRID>  
  44. </WINDOW>  



다음은 C# 코드입니다.

view plaincopy to clipboardprint?
  1. private void Button_Click(object sender, RoutedEventArgs e)   
  2. {   
  3.   
  4.     DoubleAnimation MoveAnimation = Resources["MoveAnimation"] as DoubleAnimation;   
  5.     TextBlock SelectedTextBlock = sender as TextBlock;   
  6.     MoveAnimation.To = -(int.Parse(SelectedTextBlock.Text) - 1) * 600;   
  7.   
  8.     Panels.BeginAnimation(Canvas.LeftProperty, MoveAnimation,HandoffBehavior.Compose);   
  9. }  



크기가 일정한 내용의 메뉴 페이지를 StackPanel을 사용해 순차적으로 쌓아놓고 버튼을 클릭하면 버튼에 많는 만큼 StackPanel을 이동하는 방법을 이용해 구현 했습니다. 간단하죠? 기타 질문은 리플이나 메일로 주시면 답변해드리겠습니다 ^^


:
prev 1 2 3 4 ··· 110 next
:: total
:: today | :: yesterday
Designed by arisnoba
다솜돌이's Blog is powered by Daum

티스토리툴바