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>
Related
I am new to WPF. This is my code for a rectangle :
<Rectangle x:Name="rect1" Grid.Column="1" Fill="#FF505F75" HorizontalAlignment="Left" Height="50" Margin="36,171,0,0" StrokeThickness="2" VerticalAlignment="Top" Width="358" RadiusX="30" RadiusY="50">
</Rectangle>
And this is the code to animate a button's color-change on mouseOver :
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="DisabledAnimation">
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
Storyboard.TargetProperty="Color"
To="{StaticResource IsNotEnabledBackgroundColor1}"
Duration="0" />
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
Storyboard.TargetProperty="Color"
To="{StaticResource IsNotEnabledBackgroundColor2}"
Duration="0" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="EnabledAnimation">
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
Storyboard.TargetProperty="Color"
To="{StaticResource BackgroundColor1}"
Duration="0" />
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
Storyboard.TargetProperty="Color"
To="{StaticResource BackgroundColor2}"
Duration="0" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsEnabled" Value="True" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="MouseOverAnimation">
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
Storyboard.TargetProperty="Color"
To="{StaticResource MouseOverBackgroundColor1}"
Duration="0:0:0:1" />
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
Storyboard.TargetProperty="Color"
To="{StaticResource MouseOverBackgroundColor2}"
Duration="0:0:0:1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="MouseOutAnimation" FillBehavior="Stop">
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
Storyboard.TargetProperty="Color"
To="{StaticResource BackgroundColor1}"
Duration="0:0:0:1" />
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
Storyboard.TargetProperty="Color"
To="{StaticResource BackgroundColor2}"
Duration="0:0:0:1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
My question is, how can use it for the rectangle ??
Or how do i change the Fill color of a rectangle on mouse over?? Not just changing the color, but fading in the color...is it possible?
Fixed it myself :
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ParallelTimeline >
<ColorAnimation Storyboard.TargetProperty="Fill.Color" To="#FF767C84" />
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Rectangle.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ParallelTimeline >
<ColorAnimation Storyboard.TargetProperty="Fill.Color" To="#FF5C626C" />
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
Hello I am trying to make an animation on button, it does increase the width and height on IsMouseOver, However, when the IsMouseOver is false, It does not return to its Original place with an animation.
here is my .XAML
<Grid>
<Button Margin="355,0,0,0" Width="100" Height="300">
<Image Source="img/blue.jpg" />
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.550" To="320"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="120"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.550" To="300"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="100"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
You should place animation to Trigger.ExitActions like this.
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.550" To="120"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="120"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.550" To="100"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="100"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
I have an image within a button, I've wrote an animation that leads to Grow or Shrink When IsMouseOver Occurs, However I dont want the button itself Grows or Shrinks but the Image within the Button has to Grow or Shrink. Do you have any idea? I am all yours.
here is my .XAML
<Button Margin="355,0,0,0" Width="100" Height="300" Click="Button_Click_1">
<Image Source="img/blue.jpg" />
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.350" To="320"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.350" To="120"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.550" To="300"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="100"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
You can simply apply the Style to the Image instead of the Button.
<Button ...>
<Image ...>
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<!-- You get the idea -->
Note that Image does not have a Border control, therefore you can't use the BorderThickness animation on the Image, you can instead apply this animation on the Button as you were doing before.
Also, your Image will require a Height in order to animate. Otherwise, you can use the From property on the DoubleAnimation like this:
<DoubleAnimation Duration="0:0:0.350" From="300" To="320"
Storyboard.TargetProperty="Height" />
You have to give Height and Width to Image, else will get an Exception. As Mike said can't use BorderThickness.
<Button>
<Image Source="Edit.png" Height="50" Width="50">
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!--<ThicknessAnimation Duration="0:0:0.250" To="0" Storyboard.TargetProperty="BorderThickness" />-->
<DoubleAnimation Duration="0:0:0.350" To="320" Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.350" To="120" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<!--<ThicknessAnimation Duration="0:0:0.250" To="0" Storyboard.TargetProperty="BorderThickness" />-->
<DoubleAnimation Duration="0:0:0.550" To="300" Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="100" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Button>
Or you could try this
<Button Margin="355,0,0,0" Width="100" Height="300" Click="Button_Click_1">
<Border Width="50" Height="150">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.350" To="320"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.350" To="120"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.550" To="150"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="50"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Image Source="MyImage.jpg" Stretch="UniformToFill"/>
</Border>
</Button>
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>