This question already has an answer here:
WPF animation on data change
(1 answer)
Closed 2 years ago.
I have a wpf app with binding to properties in the code-behind.
They update thanks to the standard OnPropertyChanged() behaviour - so far so good.
I want to briefly flash the background of xaml object whenever that value is updated - to alert the eye to a change in value. I have a feeling that this should be easy, but I think there is a syntax issue.
So far, I have tried to flash the background of a Label:
<Style TargetType="{x:Type Label}">
<Style.Triggers>
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<BeginStoryboard>
<Storyboard AutoReverse="True">
<ColorAnimation Duration="0:0:0.3"
Storyboard.TargetProperty="Background"
To="Blue"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
..what am I doing wrong?
#Pavel pointed me in the right direction.
On my xaml controls, I needed to add NotifyOnTargetUpdated to the binding, like so:
Content="{Binding ID, NotifyOnTargetUpdated=True}"
Related
I have a ListBox that is bound to a List of UserControls.
The uc has a TextBlock that has an animation that fires OnLoad.
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.8" Storyboard.TargetProperty="FontSize" To="16" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style
Works fine. My problem is the List can be Collapsed by the user. When the user unCollapses the List I need the aanimation to fire again (it doesn't, of course - because they are already loaded). Doesn't seem to be any other event that would work. Soo..I'm trying to dump the ItemSource and reload them. It won't hurt as there are only up to 10 or 12 items. I have an ICommand in the ViewModel that catches the Visibility Collapse...but I'm stuck there. Thanks
What I ended up doing is copying the Collection on Collapse...then Clearing. Now I reload the copy when Visibility becomes Visible. Thanks
What I'd like
I want to reuse some styles across multiple UserControl types.
I would like the background of some Border controls to flash, and I'd like them all to use the same style, static resource and animation, so that they all flash in sync.
How I'm trying to do it
To that end, I have defined some common colours in a resource dictionary, like so:
<SolidColorBrush x:Key="StatusErrorBackground" Color="#440000" />
...and I have also defined a StoryBoard in this dictionary, like so:
<Storyboard x:Key="BackgroundAnimation">
<ColorAnimation
Storyboard.Target="{StaticResource StatusErrorBackground}"
Storyboard.TargetProperty="Color"
From="#440000"
To="#ff0000"
Duration="0:0:1"
RepeatBehavior="Forever"
AutoReverse="True"/>
</Storyboard>
I've then added the following to a top-level UserControl:
<FrameworkElement.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="CommonResources.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</FrameworkElement.Resources>
<FrameworkElement.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource BackgroundAnimation}"/>
</EventTrigger>
</FrameworkElement.Triggers>
...and then in various other UserControls that are children of that, I re-import the ResourceDictionary as above and use the {StaticResource StatusErrorBackground} for a Background.
The elements in question are coloured red (as in the SolidColorBrush declaration), but they're not flashing.
Fuzzy understanding thus far
Maybe doing this doesn't raise the appropriate PropertyChanged notifications on the elements in question, so they're not redrawn? Or something like that. The Color property on SolidColorBrush isn't a dependency property, but SolidColorBrush implements IAnimatable, so there's obviously magic happening behind the scenes here I don't understand.
Or is it that because I'm importing the same resource dictionary in two different places (once in my top-level UserControl plus once in my child) that I end up with two independent StaticResource references? If you import the same ResourceDictionary file in two different controls, does it create independent resources for each? In which case I might be able to fix this by pulling it in at an app level, I guess...
Can anyone tell me what I doing wrong and how I might go about fixing it?
I know I'm late here, but I found this question when I was attempting to animate to and from colours that are held in solid brushes. The brushes are part of a resource dictionary that other people are using, and I don't want to change. I just made this, very quickly to try out and it appeared to work.
public class SolidColorAnimation : ColorAnimation
{
public SolidColorBrush ToBrush
{
get { return To == null ? null : new SolidColorBrush(To.Value); }
set { To = value?.Color; }
}
}
and use it in the xaml like this:
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard >
<ui:SolidColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" ToBrush="{StaticResource NavButtonRolloverBrush}" Duration="0:0:0.75"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard >
<ui:SolidColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" ToBrush="{StaticResource NavButtonBrush}" Duration="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
I can't really say why, but it works if you add a dummy object, e.g. a Rectangle that uses the SolidColorBrush for its Fill property, and then animate that Fill. Now the SolidColorBrush's Color gets animated.
<SolidColorBrush x:Key="StatusErrorBackground" Color="#440000" />
<Rectangle x:Key="StatusErrorBackgroundRectangle" Fill="{StaticResource StatusErrorBackground}"/>
<Storyboard x:Key="BackgroundAnimation">
<ColorAnimation
Storyboard.Target="{DynamicResource StatusErrorBackgroundRectangle}"
Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"
... />
</Storyboard>
just use
<Color x:Key="name" A="0" R="255" G="255" B="255"/>
insteade of
<SolidColorBrush x:Key="name" Color="#0fff"/>
that works for me
What I want to achieve is that when the mouse is hovering over the main window, all the UI elements should freeze, which I think can be done by setting Window.IsEnabled to false, and after the mouse leaves the main window, everything should be back to normal.
I've tried to define a property trigger in a style targetting Window, but it doesn't work. The code is as lollow,
<Style.Triggers>
<Trigger Property="Window.IsMouseOver" Value="True">
<Setter Property="Window.IsEnabled" Value="false"/>
</Trigger>
</Style.Triggers>
In fact this kind of property trigger wouldn't work on Grid either. Can anyone make some explanations?
I also tried to explicitly use the MouseEnter and MouseLeave events on Window, and set the disable/enable logic in the handlers. This works. I wonder if it's possible to do this in XAML?
Well to be honest I don't know why your code doesn't work, I think it goes in some kind of conflict but I don't know why
Anyway you can do it in XAML using eventsetter, It's not so elegant but it works
<Window.Triggers>
<EventTrigger RoutedEvent="Window.MouseEnter">
<BeginStoryboard>
<Storyboard Name="sb">
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsEnabled" >
<BooleanKeyFrameCollection>
<DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:0:1"></DiscreteBooleanKeyFrame>
</BooleanKeyFrameCollection>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
I have several toggle-like buttons that I want to pulsate in unison when in the pressed state.
I have defined a style with a trigger that kicks-off the glow animation and this works just fine, apart from the fact that each button pulsates asynchronously from the others.
How can I have each button synchronize its pulse to the others?
Here's the style:
<Storyboard x:Key="pulseStory">
<ColorAnimation
Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"
From="Red"
To="Transparent"
Duration="0:0:1" />
</Storyboard>
<Style x:Key="pulseButton" TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding Tag,RelativeSource={RelativeSource Self}}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource pulseStory}"/>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
Cheers!
OK ... I'll take a stab at this one ...
The WPF framework doesn't have any facility for synchronizing animations that are running concurrently, so you are going to have to come up with a different method. One idea springs to mind ...
Animate some Color property of a hidden UI element within your storyboard, then use UI binding (i.e. ElementName bindings) to connect to the Color of each of your buttons to this hidden UI element.
Actually you should be doing this via a resource, at least using a hidden control is a bit too much of a hack for me personally.
What needs to be met for it to work:
The property you bind to needs to be a DependencyProperty, hence your enveloping object needs to be a DependencyObject.
You have to reference the object as a static resource (as opposed to a dynamic resource) like this:
<DoubleAnimation
Storyboard.Target="{StaticResource AnimationValue}"
Storyboard.TargetProperty="(local:WrappedValue.Value)"
To="0" Duration="0:0:1"/>
Well, admittedly it's a bit hacky as well to have a Wrapper-class for this but it's cleaner than a full control (if you want to use controls you can utilize some unused Tag-property, e.g. of the container that hosts all your controls)
I am trying to create a simple (I think) animation effect based on a property change in my ViewModel. I would like the target to be a specific textblock in the control template of a custom control, which inherits from Window.
From the article examples I've seen, a DataTrigger is the easiest way to accomplish this. It appears that Window.Triggers doesn't support DataTriggers, which led me to try to apply the trigger in the style. The problem I am currently having is that I can't seem to target the TextBlock (or any other child control)--what happens is which the code below is that the animation is applied to the background of the whole window.
If I leave off StoryBoard.Target completely, the effect is exactly the same.
Is this the right approach with the wrong syntax, or is there an easier way to accomplish this?
<Style x:Key="MyWindowStyle" TargetType="{x:Type Window}">
<Setter Property="Template" Value="{StaticResource MyWindowTemplate}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ChangeOccurred}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard BeginTime="00:00:00" Duration="0:0:2" Storyboard.Target="{Binding RelativeSource={RelativeSource AncestorType=TextBlock}}"
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
<ColorAnimation FillBehavior="Stop" From="Black" To="Red" Duration="0:0:0.5" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
Update
Should have also mentioned that I tried to name the TextBlock and reference it via StoryBoard.TargetName (as Timores suggested), and got the error "TargetName property cannot be set on a Style Setter."
EDIT: I have overseen the fact that the TextBlock is in the ControlTemplate of your custom Window/Control. I do not think that it is possible to target a control within the ControlTemplate from a Storyboard outside of this ControlTemplate. You could however define a property on your custom Window which you then databind to your ChangeOccurred property, and then add the trigger to your ControlTemplate which will now get triggered by the custom Control's property rather than the Window's ViewModel's property (of course, indirectly it is triggered by the ViewModel because ChangeOccurred is bound to the property of the custom Window which in turn triggers the animation - uh, complex sentence, hope you understand). Is this an option? Could you follow? ;-)
Maybe some code helps:
public class MyCustomWindow : Window
{
public static readonly DependencyProperty ChangeOccurred2 = DependencyProperty.Register(...);
public bool ChangeOccurred2 { ... }
// ...
}
And some XAML:
<local:MyCustomWindow ChangeOccurred2="{Binding ChangeOccurred}" ... >
<!-- Your content here... -->
</local:MyCustomWindow>
<!-- Somewhere else (whereever your ControlTemplate is defined) -->
<ControlTemplate TargetType="{x:Type local:MyCustomWindow}">
<!-- your template here -->
<ControlTemplate.Triggers>
<Trigger Property="ChangeOccurred2" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard BeginTime="00:00:00" Duration="0:0:2"
Storyboard.TargetName="txtWhatever"
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
<ColorAnimation FillBehavior="Stop"
From="Black" To="Red"
Duration="0:0:0.5"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Note: I named the Window's property ChangeOccurred2 because I wanted it to be distinguishable from the ViewModel's ChangeOccurred property. Of course, you should choose a better name for this property. However, I am missing the background for such a decision.
My old answer:
So, you want to animate a TextBlock which is in the content of a (custom) Window?!
Why do you want to set the style on the Window, and not on the TextBlock itself? Maybe you should try something like this (did not test this!):
<local:MyCustomWindow ... >
<!-- ... -->
<TextBlock x:Name="textBlockAnimated" ... >
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding ChangeOccurred}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard BeginTime="00:00:00" Duration="0:0:2"
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
<ColorAnimation FillBehavior="Stop"
From="Black" To="Red"
Duration="0:0:0.5"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<!-- ... -->
</local:MyCustomWindow>
The {Binding ChangeOccurred} might not be sufficient. You might have to add a DataContext to the TextBlock, or add a RelativeSource or something.
Is the TextBlock in the MyWindowTemplate ?
If so, give the TextBlock a name and use Storyboard.TargetName to reference it.
See another question in SO