I currently have
<ContentControl
Grid.Column="2" Grid.Row="3"
>
<ContentControl.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseEnter">
<BeginStoryboard
Storyboard="{StaticResource ShakeStatorMinorRadiusEdit}"/>
</EventTrigger>
</ContentControl.Triggers>
... <snip> ...
</ContentControl>
and
<Grid.Resources>
<Storyboard x:Key="ShakeStatorMinorRadiusEdit">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="StatorMinorRadiusEdit"
Storyboard.TargetProperty="RenderTransform.X"
RepeatBehavior="5x"
>
<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="3"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.20" Value="-3"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
The idea is that when the mouse enters the yellow highlighted control on the left the yellow highlighted control on the right will shake. The control on the right has the x:Name=StatorMinorRadiusEdit
So far so good the above works.
Now I want to add another complication. I only want the animation to trigger if a value on my view model RotorLobes == 1. In an imaginary world I would do.
<ContentControl
Grid.Column="2" Grid.Row="3"
>
<ContentControl.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseEnter">
<If Property="{Binding RotorLobes}" Value="1"/>
<BeginStoryboard
Storyboard="{StaticResource ShakeStatorMinorRadiusEdit}"/>
</EventTrigger>
</ContentControl.Triggers>
... <snip> ...
</ContentControl>
In the real world I have no idea how to achieve this.
An event trigger performs some actions when a specific event is fired. It is usually used to accomplish some animation on control such DoubleAnumatio, ColorAnimation, etc. In the following example, we will create a simple button. When the click event is fired, it will expand the button width and height.
Basically, there are 3 types of triggers, they are: Property Trigger. Data Trigger. Event Trigger.
You could try changing from an EventTrigger to a MultiTrigger and using the IsMouseOver property rather than the MouseEnter event. However, as you discovered, Storyboards in styles do not allow you to specify a TargetName, so it's important to move the triggers to the target object.
The example below hard-codes the value of Rotor to 1 and you'll need to correctly namespace the RenderTransform in the TargetProperty or you'll get a runtime exception.
<Grid>
<Grid.Resources>
<Storyboard x:Key="ShakeStatorMinorRadiusEdit">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"
RepeatBehavior="5x">
<EasingDoubleKeyFrame KeyTime="0:0:0.05"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.1"
Value="3" />
<EasingDoubleKeyFrame KeyTime="0:0:0.15"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.20"
Value="-3" />
<EasingDoubleKeyFrame KeyTime="0:0:0.25"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="1">Rotor</TextBlock>
<TextBlock Grid.Column="2">Stator</TextBlock>
<TextBlock Grid.Column="0"
Grid.Row="1">Lobes</TextBlock>
<TextBlock Grid.Column="0"
Grid.Row="2">Major Radius</TextBlock>
<TextBlock Grid.Column="0"
Grid.Row="3">Minor Radius</TextBlock>
<TextBox Name="RotorLobes"
Grid.Column="1"
Grid.Row="1"
Text="1" />
<TextBox Grid.Column="1"
Grid.Row="2" />
<TextBox Name="MinorRadiusRotor"
Background="Blue"
Grid.Column="1"
Grid.Row="3" />
<TextBox Grid.Column="2"
Grid.Row="1" />
<TextBox Grid.Column="2"
Grid.Row="2" />
<TextBox Name="MinorRadiusStator"
Background="Green"
Grid.Column="2"
Grid.Row="3">
<TextBox.Style>
<Style>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ElementName=MinorRadiusRotor, Path=IsMouseOver}"
Value="True" />
<Condition Binding="{Binding ElementName=RotorLobes, Path=Text}}"
Value="1" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ShakeStatorMinorRadiusEdit}" />
</MultiDataTrigger.EnterActions>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</Grid>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With