かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

背景がグラデーションでアニメーションするListBox

完成イメージ


作り方は、以下のような感じです。こんなにさっくり作れるんですわ。


上の動画の操作で作られる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