I am trying to learn about Storyboards and animation in WPF. I have a very simple question which I cannot seem to answer.
I have a rectangle that is placed in a grid. I am trying to move the rectangle from one side of the grid to the other side. I can get the rectangle to move successfully. However the issue is that I'm specifying the From & To values. So in my code below I have hard coded the from (50) & to (300) values. What I want to happen is for the rectangle to go to the other side of the grid without me hard coding a value. Because if a user resizes the window the values I put in will be a waste of time.
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width"
From="50"
To="300"
Duration="0:0:5"/>
<ColorAnimation
Storyboard.TargetProperty="Fill.Color"
To="Yellow"
BeginTime="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
Instead of using the Width property, you could use ScaleTransform of RenderTransform. This will let you scale according to the parent element and not the width itself. See the example underneath and see if it works...
<Rectangle Height="70" Fill="Green">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.2"/>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
From="0.2"
To="1"
Duration="0:0:5"/>
<ColorAnimation
Storyboard.TargetProperty="Fill.Color"
To="Yellow"
BeginTime="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
When animating sizes/locations with Storyboards, always use the ActualWidth and/or Actualheight properties instead of the usual Width and Height properties because the Width and Height properties can often have NaN (Not a number) values which will blow up when the Storyboard tries to access it/them.
For this animation, you'll need to declare the Name property of the parent element because we'll reference it in the Storyboard. Try this and let me know how you get on:
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" From="50"
To="{Binding ActualWidth, ElementName=ParentContainer}" Duration="0:0:5"/>
<ColorAnimation Storyboard.TargetProperty="Fill.Color" To="Yellow"
BeginTime="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
Related
WPF EventTriggers.EnterActions not working.
Ust two similar Storyboard in Trigger.Actions - work, but in Trigger.EnterActions - no.
Trigger on checkbox 2 works, but trigger on checkbox 1 not firing.
WPF EventTriggers.EnterActions not working.
Ust two similar Storyboard in Trigger.Actions - work, but in Trigger.EnterActions - no.
<StackPanel>
<CheckBox Content="checkbox 1">
<CheckBox.Triggers>
<EventTrigger RoutedEvent="CheckBox.Checked">
<EventTrigger.EnterActions>
<BeginStoryboard Name="enter">
<Storyboard>
<DoubleAnimation From="1"
To="0.5"
Duration="0:0:1"
Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.EnterActions>
<EventTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="enter"/>
</EventTrigger.ExitActions>
</EventTrigger>
</CheckBox.Triggers>
</CheckBox>
<CheckBox Content="checkbox 2">
<CheckBox.Triggers>
<EventTrigger RoutedEvent="CheckBox.Checked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard >
<DoubleAnimation From="1"
To="0.5"
Duration="0:0:1"
Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</CheckBox.Triggers>
</CheckBox>
</StackPanel>
WPF EventTriggers.EnterActions not working. Ust two similar Storyboard in Trigger.Actions - work, but in Trigger.EnterActions - no.
See documentation TriggerBase.EnterActions:
Gets a collection of TriggerAction objects to apply when the trigger object becomes active. This property does not apply to the EventTrigger class.
I want to rotate my 3D through xaml having this code
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
From="0" To="360" Duration="00:00:10"
Storyboard.TargetName="angle"
Storyboard.TargetProperty="Angle"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
but when I try to run the code my project stops running giving me this error:
How can I add "angle" to my class XplorerMainWindow()?
and where should I put it.
In the constructor, Somewhere in the class, in the function where I Open the file, or I have to create a new function?
This is the "angle"
<Model3DGroup.Transform>
<RotateTransform3D CenterX= "0" CenterY = "0" CenterZ="0">
<RotateTranform3D.Rotation>
<AxisAngleRotation3D x:Name="angle" Axis="-1, -1, -1" Angle="70"/>
</RotateTransform3D.Rotation>
</RotationTransform3D>
</Model3DGroup.Transform>
and for your help I got this code from here this ebook that I have downloaded.
It is on page 87 of the pdf and page 1099 of the book
https://drive.google.com/file/d/0B3NndckqBKkBbTJVZW9tRXZmeTA/view?usp=sharing
In a given xaml, there is a part:
<ColorAnimation Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" To="Black" Duration="0:0:3"/>
If I specify only "Background", then it doesn't work. Why? Where can I get some info about making path?
P.S.: I seen some really crazy path, like "(blablabla).(blablabla).(blablabla.blablabla)" and it makes me nervous, because I can't find what does it means easily...
It doesn't work if you only specify Background because the storyboard animates a color, and this color is the Color property of the Background property.
Background is a brush, so it could contain any type of brush. In order to access the Color the brush needs to be converted to a SolidColorBrush.
This is basically what the expression Background.(SolidColorBrush.Color) does. It converts Background to a SolidColorBrush and then accesses the Color property from it.
In c# code you would write
((SolidColorBrush)Background).Color = someColor;
Try this
Example1
<Button>
<Button.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.Color" From="Transparent" To="Red" Duration="0:0:0.1"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
example2
<Grid>
<Button x:Name="Button"></Button>
<Grid.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Button" Storyboard.TargetProperty="Background.Color" From="Transparent" To="Green" Duration="0:0:0.1"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>
I'm currently trying to make buttons on my forms animate using WPF - this is part of a University course, so it's all about demonstrating knowledge rather than looking good.
We've been shown how to animate per-button, but since I want the animation to be the same on every button I'm using a style - something we've not been taught and which finding documentation for is like finding evidence of Big Foot, IMO.
My code so far is this:
<Style TargetType="{x:Type Button}" x:Key="ButtonAnimation">
<Style.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Angle"
To="360" Duration="0:0:1"
FillBehavior="Stop" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="ScaleY"
To="0.1" Duration="0:0:0.5"
FillBehavior="Stop" AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="ScaleX"
To="0.1" Duration="0:0:0.5"
FillBehavior="Stop" AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
The TargetProperty="" values are incorrect, and for the life of me I cannot find anywhere online that demonstrates what should be there. The values currently there are what you would have if the animation was applied to each button rather than in a style.
How do I get this to work? What is the correct TargetProperty?
I think this...
Storyboard.TargetProperty="Angle"
...should be...
Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)"
And the other ones:
Storyboard.TargetProperty="(Button.RenderTransform).(ScaleTransform.ScaleY)"
Storyboard.TargetProperty="(Button.RenderTransform).(ScaleTransform.ScaleX)"
You might have to replace RenderTransform with LayoutTransform, depending on what you are using in your markup.
However, this will only work if you only have one of the two Transforms, i.e. RotateTransform or ScaleTransform. If you have them in a TransformGroup, things get even more complicated. If you have defined the RotateTransform as the first child and the ScaleTransform as the second child of the TransformGroup, then this should work (not tested):
(Button.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)
(Button.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.X)
(Button.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.Y)
However, you have to be careful when changing the order of the Transforms or remove one of them because this will break your animations...
Good luck!
I can't capture/trigger OnMouseEnter or OnMouseLeave events through C# code for list items. To be clear, I don't need an OnSelectedItem event.
What I want to do is to be able to handle the OnMouseEnter and OnMouseLeave events for ListBoxItem which will start the DoubleAnimation for that ListBoxItem - I want to enlarge its font on MouseEnter and restore to original size on MouseLeave.
Any ideas? Thanks.
Something like this (as part of the ListBox's DataTemplate):
<DataTemplate.Triggers>
<EventTrigger
SourceName="BorderControl"
RoutedEvent="TextBlock.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderControl"
Storyboard.TargetProperty="Background.Color"
To="DarkRed" Duration="00:00:00.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger
SourceName="BorderControl"
RoutedEvent="TextBlock.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderControl"
Storyboard.TargetProperty="Background.Color"
To="WhiteSmoke" Duration="00:00:00.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DataTemplate.Triggers>
via http://www.dotnet-blog.com/index.php/2009/01/29/how-to-style-and-animate-a-wpf-listbox/