Here's my XAML, so far when someone enter any image in my Window, the animation pops up correctly.
<Style.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.25" From="1" To="1.2" AutoReverse="True"
Storyboard.TargetProperty="RenderTransform.ScaleX"/>
<DoubleAnimation Duration="0:0:0.1" From="1" To="1.2" AutoReverse="True"
Storyboard.TargetProperty="RenderTransform.ScaleY"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
Now I'd like to create another storyboard, one that fires on Image.MouseDown, however this time the animation should change the margin of a Grid called x:Name="container".
Can I access other controls properties inside a trigger? If so, how?
I can think of 2 options here:
Create an EventTrigger for your Grid and set its SourceName property to Image name that fires MouseDown or it`s parent;
Add another EventTrigger directly to the Image and set Storyboard.TargetName for animation to Grid`s name.
Related
I have a ToggleButton which, when clicked, slides out so the user can verify/edit the URL (textbox in button) they have copied (clipboard). The ToggleButton is then clicked again, which sets in motion various URL checks and slides back in to its original start position. This works perfectly. (code below).
What I would really like to do a this point is to disable this trigger. I want the button to not 'slide out', because on the next click it will download. So I'm trying to find a way to disable the trigger. When the file has downloaded all OK I'll re-enable the trigger to a state it was initially.
The togglebutton style starts like this (in my Application.xaml:
<Style x:Key="ToggleButtonURL" TargetType="{x:Type ToggleButton}">
It sets various colour/font properties and the triggers of interest:
<Style.Triggers>
<EventTrigger RoutedEvent="Checked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="-554" To="0" Duration="0:0:0.2" Storyboard.TargetProperty="(Canvas.Left)" AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Unchecked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="-554" Duration="0:0:0.150" Storyboard.TargetProperty="(Canvas.Left)" AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
I'm just trying to find a way the enable/disable this trigger from code. Thank you if you can be of any help.
Try setting the e.Handled = true of your event argument only on the condition when you don't want the animation to run. If that is still beating you with the quick in-out movement then use a PreviewEvent instead of a direct event.
I am looking a way to animate the resizing of a window, lets say that I have a window with Height=300 and Width=300, I have 2 buttons, when I click the first button the window size must change to Height=600 and Width=600 and when I click the other button the window size must back to the original size, well I can do this simply changing the Height and Width properties, but I would like to use something like Storyboard - DoubleAnimation to give the impression that the window size is changing gradually.
I haven't used Storyboard - DoubleAnimation so if anyone can give me some tips I would appreciate it.
You cannot animate two properties in parallel Below code can help you animate the Height and Width of Window named myWindow
<Button Content="Click">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard >
<Storyboard RepeatBehavior="Forever" AutoReverse="False">
<DoubleAnimation Storyboard.TargetName="myWindow"
Storyboard.TargetProperty = "(Window.Height)"
To="300" Duration="0:0:5"/>
<Storyboard RepeatBehavior="Forever" AutoReverse="False">
<DoubleAnimation Storyboard.TargetName="myWindow"
Storyboard.TargetProperty = "(Window.Width)"
To="300" Duration="0:0:5"/>
</Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
I want to achieve in XAML using event triggers where button's style (button and text gets bigger) change when mouse enter is triggered. Then when the mouse leave event is triggered, it will get back to it's previous style.
I have already worked out on that but my problem is when a button is clicked, the style for the mouse enter must be preserved unless other button is clicked.
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleX"
To="2" Duration="0:0:0.25"/>
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY"
To="2" Duration="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleX"
To="1" Duration="0:0:0.25"/>
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY"
To="1" Duration="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
Any help is appreciated. Thanks!
First of all, thank you for all you comments. They were great and correct but I have to find a way to implement it using the standard buttons (not radio or toggle).
I was able to figure this one out. So, I thought of extending the Control button to add something like a flag to determine if the button has been clicked then handled the OnMouseLeave event.
I'm triying to hide/show a stackpanel when I click in a button. This is what I made so far:
<Button.Triggers>
<EventTrigger RoutedEvent="Mouse.PreviewMouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height"
Storyboard.TargetName="PanelDeCampos"
From="{Binding ElementName=PanelDeCampos,Path=ActualHeight}"
To="0"
Duration="0:0:0.25" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
This animation works well, and it hides the panel when I click on it. But now I need to find a way to launch the reverse animation when the button is clicked again. Could I store the current state and decide what animation launch or something like this?
Thanks.
You can change your button to a ToggleButton and use the Checked and Unchecked routed events to set up your 2 storyboards:
<ToggleButton>
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="Checked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height"
Storyboard.TargetName="PanelDeCampos"
From="{Binding ElementName=PanelDeCampos,Path=ActualHeight}"
To="0"
Duration="0:0:0.25" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Unchecked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height"
Storyboard.TargetName="PanelDeCampos"
From="0"
Duration="0:0:0.25"
To="1000" /> <!-- or whatever height you want-->
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
What about a little trick:
Together with the storyboard you have in place now, you are hidding the current button and setting another button (which looks the same) visible.
The other button has the reverse storyboard, and reverse button visibility settings.
With that you don't have to worry about a state, and you can do it only in XAML.
Other Idea would be to handle the click in the code behind, maintain a flag there, and trigger the storyboard from the code. As this is a view-only functionality I don't see a conflict with MVVM.
I have a WPF usercontrol set up in XAML with the following Triggers:
<UserControl.Triggers>
<EventTrigger RoutedEvent="GotFocus">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1.5" Storyboard.TargetName="ImageContent" Storyboard.TargetProperty="RenderTransform.Children[1].ScaleX" Duration="0:0:0.8" />
<DoubleAnimation To="1.5" Storyboard.TargetName="ImageContent" Storyboard.TargetProperty="RenderTransform.Children[1].ScaleY" Duration="0:0:0.8" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="LostFocus">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1" Storyboard.TargetName="ImageContent" Storyboard.TargetProperty="RenderTransform.Children[1].ScaleX" Duration="0:0:0.8" />
<DoubleAnimation To="1" Storyboard.TargetName="ImageContent" Storyboard.TargetProperty="RenderTransform.Children[1].ScaleY" Duration="0:0:0.8" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</UserControl.Triggers>
The Animation is working fine but unfortunately the Triggers arent working as expected. The GotFocus trigger only fires if i Right-Click my Control or if i Click a Button that is contained within the UserControl.
I have created an EventHandler for the GotFocus event in code and that seems to fire in the right places.
Edit: If I change it to Fire on MouseEnter / Leave it also works as expected
Edit2: I foudn out that this behaviour is surfacing because the Control gets focus, but loses the focus again right away. I fixed it by adding some code, that checks if the source of the Event is the UserControl or something else.
Any hints on why this is happening would be appreciated.
Try settings Focusable="True" on the UserControl.