かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

背景がグラデーションでアニメーションする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