I am trying to translate a rectangle on the Y access using a DataTrigger.
It works great except I want the rectangle to move from its current transformed state instead of restarting from the initialstate.
I would like an all XAML solution.
I have tried setting the Completed property but WPF won't allow that.
Thanks in advance.
<DataTrigger Binding="{Binding CurrentFloor}" Value="5">
<DataTrigger.EnterActions>
<BeginStoryboard Name="sb5">
<Storyboard>
<DoubleAnimation
To="5"
Storyboard.TargetProperty="RenderTransform.Y"
Duration="0:0:2"
/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="sb5" />
</DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger Binding="{Binding CurrentFloor}" Value="4">
<DataTrigger.EnterActions>
<BeginStoryboard Name="sb4">
<Storyboard>
<DoubleAnimation
To="75"
Storyboard.TargetProperty="RenderTransform.Y"
Duration="0:0:2" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="sb4" />
</DataTrigger.ExitActions>
</DataTrigger>
Use <DoubleAnimation By="5" .../> not <DoubleAnimation To="5" .../>
Related
I want the animation to stop when the boolean CanAnimate becomes false. It starts on true, so how do i tell it to stop when CanAnimate is false? (The CanAnimate bool is set inside a SelectedItem setter)
<Border BorderBrush="Black" BorderThickness="2" Margin="1" Name="ReviewNote">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding CanAnimate}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(Border.Opacity)"
From="1.0" To="0.0" AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<TextBlock/>
</Border>
You can try using the ExitActions on the DataTrigger to stop the animation, by overriding with another animation. For instance:
<DataTrigger Binding="{Binding CanAnimate}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(Border.Opacity)"
From="1.0" To="0.0" AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(Border.Opacity)"
From="0.0" To="0.0" Duration="0:0:0.0" FillBehavior="HoldEnd" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
Alternatively, there is a way to stop storyboards in XAML by name, again you could use ExitActions for this. This previous question shows the way.
Hope this helps!
I have this code (it's working, so far);
<Image Name="img_person" Tag="{Binding Path=MyProperty1, NotifyOnTargetUpdated=True}" Canvas.Top="0" Canvas.Left="0">
<Image.Triggers>
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="img_person"
Storyboard.TargetProperty="(Canvas.Top)"
By="64"
Duration="0:0:0.8"
AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
I'd like to change this line;
<EventTrigger RoutedEvent="Binding.TargetUpdated">
To something like this;
<EventTrigger ThisParticularPropertyHasChanged="MyProperty1">
I want to do this as I'll have several storyboards, each to be started when a particular property changes. With 1 property I've been binding it to the image's Tag property, but now that I have several to do (roughly 8) I'm not sure how to go about this.
The class implement INotifyPropertyChanged.
thanks.
SOLUTION, thanks to sa_ddam213;
<Style x:Key="PersonImageStyle" TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding UI_DirectionOfMovement}" Value="South">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" By="64" Duration="0:0:0.8" AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding UI_DirectionOfMovement}" Value="East">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" By="64" Duration="0:0:0.8" AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
I have a usercontrol that when I double click on it, I want it to zoom in, if it's not already. If it is, then the double click will zoom out on it. I can get it to work with code behind, but I can't get it to work in xaml.
Here is the code behind that handle's the double click event.
void MyObjectMouseDoubleClick(object sender, MouseButtonEventArgs e)
{
if (IsZoomedIn)
{
IsZoomedIn = false;
//ZoomOutAnimation();
}
else
{
IsZoomedIn = true;
//ZoomInAnimation();
}
}
then in my xaml:
<UserControl.RenderTransform>
<TransformGroup>
<RotateTransform />
<ScaleTransform />
<TranslateTransform />
</TransformGroup>
</UserControl.RenderTransform>
<UserControl.Style>
<Style>
<Style.Triggers>
<Trigger Property="local:MyObject.IsZoomedIn" Value="False">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UserControl.
RenderTransform).(TransformGroup.Children)[1].
(ScaleTransform.ScaleX)" To="1" Duration="0:0:.3" />
<DoubleAnimation Storyboard.TargetProperty="(UserControl.
RenderTransform).(TransformGroup.Children)[1].
(ScaleTransform.ScaleY)" To="1" Duration="0:0:.3" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="local:MyObject.IsZoomedIn" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UserControl.
RenderTransform).(TransformGroup.Children)[1].
(ScaleTransform.ScaleX)" To="2" Duration="0:0:.3" />
<DoubleAnimation Storyboard.TargetProperty="(UserControl.
RenderTransform).(TransformGroup.Children)[1].
(ScaleTransform.ScaleY)" To="2" Duration="0:0:.3" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Style>
Once it zooms in on my usercontrol, the zoom out animation doesn't work. Any help appreciated.
Thanks.
Your animations are holding the values, and so the second animation isn't appearing even though the trigger is firing. Instead of having two separate triggers, you can use the Trigger.ExitActions like you are using the EnterActions.
<Trigger Property="IsZoomedIn"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Storyboard.TargetProperty="(UserControl.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)"
To="2"
Duration="0:0:.3" />
<DoubleAnimation Storyboard.TargetProperty="(UserControl.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)"
To="2"
Duration="0:0:.3" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UserControl.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)"
To="1"
Duration="0:0:.3" />
<DoubleAnimation Storyboard.TargetProperty="(UserControl.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)"
To="1"
Duration="0:0:.3" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
This style correctly fades my toolbar in or out based on the changing of a ViewModel Property:
<Style x:Key="PageToolBarStyle" TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding PageToolBarVisible}" Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="0.0"
To="1.0"
Duration="0:0:2"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="1.0"
To="0.0"
Duration="0:0:2"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
<Trigger Property="Opacity" Value="0">
<Setter Property="Visibility" Value="Collapsed"/>
</Trigger>
</Style.Triggers>
</Style>
However, when the application loads the status of the toolbar (faded out or in) is not in sync with the value of the ViewModel property (true or false). So I want to force this style to be executed upon loading the window, what is the syntax to do this, here is pseudo code of what I want to do:
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<EventTrigger.Actions>
<!-- PSEUDO-CODE: -->
<ExecuteTriggerStyle StyleToExecute="{StaticResource PageToolBarStyle}"/>
</EventTrigger.Actions>
</EventTrigger>
</Window.Triggers>
I have a WPF Datatemplate that contains a some DataTriggers that start animating the color of a visual. How can I start the animation beginning with the actual value the color property currently has?
Since there might be another animation currently active I can not start a new one but when I remove the animation using DataTriggers ExitAction and RemoveStoryboard the position property is set back to its default value.
Instead I would like handoff one to the other.
Is this a limitation of WPF that simply can not be done?
<DataTrigger Binding="{Binding Path=State}" Value="Active">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="activeStoryboard" HandoffBehavior="SnapshotAndReplace">
<Storyboard>
<ColorAnimation To="Green" FillBehavior="HoldEnd" Duration="00:00:0.25"
Storyboard.TargetName="stateBrush"
Storyboard.TargetProperty="Color" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="activeStoryboard" />
</DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger Binding="{Binding Path=State}" Value="Error">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="errorStoryboard" HandoffBehavior="SnapshotAndReplace">
<Storyboard>
<ColorAnimation To="Red" FillBehavior="HoldEnd" Duration="00:00:0.25"
Storyboard.TargetName="stateBrush"
Storyboard.TargetProperty="Color" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="errorStoryboard" />
</DataTrigger.ExitActions>
</DataTrigger>
It should just work if you start the second animation, even if FillBehavior is set to Stop!
Check the following section on msdn: FillBehavior="Stop" and HandoffBehavior with Multiple Animations