Storyboard で ListView の行の背景色を目立つようにしたいけどエラーになります。

先日の「動的に複数作成した ListBox から特定の ListBox の指定行に背景色をセットしたい」で教えていただいたコードのなかで背景色の変更時に複数の行を変更する（バーコードリーダーで読み込んだ番号と一致すると1つ1つ変更されます）と今どれが変わったのかわからなくなるので、現在の変更を知らせる工夫が必要になりました。

とりあえず思いついたのが、Storyboard で ListView 内の行の背景色を変更しよう！と考えましたが、下記のコードでは、「''System.Windows.Media.Animation.ColorAnimation' アニメーションオブジェクトは、互換性のない型 'System.Windows.Media.Brush' であるため、プロパティ 'Background' をアニメーションで表示するためには使用できません。'」というエラーがでます。

対処方法など教えてください。お願いします。
Windows11 VS2019 WPF C#

xaml
1    <Window.Resources>
2        <ColorAnimation x:Key="SearchAnimation" Storyboard.TargetProperty="Background" From="Chocolate" To="Cyan" Duration="0:0:2"/>
3        <ColorAnimation x:Key="StopSearchAnimation" Storyboard.TargetProperty="Background" From="Yellow" To="Red" Duration="0:0:2"/>
4
5        <DataTemplate DataType="{x:Type vm:Custmers}">
6            <StackPanel Margin="2">
7                <TextBox Text="{Binding [0].Dr}" FontSize="15" HorizontalAlignment="Center" Width="120"/>
8
9                <!--  カラム合わせが面倒なのでListView  -->
10                <ListView ItemsSource="{Binding}">
11                    <ListView.Resources>
12                        <!--  ヘッダー消し  -->
13                        <Style TargetType="GridViewColumnHeader">
14                            <Setter Property="Template" Value="{x:Null}" />
15                        </Style>
16                    </ListView.Resources>
17                    <ListView.ItemContainerStyle>
18                        <Style TargetType="ListViewItem">
19                            <Style.Triggers>
20                                <!--  プロパティとバインドして色を変える  ここを変えてみました ####### -->
21                                <DataTrigger Binding="{Binding Check}" Value="True">
22                                    <DataTrigger.EnterActions>
23                                        <BeginStoryboard x:Name="SearchAnimation">
24                                            <Storyboard>
25                                                <StaticResource ResourceKey="SearchAnimation"/>
26                                            </Storyboard>
27                                        </BeginStoryboard>
28                                    </DataTrigger.EnterActions>
29                                    <DataTrigger.ExitActions>
30                                        <PauseStoryboard BeginStoryboardName="StopSearchAnimation"/>
31                                    </DataTrigger.ExitActions>
32                                </DataTrigger>
33                            </Style.Triggers>
34                        </Style>
35                    </ListView.ItemContainerStyle>

行動規範の内容に同意します

回答1件

ベストアンサー

「''System.Windows.Media.Animation.ColorAnimation' アニメーションオブジェクトは、互換性のない型 'System.Windows.Media.Brush' であるため、プロパティ 'Background' をアニメーションで表示するためには使用できません。'」というエラーがでます。

エラーの通りListView.Background（Control.Background）はBrush型です。
Control.Background プロパティ (System.Windows.Controls) | Microsoft Docs

変えたかったのはSolidColorBrushのColorでしょう。
SolidColorBrush.Color プロパティ (System.Windows.Media) | Microsoft Docs

xml
1<!--  プロパティとバインドして色を変える  ここを変えてみました #######  -->
2<DataTrigger Binding="{Binding Check}" Value="True">
3  <DataTrigger.EnterActions>
4    <BeginStoryboard>
5      <Storyboard>
6        <!--<StaticResource ResourceKey="SearchAnimation" />-->
7        <ColorAnimation
8          Storyboard.TargetProperty="Background.Color"
9          From="Chocolate"
10          To="Cyan"
11          Duration="0:0:2" />
12      </Storyboard>
13    </BeginStoryboard>
14  </DataTrigger.EnterActions>
15  <DataTrigger.ExitActions>
16    <!--<PauseStoryboard BeginStoryboardName="StopSearchAnimation" />-->
17    <BeginStoryboard>
18      <Storyboard>
19        <ColorAnimation
20          Storyboard.TargetProperty="Background.Color"
21          From="Yellow"
22          To="Red"
23          Duration="0:0:2" />
24      </Storyboard>
25    </BeginStoryboard>
26  </DataTrigger.ExitActions>
27</DataTrigger>

"Background.Color"でも動いてしまいましたが、正しくは"(Control.Background).(SolidColorBrush.Color)"なんでしょうかね？（いまだによくわかっていない^^;
ストーリーボードに設定されたアニメーション - Windows apps | Microsoft Docs

外に出すならColorAnimationより、Storyboardごとのほうが扱いやすいです。

