Cause New ListView Item Background to Flash When Added

Question

As the title states, I am attempting to have a ListViewItembackground change colors when the item is loaded. I am able to get the opacity to change (my very striped down XAML):

<ListView Background="Black" ItemsSource="{Binding Somesource}" Drop="AddItem">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=OneWay}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListViewItem}">
                        <Grid x:Name="SignalGrid">
                            <!-- Grid Information -->
                        </Grid>
                        <ControlTemplate.Triggers>
                            <DataTrigger Binding="{Binding Path=IsSelected}" Value="false">
                                <Setter TargetName="SignalGrid" 
                                        Property="Background" 
                                        Value="Transparent"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Path=IsSelected}" Value="true">
                                <Setter TargetName="SignalGrid" 
                                        Property="Background" Value="Blue"/>
                            </DataTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard AutoReverse="True" 
                                    RepeatBehavior="6x">
                            <DoubleAnimation Duration="0:0:0.3"
                                          Storyboard.TargetProperty="Opacity" 
                                          From="1.0" To="0.3"/>
                        </Storyboard>
                     </BeginStoryboard>
                 </EventTrigger>
             </Style.Triggers>
         </Style>
     </ListView.ItemContainerStyle>
</ListView>

This works fine, however is not the true feature I wamt. I tried to do the storyboard like:

<Storyboard AutoReverse="True" RepeatBehavior="6x">
    <ColorAnimation Duration="0:0:0.3" 
                    Storyboard.TargetProperty="(ListViewItem.Background).(SolidColorBrush.Color)" To="Blue"/>
</Storyboard>

However this does nothing. I included the IsSelected DataTriggers because the basic idea is that I want to switch between IsSelected = true to IsSelected = false when the item is first added (i.e. the background toggles between blue and black). I am guessing that my issue is with Storyboard.TargetProperty="(ListViewItem.Background).(SolidColorBrush.Color)" and I'm sure I'm missing something simple, but any help would be greatly appreciated.

EDIT I found the solution. In  I have a border, so I used this solution to solve my problem.

Your Background flashes because when a new item is added, the background is empty and based on `DataTrigger` since it is not selected, it will set the color to Blue. Try to Set the background in your `ItemTemplate` of `SignalGrid` to Blue as default. — AVK, Sep 13 '18 at 14:53
@AVK, I **want** it to flash (for say 3 seconds upon loading) — eye_am_groot, Sep 13 '18 at 14:56

score 1 · Answer 1 · answered Sep 13 '18 at 15:03

1

This should make the ListViewItem blink when loaded:

<ListView ItemsSource="{Binding Somesource}">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=OneWay}" />
            <Setter Property="Background" Value="Transparent" />
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard AutoReverse="True" RepeatBehavior="6x">
                            <ColorAnimation Duration="0:0:0.3" 
                                            Storyboard.TargetProperty="(ListViewItem.Background).(SolidColorBrush.Color)" 
                                            To="Blue"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

answered Sep 13 '18 at 15:03

mm8

163,881
10
57
88

Still get the same problem, no flashing. Thanks though! – eye_am_groot Sep 13 '18 at 15:16
It certainly flashes for me. Did you try to simply set the ItemsSource property to an ObservableCollection and add an item to it? It works for me. There is most probably something else in your code that causes it not to work. – mm8 Sep 13 '18 at 15:17
yeah, I'm thinking it's somewhere else. I need the `Template` as I have it, unfortunately. – eye_am_groot Sep 13 '18 at 15:23
It's still completely empty. Why are you defining a custom ControlTemplate in the first place? – mm8 Sep 13 '18 at 15:27
There is content inside the grid (`contentpresenter`, `itempresenter`, etc.) however to list it all would be very difficult to do (for various reasons). There is a custom control that is used and _not_ using the custom ControlTemplate would involve way too much refractoring at this point – eye_am_groot Sep 13 '18 at 15:37

Ilya Grigoryan · Answer 2 · 2018-09-13T16:14:59.227

1

<ListView Background="Black" ItemsSource="{Binding Somesource}" Drop="AddItem">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=OneWay}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListViewItem}">
                        <Grid x:Name="SignalGrid"  Background="{TemplateBinding Background}">
          <!-- Grid Information -->
    </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard AutoReverse="True" RepeatBehavior="6x">
    <ColorAnimation Duration="0:0:0.3" 
                    Storyboard.TargetProperty="(ListViewItem.Background).(SolidColorBrush.Color)" To="Blue"/>
</Storyboard>
                     </BeginStoryboard>
                 </EventTrigger>
             </Style.Triggers>
         </Style>
     </ListView.ItemContainerStyle>
</ListView>

edited Sep 13 '18 at 16:14

answered Sep 13 '18 at 15:31

Ilya Grigoryan

229
1
5

Does this help with what I am trying to accomplish? If so, could you please provide some explanation? – eye_am_groot Sep 13 '18 at 15:38
The reason is that you want to change ListViewItem.Background property, but it will no have any effect because you have override template and there you have Grid which will not change it's background until you don't Binding. (if something was not clear because of my English please feel free to ask me) – Ilya Grigoryan Sep 13 '18 at 15:58
I see, thanks for clarifying. It still does not solve my problem however. – eye_am_groot Sep 13 '18 at 16:03
Could you please check this: I have edited my answer. – Ilya Grigoryan Sep 13 '18 at 16:15
Thanks, I actually tried this, with no avail. As mentioned in the comments on mm8's answer, I think something in my `ControlTemplate` prevents the feature from work. Appreciate the answer! – eye_am_groot Sep 13 '18 at 16:25

score 0 · Accepted Answer · answered Sep 13 '18 at 18:24

Just to close the question. As mentioned in the "EDIT," in , I have a border, and changed it like so:

<Border>
    <Border.Background>
        <SolidColorBrush Color="Black" x:Name="RowBackground"/>
    </Border.Background>
</Border>

Then, still in the ControlTemplate:

<ControlTemplate.Triggers>
    <DataTrigger Binding="{Binding Path=IsSelected}" Value="false">
        <Setter TargetName="SignalGrid" Property="Background" Value="Transparent"/>
    </DataTrigger>
    <DataTrigger Binding="{Binding Path=IsSelected}" Value="true">
        <Setter TargetName="SignalGrid" Property="Background" Value="Blue"/>
    </DataTrigger>
    <EventTrigger RoutedEvent="Loaded">
        <BeginStoryboard>
            <Storyboard AutoReverse="True" RepeatBehavior="6x">
                <ColorAnimation Duration="0:0:0.5" Storyboard.TargetName="RowBackground" 
                                Storyboard.TargetProperty="Color" To="Blue"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</ControlTemplate.Triggers>

Cause New ListView Item Background to Flash When Added

3 Answers3