手軽にアニメーション
WPF のアニメーションの簡単さがスゴイ。マウスが乗ったらミョンと大きくなって、はずれたらミョーンと縮むアニメがこれだけでできちゃう。
<Style x:Key="PhotoItems" TargetType="{x:Type ListBoxItem}"> <Setter Property="MaxHeight" Value="150" /> <Setter Property="MinHeight" Value="150" /> <Setter Property="MaxWidth" Value="150" /> <Setter Property="Margin" Value="50" /> <Style.Triggers> <EventTrigger RoutedEvent="Mouse.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:0.4" Storyboard.TargetProperty="MaxHeight" To="250" /> <DoubleAnimation Duration="0:0:0.4" Storyboard.TargetProperty="MaxWidth" To="250" /> <ThicknessAnimation Duration="0:0:0.4" Storyboard.TargetProperty="Margin" To="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:1" Storyboard.TargetProperty="MaxWidth" /> <ThicknessAnimation Duration="0:0:1" Storyboard.TargetProperty="Margin" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Style.Triggers> </Style>
こんなのを書いておいて、
<ListBox ItemsSource="{Binding Path=Files}" ItemTemplate="{StaticResource ImageTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemContainerStyle="{DynamicResource PhotoItems}"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <WrapPanel ItemHeight="250" ItemWidth="250" /> </ItemsPanelTemplate> </ListBox.ItemsPanel> </ListBox>
みたいにバインドするだけ。スゲー!
う〜ん、XAML が冗長なんで長くて簡単に見えないかもしれないけど(^^;、肝は変更したいプロパティの時間間隔と最終的な値を書いただけ。
エッセンシャルWPF:Windows Presentation Foundation (Programmer's SELECTION)
- 作者: Chris Anderson,星睦
- 出版社/メーカー: 翔泳社
- 発売日: 2007/10/31
- メディア: 大型本
- 購入: 6人 クリック: 128回
- この商品を含むブログ (32件) を見る
WPF の勉強には「エッセンシャル WPF」がおすすめです。WPF のアーキテクトさんが書いた本で、「WPF ではイベントハンドラを使うのではなく、コマンドを使うことを推奨する」みたいなことがたくさん書いてあります。設計方針や、何かがそうなっている理由や、当初別の方針だったけどこういう理由でそれはできなかったみたいなことも詳しく載ってます。ぜひ読んでみてください。