• TOP
• WPF

[WPF]DataTemplateを使用してListBoxのアイテムでアニメーションを行う

2011-09-18T22:01:00+09:00 2019-03-03T01:32:40Z WPF

ListBox上のアイテムでマウスオーバー／マウスリーブにアニメーションするサンプルの多くがStyleを使用していたのでDataTemplateで行うサンプルを作成しました。
サンプルの内容は以下です。
・アイテムにカーソルが当たったときにアイテムの背景色を青にする
・アイテムにカーソルが外れたときにアイテムの背景色を白にする
<実行時の画面>

Sample_WPF_DateTemplete_01.zip:サンプルコードのダウンロード
ListBoxのデータテンプレートは以下のように作成し実現します。

<DataTemplate x:Key="listDataTemplate">
<DataTemplate.Resources>
<!-- マウスが入ったときのアニメーション -->
<Storyboard x:Key="OnMouseEnter1">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" Storyboard.TargetName="gridItem">
<EasingColorKeyFrame KeyTime="0" Value="#FFFFFFFF"/>
<EasingColorKeyFrame KeyTime="0:0:0.5" Value="#FF0000FF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<!-- マウスが離れたときのアニメーション -->
<Storyboard x:Key="OnMouseLeave1">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" Storyboard.TargetName="gridItem">
<EasingColorKeyFrame KeyTime="0" Value="#FF0000FF"/>
<EasingColorKeyFrame KeyTime="0:0:0.5" Value="#FFFFFFFF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</DataTemplate.Resources>
<Border BorderThickness="1" BorderBrush="#FF000000">
<Grid Name="gridItem" Height="32" Background="#FFFFFFFF">
<!-- Grid でのトリガーを指定する -->
<Grid.Triggers>
<!-- マウスが入ったときの指定 -->
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard  Storyboard="{StaticResource OnMouseEnter1}"/>
</EventTrigger>
<!-- マウスが離れたときの指定 -->
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource OnMouseLeave1}"/>
</EventTrigger>
</Grid.Triggers>
<TextBlock Text="{Binding}" FontSize="32"></TextBlock>
</Grid>
</Border>
</DataTemplate>