Triggers on a DataTemplate when data is updated

Question

I've got a data template for a list box item similar to the one on this page... link

I would like to take it a step further and do something to highlight the items when they change. For example, using the code in the link above, I would like to put a trigger to do something when Widget.Quantity changes. Maybe make the quiantity item (nothing else) flash or something. How can I do that? I include the relevant code below...

    <Window.Resources>
    <Style x:Key="RoundedItem" TargetType="ListBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border CornerRadius="10" BorderBrush="Black" BorderThickness="1" Margin="1">
                        <ContentPresenter />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <DataTemplate DataType="{x:Type local:Widget}">
        <StackPanel Orientation="Horizontal">
            <Label Content="{Binding Name}" />
            <Label Content="{Binding Quantity}" />
        </StackPanel>
    </DataTemplate>
</Window.Resources>
<ListBox ItemsSource="{Binding Widgets}" ItemContainerStyle="{StaticResource RoundedItem}" HorizontalContentAlignment="Stretch" />

Answer 1

Just add triggers to the DataTemplate.Triggers collection.

<DataTemplate DataType="{x:Type local:Widget}">
    <StackPanel x:Name="panel" Orientation="Horizontal">
        <Label Content="{Binding Name}" />
        <Label Content="{Binding Quantity}" />
    </StackPanel>

    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding SomeProperty}" Value="True">
            <Setter Property="Background" Value="Yellow" TargetName="panel" />
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

Answer 2

You'll probably want to add a property in your Widget class to do that. Or if Widget is a Model, you may want to wrap it in a WidgetViewModel class with an "IsFlashing" property on it. Then set the trigger to fire whenever this "IsFlashing" property is True.

Answer 3

I've managed to get it working with EventTriggers. Complete code below. In summary, the event trigger detects when the bound value changes, then turns the text orange briefly.

    <UserControl.Resources>
    <!-- instantiate an instance of the TimeSettingsCollection class -->
    <c:TimeSettingsCollection x:Key="TimeSettingsCollection"/>

    <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border Name="ItemBorder" BorderBrush="Gray" BorderThickness="1" Margin="3" Padding="7" Background="Transparent">
                        <ContentPresenter />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="ItemBorder" Property="Background" Value="LightBlue" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <DataTemplate DataType="{x:Type c:TimeSettingsItem}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="80"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Row="0" Grid.Column="0" Margin="0,0,8,0" 
                       Style="{StaticResource smallTitleStyle}">Pc Name:</TextBlock>
            <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=PcName}" 
                       Style="{StaticResource textStyleTextBlock}"/>
            <TextBlock Grid.Row="1" Grid.Column="0" Margin="0,0,8,0" 
                       Style="{StaticResource smallTitleStyle}">Time:</TextBlock>
            <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=TimeSettings.DateTime, NotifyOnTargetUpdated=True}" 
                       Style="{StaticResource textStyleTextBlock}" x:Name="timeTextBlock">
                <TextBlock.Background>
                    <SolidColorBrush Color="Transparent"/>
                </TextBlock.Background>
                <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="Binding.TargetUpdated">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation
                                Storyboard.TargetName="timeTextBlock" 
                                Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                To="Orange"              
                                Duration="0:0:1"
                                AutoReverse="True"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>                    
                </TextBlock.Triggers>
            </TextBlock>
        </Grid>
    </DataTemplate>
</UserControl.Resources>


<DockPanel>
    <ListBox Name="timeListBox" ItemsSource="{Binding Source={StaticResource TimeSettingsCollection}}" ItemContainerStyle="{StaticResource ListBoxItemStyle}" HorizontalContentAlignment="Stretch" IsSynchronizedWithCurrentItem="True">
    </ListBox>
</DockPanel>