xml
1<Window.Resources>
2  <Storyboard x:Key="SearchAnimation">
3    <ColorAnimation
4      Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"
5      From="Chocolate"
6      To="Cyan"
7      Duration="0:0:2" />
8  </Storyboard>
9  <Storyboard x:Key="StopSearchAnimation">
10    <ColorAnimation
11      Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"
12      From="Yellow"
13      To="Red"
14      Duration="0:0:2" />
15  </Storyboard>
16
17  <DataTemplate DataType="{x:Type vm:Custmers}">
18    <StackPanel Margin="2">
19      <TextBox
20        Width="120"
21        HorizontalAlignment="Center"
22        FontSize="15"
23        Text="{Binding [0].Dr}" />
24      <ListView ItemsSource="{Binding}">
25        <ListView.Resources>
26          <Style TargetType="GridViewColumnHeader">
27            <Setter Property="Template" Value="{x:Null}" />
28          </Style>
29        </ListView.Resources>
30        <ListView.ItemContainerStyle>
31          <Style TargetType="ListViewItem">
32            <Style.Triggers>
33              <DataTrigger Binding="{Binding Check}" Value="True">
34                <DataTrigger.EnterActions>
35                  <BeginStoryboard Storyboard="{StaticResource SearchAnimation}" />
36                </DataTrigger.EnterActions>
37                <DataTrigger.ExitActions>
38                  <BeginStoryboard Storyboard="{StaticResource StopSearchAnimation}" />
39                </DataTrigger.ExitActions>
40              </DataTrigger>
41            </Style.Triggers>
42          </Style>
43        </ListView.ItemContainerStyle>

全コード再掲

xml
1<Window
2  x:Class="Q78aqeaolcdtqmb.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6  xmlns:local="clr-namespace:Q78aqeaolcdtqmb"
7  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8  Width="1000"
9  Height="450"
10  mc:Ignorable="d">
11  <Window.Resources>
12    <Storyboard x:Key="SearchAnimation">
13      <ColorAnimation
14        Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"
15        From="Chocolate"
16        To="Cyan"
17        Duration="0:0:2" />
18    </Storyboard>
19    <Storyboard x:Key="StopSearchAnimation">
20      <ColorAnimation
21        Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"
22        From="Yellow"
23        To="Red"
24        Duration="0:0:2" />
25    </Storyboard>
26    <DataTemplate DataType="{x:Type local:Custmers}">
27      <StackPanel Margin="2">
28        <TextBox
29          Width="120"
30          HorizontalAlignment="Center"
31          FontSize="15"
32          Text="{Binding [0].Dr}" />
33        <ListView ItemsSource="{Binding}">
34          <ListView.Resources>
35            <Style TargetType="GridViewColumnHeader">
36              <Setter Property="Template" Value="{x:Null}" />
37            </Style>
38          </ListView.Resources>
39          <ListView.ItemContainerStyle>
40            <Style TargetType="ListViewItem">
41              <Style.Triggers>
42                <DataTrigger Binding="{Binding Check}" Value="True">
43                  <DataTrigger.EnterActions>
44                    <BeginStoryboard Storyboard="{StaticResource SearchAnimation}" />
45                  </DataTrigger.EnterActions>
46                  <DataTrigger.ExitActions>
47                    <BeginStoryboard Storyboard="{StaticResource StopSearchAnimation}" />
48                  </DataTrigger.ExitActions>
49                </DataTrigger>
50              </Style.Triggers>
51            </Style>
52          </ListView.ItemContainerStyle>
53          <ListView.View>
54            <GridView>
55              <GridViewColumn DisplayMemberBinding="{Binding No}" />
56              <GridViewColumn DisplayMemberBinding="{Binding KanjaMei}" />
57              <GridViewColumn>
58                <GridViewColumn.CellTemplate>
59                  <DataTemplate>
60                    <CheckBox IsChecked="{Binding ScCheck}" />
61                  </DataTemplate>
62                </GridViewColumn.CellTemplate>
63              </GridViewColumn>
64            </GridView>
65          </ListView.View>
66        </ListView>
67      </StackPanel>
68    </DataTemplate>
69  </Window.Resources>
70
71  <DockPanel>
72    <Button
73      Click="AddButton_Click"
74      Content="add"
75      DockPanel.Dock="Top" />
76    <Button
77      Click="HighlightButton_Click"
78      Content="highlight"
79      DockPanel.Dock="Top" />
80    <Grid>
81      <Grid.ColumnDefinitions>
82        <ColumnDefinition />
83        <ColumnDefinition />
84      </Grid.ColumnDefinitions>
85      <!--  元データ  -->
86      <DataGrid
87        x:Name="dataGrid"
88        AutoGenerateColumns="True"
89        ItemsSource="{Binding Model.Custmers}" />
90
91      <ScrollViewer
92        Grid.Column="1"
93        Margin="5"
94        HorizontalScrollBarVisibility="Auto">
95        <ItemsControl ItemsSource="{Binding CustmersList}">
96          <ItemsControl.ItemsPanel>
97            <ItemsPanelTemplate>
98              <StackPanel Orientation="Horizontal" />
99            </ItemsPanelTemplate>
100          </ItemsControl.ItemsPanel>
101        </ItemsControl>
102      </ScrollViewer>
103    </Grid>
104  </DockPanel>
105</Window>

