Develop Reference

WPF: K.O. Can't Synchronize StoryBoards animations + Can't change application theme 😔

So I have a StackPanel menu which has a lot of buttons, each button must have a grid and inside 2 labels, the first for the icon, and the second for a small rectangle which indicates if this button is active or no. In addition, each button is linked to a page, and when the user clicks, the program displays the appropriate page.
When the program wants to get the user's attention to a specific page (for example, a notification page), an animation is started, in which we will flash the icon label (linked to that specific page) 2 times in red color for a short time, and it will be repeated every 10 seconds until the user clicks this button to see the notification.
Problem N: 1
It may happen that multiple notifications arrive at the same time from different pages, in this scenario we need to sync the StoryBoards so that the buttons will flash together every 10 seconds, otherwise you will see an unhappy result as each button will flash separately on others. My first thought was to bind something to the BeginTime of the StoryBoard, and make the StoryBoard wait for the running animations before starting. So, I jumped to the code, and as soon as I write this binding, an awesome exception pops up: Could not freeze this Storyboard timeline tree for use in feeds, I google it and I have found that I am not allowed to use any binding or dynamic resource inside the StoryBoard ControlTemplate, so, I implement a small DependencyProperty in order to synchronize the animation, and this is the reason for which you'll notice this little line here:
<Condition Binding="{Binding Synchronizer}" Value="1"/>
C# Code
public partial class Layout : Window {
public double Synchronizer { get; set; } = 0;
public static readonly DependencyProperty DependencyProperty = DependencyProperty.Register("Synchronizer", typeof(double), typeof(Layout), new PropertyMetadata());
public Layout(){
{
InitializeComponent(); DataContext = this;
}
}
}
This Synchronizer is triggered due to this XAML Code:
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever" Duration="0:0:10">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="DataContext.Synchronizer" Duration="0:0:0.6">
<DiscreteDoubleKeyFrame Value="1" KeyTime="0:0:0.0"/>
<DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.6"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
Question N: 1 In yes / no answer, is there is any work around for this exception?
Question N: 2 Is there a better solution?
Problem N: 2
The application has several styles, mainly Dark.Xaml and Light.Xaml, as we already saw in the first issue, animation is used to indicate to the user that a specific page needs some attention. in dark mode we are going to flash the icon with a red color, and in light mode we are going to flash with a blue color, so let me focus on this part of the code:
<ColorAnimationUsingKeyFrames Duration="0:0:0.6" Storyboard.TargetProperty="(Label.Foreground).(SolidColorBrush.Color)">
<LinearColorKeyFrame Value="#8B0000" KeyTime="0:0:0.2"/>
<LinearColorKeyFrame Value="#272725" KeyTime="0:0:0.3"/>
<LinearColorKeyFrame Value="#8B0000" KeyTime="0:0:0.4"/>
<LinearColorKeyFrame Value="#272725" KeyTime="0:0:0.6"/>
</ColorAnimationUsingKeyFrames>
In general, I change the theme of the app using this C # code:
Resources.MergedDictionaries.Clear();
Resources.MergedDictionaries.Add(Global.Themes[i]);
It works fine with elements that have a DynamicResource binding, but for StaticResource No !!
Question: How can I change the app theme for this StoryBoard ControlTemplate, especially when there is no chance to use the Binding or the Dynamic Resource.
<ControlTemplate x:Key="Menu.Button" TargetType="Button">
<Grid>
<Label Content="{TemplateBinding Content}">
<Label.Style>
<Style TargetType="Label">
<Setter Property="Width" Value="35"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}, Path=Tag, Converter={StaticResource Check}, ConverterParameter=1|1}" Value="True"/>
<Condition Binding="{Binding Synchronizer}" Value="1"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard Name="Storyboard">
<Storyboard>
<ColorAnimationUsingKeyFrames Duration="0:0:0.6" Storyboard.TargetProperty="(Label.Foreground).(SolidColorBrush.Color)">
<LinearColorKeyFrame Value="#8B0000" KeyTime="0:0:0.2"/>
<LinearColorKeyFrame Value="#272725" KeyTime="0:0:0.3"/>
<LinearColorKeyFrame Value="#8B0000" KeyTime="0:0:0.4"/>
<LinearColorKeyFrame Value="#272725" KeyTime="0:0:0.6"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="Storyboard"/>
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
<Label>
<Label.Style>
<Style TargetType="Label">
<Setter Property="Width" Value="2"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}, Path=Tag, Converter={StaticResource Check}, ConverterParameter=0|0}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="Visibility" Value="Collapsed"></Setter>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</Grid>
</ControlTemplate>
<StackPanel Name="Menu" DockPanel.Dock="Left" Width="35" Orientation="Vertical" VerticalAlignment="Bottom">
<Button Template="{StaticResource Menu.Button}"/>
<Button Template="{StaticResource Menu.Button}"/>
<Button Template="{StaticResource Menu.Button}"/>
<Button Template="{StaticResource Menu.Button}"/>
<Button Template="{StaticResource Menu.Button}"/>
<Button Template="{StaticResource Menu.Button}"/>
<Button Template="{StaticResource Menu.Button}"/>
<Button Template="{StaticResource Menu.Button}"/>
<Button Template="{StaticResource Menu.Button}"/>
<Button Template="{StaticResource Menu.Button}"/>
<Button Template="{StaticResource Menu.Button}"/>
<Button Template="{StaticResource Menu.Button}"/>
<Button Template="{StaticResource Menu.Button}"/>
<Button Template="{StaticResource Menu.Button}"/>
</StackPanel>

