完成イメージ
作り方は、以下のような感じです。こんなにさっくり作れるんですわ。
上の動画の操作で作られるXAMLは以下のような感じです。
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="GradientAnimationListBox.MainWindow" x:Name="Window" Title="MainWindow" Width="640" Height="480"> <Window.Resources> <DataTemplate x:Key="ItemTemplate"> <StackPanel> <TextBlock Text="{Binding Property1}"/> </StackPanel> </DataTemplate> <Storyboard x:Key="ListBoxGradientAnimation" AutoReverse="True" RepeatBehavior="Forever"> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="listBox"> <EasingColorKeyFrame KeyTime="0:0:2" Value="#FF5B569F"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="listBox"> <EasingColorKeyFrame KeyTime="0:0:2" Value="#FF3F3F3F"/> </ColorAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Window.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard Storyboard="{StaticResource ListBoxGradientAnimation}"/> </EventTrigger> </Window.Triggers> <i:Interaction.Triggers> <i:EventTrigger> <ei:ControlStoryboardAction Storyboard="{StaticResource ListBoxGradientAnimation}"/> </i:EventTrigger> </i:Interaction.Triggers> <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}"> <ListBox x:Name="listBox" Margin="8" ItemTemplate="{DynamicResource ItemTemplate}" ItemsSource="{Binding Collection}" Foreground="White"> <ListBox.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="White" Offset="1"/> </LinearGradientBrush> </ListBox.Background> </ListBox> </Grid> </Window>
プロジェクトは、以下からダウンロードできます。
GradientAnimationListBox.zip