cs
1using System;
2using System.Collections.Generic;
3using System.Collections.ObjectModel;
4using System.Linq;
5using System.Windows;
6using CommunityToolkit.Mvvm.ComponentModel;
7
8namespace Q78aqeaolcdtqmb;
9
10
11public class Model
12{
13    public Custmers Custmers { get; } = new();
14}
15
16public class Custmer : ObservableObject
17{
18    public int No { get; }
19    public string Hyohon { get; }
20    public string KanjaMei { get; }
21    public string Dr { get; set; }
22    public bool ScCheck { get; set; }
23
24    public bool Check { get => check; set => SetProperty(ref check, value); }
25    private bool check;
26
27    public Custmer(int no, string hyohon, string kanjaMei, string dr, bool scCheck)
28    {
29        (No, Hyohon, KanjaMei, Dr, ScCheck) = (no, hyohon, kanjaMei, dr, scCheck);
30    }
31
32
33    // ダミー作成用
34    private static int no = 1300;
35    private static Random r = new();
36    private static string k = "ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾅﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜ";
37    public Custmer()
38    {
39        No = ++no;
40        Hyohon = $"F222{No}";
41        KanjaMei = string.Join("", Enumerable.Range(0, r.Next(5, 10)).Select(x => k[r.Next(k.Length)]));
42        Dr = $"dr{No}";
43        ScCheck = false;
44    }
45}
46
47public class Custmers : List<Custmer> { } // xamlでジェネリック指定できないので型を作る
48
49
50public partial class MainWindow : Window
51{
52    public Model Model { get; } = new();
53
54    public ObservableCollection<Custmers> CustmersList { get; } = new();
55
56    public MainWindow()
57    {
58        InitializeComponent();
59
60        foreach (var _ in Enumerable.Range(1, 100))
61        {
62            Model.Custmers.Add(new Custmer());
63        }
64        var custmers = new Custmers();
65        custmers.AddRange(Model.Custmers.Take(5));
66        CustmersList.Add(custmers);
67
68        DataContext = this;
69    }
70
71    private void AddButton_Click(object sender, RoutedEventArgs e)
72    {
73        var custmers = new Custmers();
74        // DataGridで選択中を抽出
75        custmers.AddRange(dataGrid.SelectedItems.Cast<Custmer>());
76        // ItemsControlに追加
77        CustmersList.Add(custmers);
78    }
79
80    private void HighlightButton_Click(object sender, RoutedEventArgs e)
81    {
82        // ハイライトを全クリア
83        foreach (var custmer in Model.Custmers)
84        {
85            custmer.Check = false;
86        }
87
88        // DataGridで選択中をハイライト
89        foreach (Custmer custmer in dataGrid.SelectedItems)
90        {
91            custmer.Check = true;
92        }
93    }
94}

アプリ画像

投稿2022/08/19 04:55

編集2023/07/30 12:52

TN8001

総合スコア8868

回答へのコメント

byori

2022/08/19 07:18 編集

TN8001 さま、いつもお世話になり感謝いたします。エラーは解消されましたが、ListView の行の背景色されていた部分を StoryBoard で変更を目立つようにしようと思っていましたが、ListView の全体の枠がわずかに色変する程度の変化でした。しっかり見ていないと気付かない程度。想定外でした。背景色の StoryBoard 変化って方法が間違っていますか？ListView の全体の色の変化でもいいんですけど・・・それにしても、色の種類が・・・覚えるの大変そうですね

TN8001

2022/08/19 07:48

> ListView の行の背景色されていた部分を StoryBoard で変更を目立つようにしようと思っていましたが、ListView の全体の枠がわずかに色変する程度の変化でした。前回の回答で行（ListViewItem）の背景色を赤くしましたが、それをアニメーションしたいってことですよね？こちらでは普通に動いていますけどねぇ。なにが違うんでしょうか。かなりかぶりますが、回答に全コードを再掲します。

TN8001

2022/08/19 07:58 編集

> それにしても、色の種類が・・・覚えるの大変そうですね面倒だったら To="#FF0000" や To="#F00" とできます。色見本を見ながら決めたいときは「wpf color 一覧」とかで検索すると出てきます。 [wpf color 一覧 - Google 検索](https://www.google.co.jp/search?q=wpf+color+%E4%B8%80%E8%A6%A7)

byori

2022/08/19 23:44

TN8001 様、うまくいきました。 > なにが違うんでしょうか。部分的にコードが抜けていました。前回まではエラーがなかったのできずいていませんでした。再掲コードを穴が開くほど見つめてコードが抜けていることに気が付きました。大変失礼いたしました。そしてありがとうございます。

行動規範の内容に同意します