You cannot get around the problems you're facing using XAML alone. This is because Storyboards in XAML are frozen and you cannot alter them in any way.
The way I handle this is that I move any animations that need dynamic capabilities such as databinding or theme switching into code and I make them available as XAML/attached behaviors.

Storyboard animation on an element within a TabItem does not stop when changing tabs

I have a TabControl with dynamically created TabItems that each contain a Border element that I need to animate (make the border flash Yellow to orange) when a property on a viewmodel is greater than zero, via Data Binding, but remain black if the value is zero. Each TabItem has it's own instance of the viewmodel, so the property value could be different for each TabItem, therefore the animation should only be activated on the appropriate TabItem (i.e. each TabItem is a UserControl that contains several Border elements, one of which I wish to animate triggered by a Property value in the UserControls viewmodel).
I have several similar elements, so I am using a MultiDataTrigger to check for a tag on the element, as well as check the property value (via a converter).
I can successfully animate the BorderBrush when selecting a TabItem where the property value is greater than zero, but when I then select a TabItem where the property value is equal to zero, the animation should stop, but does not. I am also changing the BorderThickness and the Margin, and these settings return to the normal settings as expected, but the animation does not stop.
I am using a Style.Trigger to apply the animation, and a converter to convert the property's value from an int to a boolean (true if greater than zero, and false if zero).
Here is my xaml code (from app.xaml):
<Style TargetType="{x:Type Border}" x:Key="JobFilterExternalBorder">
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="CornerRadius" Value="3"/>
<Setter Property="Margin" Value="2,0,1,0.8"/>
<Style.Triggers>
<!-- Add Data Trigger to identify if filter is UnprocessedParts and value is > 0, and animate border to imitate a flashing border -->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}" Value="IsUnprocessed"/>
<Condition Binding="{Binding UnprocessedQty, Converter={StaticResource ConvertNonZeroToBoolean}}" Value="true"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="BorderThickness" Value="6"/>
<Setter Property="Margin" Value="0,-2,-1,-1.2"/>
</MultiDataTrigger.Setters>
<MultiDataTrigger.EnterActions>
<BeginStoryboard Name="FlashStoryboard" Storyboard="{StaticResource AnimationFlashYellowToOrange}">
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="FlashStoryBoard" />
<RemoveStoryboard BeginStoryboardName="FlashStoryBoard"/>
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>
</Style.Triggers>
</Style>
And my Storyboard:
<Storyboard x:Key="AnimationFlashYellowToOrange" Storyboard.TargetProperty="BorderBrush" RepeatBehavior="Forever" Duration="0:0:1" FillBehavior="Stop">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Yellow" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Orange" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
And the view to which this is being applied:
<Border Name="UnprocessedQtyBorder" Tag="IsUnprocessed" Style="{StaticResource JobFilterExternalBorder}" >
</Border>
I can confirm that the MultiDataTrigger is working fine because the BorderThickness and changes back to the normal thickness when the MultiDataTrigger becomes false when selecting a TabItem where the property value is equal to zero. It's just the animation that does not stop.
I have tried:
Adding StopStoryboard to the MultiDataTrigger.ExitActions
Adding RemoveStoryboard to the MultiDataTrigger.ExitActions
Including FillBehaviour="Stop"
Adding a second MultiDataTrigger to start a new Storyboard that sets the BorderBrush to black
Changing the order of the Style settings to have the MultiDataTrigger before the standard property settings
Searching the internet for any other examples that might point me in the right direction
I need to have the Storyboard animate the border continuously while the offending element is on screen, so I have included the RepeatBehavior="Forever" property
I am following MVVM design pattern and would prefer to avoid having code-behind, but I'm not zealous about it.
I have been struggling with this all day and have not made any progress, so this is my last hope.
EDIT:
I suspect the MultiDataTrigger.ExitActions are never executed in order to stop the Storyboard, so an additional question must be asked; Is it even possible to stop a Storyboard in this manner? Can the MultiDataTrigger.ExitActions be triggered to execute some other way?
EDIT2:
I have created a sample VS solution to demonstrate the effect I am seeing. The solution can be found on GitHub here
EDIT3:
This is what is currently happening:
When returning to "Tab 1", the animation should stop.

