Question

I want to create a datatrigger that makes my page blink (from transparent to red). So I created a DataTrigger that listens to a boolean flag within my viewmodel. This flag shall indicate whenever the user needs to be reminded. In that case, my page shall blink from transparent to red.

I was pretty sure that I have implemented the data trigger in a correct manner, but my app does nothing – no error, no blinking… So I must have something missed.

<Style x:Key="ReminderPage" TargetType="{x:Type ViewTemplates:TpApplicationBarView}" BasedOn="{StaticResource TpApplicationBarViewStyle}">
    <Style.Triggers>

        <!-- Reminder animation, when the time comes to remind the user -->
        <DataTrigger Binding="{Binding IndicateReminderAnimation}" Value="True">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard x:Name="Blink">
                        <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                                        AutoReverse="True" 
                                        From="Transparent" 
                                        To="Red" 
                                        Duration="0:0:1" 
                                        RepeatBehavior="Forever">
                        </ColorAnimation >
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
        </DataTrigger>

        <DataTrigger Binding="{Binding IndicateReminderAnimation}" Value="False">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                                        AutoReverse="False" 
                                        To="Transparent" 
                                        Duration="0:0:1">
                        </ColorAnimation >
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

So, what do I have done wrong?

Update: I can see the following message in the output window:

System.Windows.Media.Animation Warning: 6 : Unable to perform action because 
the specified Storyboard was never applied to this object for interactive control.;        
Action='Stop'; Storyboard='System.Windows.Media.Animation.Storyboard'; 
Storyboard.HashCode='61356140'; Storyboard.Type='System.Windows.Media.Animation.Storyboard'; 
TargetElement='System.Windows.Media.Animation.Storyboard'; TargetElement.HashCode='61356140'; 
TargetElement.Type='System.Windows.Media.Animation.Storyboard'

Update2: After googling arround I found out, that it is a problem with the UI Thread. So I made a dispatcher call whenever I set the bound property. But even with this trick, there’s no color animation. But the error in the output window seems to be vanished. So, I’m searching for further ideas on how to fix the animation.

Update3: It seems to be a general problem setting the background color of the page. But it’s really strange. The Page is placed in a NavigationFrame. Setting the background color of the navigation frame will change the color of the application, but setting the background color of the page (even without any animation) won’t change anything.

Answer 1

I found the bug – or better the two bugs.

1.) It seems not be possible to change the background color of a page that is placed within a Navigation Frame.

So first was to move the binding and event to the MainWindow itself (wpf window class)

2.) The Style that contains the data trigger did not work. After googling around I found a working solution for what I’m searching for.

<Storyboard x:Key="RemindUser" >
    <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                    AutoReverse="True" 
                    From="Transparent" 
                    To="{StaticResource WinAccentBackgroundColor}" 
                    Duration="0:0:1" 
                    RepeatBehavior="Forever">
    </ColorAnimation >
</Storyboard>

<Storyboard x:Key="StopRemindUser">
    <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                    AutoReverse="True" 
                    To="Transparent" 
                    Duration="0:0:1">
    </ColorAnimation >
</Storyboard>

<Style x:Key="ReminderWindow" TargetType="{x:Type Metro:SnappedTransparentWindow}" BasedOn="{StaticResource TransparentWindow}">
    <Style.Triggers>

        <!-- Reminder animation, when the time comes to remind the user -->
        <DataTrigger Binding="{Binding IndicateReminderAnimation}" Value="True">
            <DataTrigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource RemindUser}"/>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <BeginStoryboard Storyboard="{StaticResource StopRemindUser}"/>
            </DataTrigger.ExitActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

The key was to split the binding and storyboard into different parts.