복합 컨트롤
WPF의 컨트롤 , 드로잉, 리소스 등에 익숙하다면, 이와 같은 기능들을 조합시켜 복합적인 사용자 인터페이스를 만들기 위해 정교한 애니메이션을 만드는데 사용할 수 있다. 이러한 기능들은 다른 포맷에서도 재사용할 수 있는 매우 강력한 기능을 제공한다. 이번 예제는 이런 생각을 정리하는 차원에서, 백악관의 웹사이트에서 가져온 역대 미국 대통령의 사진을 슬라이드 처럼 보여주는 인터페이스를 만들 것이다. 물론, 재사용성의 강력함을 보여주기 위해서 이 코드를 다음 장에서도 재사용할 것이다.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="US Presidents">
<Window.Resources>
<LinearGradientBrush x:Key="ListBoxGradient" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#90000000" Offset="0" />
<GradientStop Color="#40000000" Offset="0.005" />
<GradientStop Color="#10000000" Offset="0.04" />
<GradientStop Color="#20000000" Offset="0.945" />
<GradientStop Color="#60FFFFFF" Offset="1" />
</LinearGradientBrush>
<Style x:Key="SpecialListStyle" TargetType="{x:Type ListBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Border BorderBrush="Gray" BorderThickness="1" CornerRadius="6" Background="{DynamicResource ListBoxGradient}">
<ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" >
<StackPanel IsItemsHost="True" Orientation="Horizontal" HorizontalAlignment="Left" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SpecialListItem" TargetType="{x:Type ListBoxItem}">
<Setter Property="MaxHeight" Value="75" />
<Setter Property="MinHeight" Value="75" />
<Setter Property="Opacity" Value=".75" />
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="MaxHeight" To="85" />
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Opacity" To="1.0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="MaxHeight" />
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Opacity" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Width="330" Height="150">
<StackPanel>
<TextBlock FontSize="14">United States Presidents</TextBlock>
<ListBox Styl`e="{StaticResource SpecialListStyle}" Grid.Row="1" Grid.ColumnSpan="3" Name="PhotoListBox" Margin="0,0,0,20" ItemsSource="{Binding}"
ItemContainerStyle="{StaticResource SpecialListItem}" SelectedIndex="0">
<Image Source="Https:www.naymz.com/media/images/306/portrait-portrait.jpg" />
<Image Source="http://www.whitehouse.gov/assets/presidents/1gw_header_sm.jpg" />
<Image Source="http://www.whitehouse.gov/assets/presidents/16al_header_sm.jpg" />
<Image Source="http://www.whitehouse.gov/assets/presidents/25wm_header_sm.jpg" />
<Image Source="http://www.whitehouse.gov/assets/presidents/35jk_header.jpg" />
<Image Source="http://www.whitehouse.gov/assets/presidents/41gb_header_sm.jpg" />
<Image Source="http://www.whitehouse.gov/assets/presidents/42bc_header_sm.jpg" />
<Image Source="http://www.whitehouse.gov/assets/presidents/43gb_header_sm.jpg" />
<Image Source="http://www.whitehouse.gov/assets/photos/obama_portrait_146px.jpg" />
</ListBox>
</StackPanel>
</Grid>
</Window>
이 코드는 새로운 것이 전혀 없다. 그렇지만 , 코드에 사용된 엘리먼트들을 새로운 방식으로 사용햇다. 이예제를 따라 해 보려면 일단 리소스 딕셔너리에 원하는 색상의 GraidenStop엘리먼트들로 구성된 LinearGradientBrush를 선언한다. 이후 역대 대통령의 리스트를 위한 스타일을 만들고 적용할 대상을 ListBox로 지정한다. 이스타일은 테두리의 색상을 회색, 두께는 1로 설정하고, 코너를 둥근 모서리 형태로 지정한다. 아울러, 수직방향의 스크롤 바는 항상 보이지 않도록 하고 수평 방향의 스크롤 바는 내용에 따라 자동으로 설정해서 한 번에 보여 줄 공간이 불충분하면 스크롤바가 자동르로 나타나 사용자들이 스크롤할 수 있도록 한다.
계속해서 ListBox 컨트롤의 아이템들(ListBoxItem)을 위한 두번째 스타일을 만든다 이스타일에는 아이템의
최대/최소 높이뿐만 아니라 투명도와 아이템 위로 마우스가 지나갈때 이벤트를 처리할 트리거를 설정한다. 이 이벤트는 주로 사용자가 이미지 위로 마우스 포인터를 올려 놓았을대 일어나며, 이벤트가 발생하면 애니메이션이 시작되고 이미지는 최대 크기가까지 커지고 투명도가 100%로 증가한다
사용자의 마우스 포인터가 이미지를 벗어날 때 발생하는 이벤트를 위한 두번째 트리거도 추가해야한다 이 트리거가 적용되면 이미지가 다시 최소 사이즈로 돌아오고 투명도는 흐린 75%로 줄어들어 약간 희미해진다
- 참고 Programming .Net 3.5 by Jesse Liberty and Alex Horovitz.