WPF - System.InvalidOperationException on ContextMenu.IsOpen

I was given the following exception:
An unhandled exception of type 'System.InvalidOperationException' occurred in PresentationFramework.dll
Additional information: Cannot resolve all property references in the property path 'ContextMenu.IsOpen'. Verify that applicable objects support the properties.
I guess the exception is quite self-explanatory, however I have no idea on how to fix it.
Here is my code:
XAML
<Button
x:Name="btnNotifications"
Height="50px"
Width="auto"
Padding="15 0"
Click="btnNotifications_Click"
ToolTip="Notifications & Agenda"
HorizontalAlignment="Right"
DockPanel.Dock="Right"
BorderThickness="0">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource AccentColorBrush}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background" Value="Transparent"/>
</Trigger>
<EventTrigger RoutedEvent="Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="ContextMenu.IsOpen">
<DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Button.Style>
<Button.Content>
<StackPanel
Orientation="Horizontal">
<Image
Source="/Resources/Icons/Notifications.ico"
Width="25px"
Height="25px"/>
<Label
x:Name="lblNotifications"
FontFamily="Century Gothic"
FontSize="25px"
Foreground="Maroon"
Visibility="Collapsed"/>
</StackPanel>
</Button.Content>
<Button.ContextMenu>
<ContextMenu
x:Name="btnNotificationsMenu">
<MenuItem
x:Name="btnNotificationsNoNew"
Header="No New Notifications."/>
<MenuItem
x:Name="btnNotificationsSeperator"
Background="{DynamicResource AccentColorBrush}"
Height="2px"
Focusable="False"
IsHitTestVisible="False"/>
<MenuItem
x:Name="btnNotificationsNoAgenda"
Header="Your Agenda is Empty."/>
</ContextMenu>
</Button.ContextMenu>
</Button>
Code Behind
public static void NewAppointmentForm()
{
MainWindow appointment = new MainWindow(new AppointmentForm(true));
appointment.btnNotificationsMenu.IsOpen = false;
appointment.ShowDialog();
}
Obviously wrapping the above code in a try catch and calling Close() on appointment fixes the issue. However, it is more of a workaround than a clean solution.
This issue occurs whenever I try to close the window through another Button. I tried closing the window using Close() method within an EventHandler and also as a command through XAML - Command="{Binding CloseCommand}".
I would be really grateful if someone could shed some light upon this issue.
May I point out that the Button containing the ContextMenu is wrapped inside a Border which is placed directly in the MainWindow.
If more detail is needed, please do ask. Thanks :)

Try surrounding the property with parenthesis:
Storyboard.TargetProperty="(ContextMenu.IsOpen)"
See PropertyPath XAML Syntax. The XAML parser doesn't know how to resolve the property because it can be attached to any DependencyObject.

This was a typical Isaac silly mistake.
Basically, I copied the Button which had the ContextMenu and pasted the code to create two ContextMenu-less buttons. Having the following applied to the ContextMenu-less buttons caused the program to crash:
<EventTrigger RoutedEvent="Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="ContextMenu.IsOpen">
<DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>

Using dynamic parameters for binding ElementName in styles. Reusing styles

I have a question.
I have created a style in WPF designer (XML) for TextBlocks. After IsMouseOver event is fired on any of two image controls, my textBlocks changes its positions. This style is used for some textBlocks.
<Style x:Key="movingTextBlocksStyle" TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=image1, Path=IsMouseOver}" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform/>
</Setter.Value>
</Setter>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" From="0" To="-125"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=image2, Path=IsMouseOver}" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform/>
</Setter.Value>
</Setter>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" From="0" To="-125"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
This style will be used as:
<TextBlock x:Name="textBlock1" Style="{StaticResource movingTextBlocksStyle}"/>
<TextBlock x:Name="textBlock2" Style="{StaticResource movingTextBlocksStyle}"/>
My problem is that I want to reuse this style for another textBlocks: textBlock3 and textBlock4 where "Binding ElementName" differs, for example image3 and image4.
I have thought that if there was any possibility to reuse this style with some type of dynamic parameter or argument, it would be great.
I searched for any solution only as xml-code without any C# (I am using C# with WPF) or converter implementation.
Thanks in advance.

Here's pure XAML solution:
Collect all controls on which the text block depends in an array and set it as data context:
<Image x:Name="image1"/>
<Image x:Name="image2"/>
<TextBlock Style="{StaticResource movingTextBlocksStyle}">
<TextBlock.DataContext>
<x:Array Type="system:Object">
<x:Reference>image1</x:Reference>
<x:Reference>image2</x:Reference>
</x:Array>
</TextBlock.DataContext>
</TextBlock>
You'll need to remember to change all bindings on the TextBlock properties accordingly, because data context is no longer inherited. Then in the style definition bind using corresponding array indices:
<DataTrigger Binding="{Binding [0].IsMouseOver}" Value="True">...</DataTrigger>
...
<DataTrigger Binding="{Binding [1].IsMouseOver}" Value="True">...</DataTrigger>
The system: prefix namespace is clr-namespace:System;assembly=mscorlib.

You could define attached properties which would hold the controls on which the TextBox depends, like so (I'll use only one property to keep it brief):
static class Helper
{
public static object GetImage(DependencyObject obj)
{
return (object)obj.GetValue(ImageProperty);
}
public static void SetImage(DependencyObject obj, object value)
{
obj.SetValue(ImageProperty, value);
}
public static readonly DependencyProperty ImageProperty =
DependencyProperty.RegisterAttached(
"Image",
typeof(object),
typeof(Helper),
new PropertyMetadata(null));
}
Then, in the data trigger, bind using the attached property:
...
<DataTrigger Binding="{Binding Path=(local:Helper.Image).IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True">
...
Lastly, set the property value to be the control on which the TextBlock depends:
<Image x:Name="image1"/>
...
<TextBlock local:Helper.Image="{Binding ElementName=image1}"
Style="{StaticResource movingTextBlocksStyle}"/>
This solution is not pure XAML - it requires a little bit of code-behind to define the attached properties, but I doubt there's an elegant way to completely avoid it.

how to refresh wpf data trigger ?

i have the grid with storyboard as below.
<Grid x:Name="grd_Order" Grid.Column="2" Height="16" Margin="0,-2,0,0" Visibility="Collapsed" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.Resources>
<Storyboard x:Key="stry_OrderMsgShowHide" RepeatBehavior="3x">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Visibility)" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:2" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid.Style>
<Style >
<Style.Triggers>
<DataTrigger Value="True" Binding="{Binding Path=BlinkOrderAlert,Mode=TwoWay}">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="stry_BlinkOrdAlert" Storyboard="{StaticResource stry_OrderMsgShowHide}"/>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
and in my ViewModel.cs,
private bool blinkOrderAlert;
public bool BlinkOrderAlert
{
get
{
return blinkOrderAlert;
}
set
{
if (blinkOrderAlert == value)
return;
this.blinkOrderAlert = value;
this.RaisePropertyChanged(this, new PropertyChangedEventArgs("BlinkOrderAlert"));
}
}
public void BlinkOrdAlert()
{
this.BlinkOrderAlert=false;
this.BlinkOrderAlert = true;
}
public ViewModel()
{
this.BlinkOrderAlert=true;
}
and it only works first time when constructor is initialized. Whenever i call the BlinkOrdAlert function, it's not working anymore. How can i modify the datatrigger to run storyboard everytime i call the function? Thanks.

Consider adding the following data trigger to you style.
The Following data trigger will remove the story board when the BlinkOrderAlert value set to false and when the value was true it will add story board.
hope this will help.
<DataTrigger Value="False" Binding="{Binding Path=BlinkOrderAlert,Mode=TwoWay}">
<DataTrigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="stry_BlinkOrdAlert"></RemoveStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>

You should not really use a DataTrigger for this at all, you try use a property like an event which is quite a hack. Unfortunately the native triggers are, let's say not optimal, so you cannot use an EventTrigger as it only supports RoutedEvents.
But you might be able to use ViewModel-events using the EventTrigger from Blend's Interactivity (Blend 3 SDK) instead, so that might be worth a try.