I have a series of triggers for controlling a bar that is supposed to move up and down. Each time it is given one of these randomly selected values, it slides into the appropriate position:
<Trigger Property="Content" Value="B000">
<Trigger.EnterActions>
<BeginStoryboard Name="B000" HandoffBehavior="SnapshotAndReplace">
<Storyboard FillBehavior="HoldEnd" Duration="0:0:1">
<DoubleAnimation Storyboard.TargetName="bar1" Storyboard.TargetProperty="Offset" To="0" Duration="0:0:1" BeginTime="0:0:0" />
<DoubleAnimation Storyboard.TargetName="bar2" Storyboard.TargetProperty="Offset" To="0" Duration="0:0:1" BeginTime="0:0:0" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="Content" Value="B125">
<Trigger.EnterActions>
<BeginStoryboard Name="B125" HandoffBehavior="SnapshotAndReplace">
<Storyboard FillBehavior="HoldEnd" Duration="0:0:1">
<DoubleAnimation Storyboard.TargetName="bar1" Storyboard.TargetProperty="Offset" To=".125" Duration="0:0:1" BeginTime="0:0:0" />
<DoubleAnimation Storyboard.TargetName="bar2" Storyboard.TargetProperty="Offset" To=".125" Duration="0:0:1" BeginTime="0:0:0" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="Content" Value="B250">
<Trigger.EnterActions>
<BeginStoryboard Name="B250" HandoffBehavior="SnapshotAndReplace">
<Storyboard FillBehavior="HoldEnd" Duration="0:0:1">
<DoubleAnimation Storyboard.TargetName="bar1" Storyboard.TargetProperty="Offset" To=".25" Duration="0:0:1" BeginTime="0:0:0" />
<DoubleAnimation Storyboard.TargetName="bar2" Storyboard.TargetProperty="Offset" To=".25" Duration="0:0:1" BeginTime="0:0:0" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="Content" Value="B500">
<Trigger.EnterActions>
<BeginStoryboard Name="B500" HandoffBehavior="SnapshotAndReplace">
<Storyboard FillBehavior="HoldEnd" Duration="0:0:1">
<DoubleAnimation Storyboard.TargetName="bar1" Storyboard.TargetProperty="Offset" To=".5" Duration="0:0:1" BeginTime="0:0:0" />
<DoubleAnimation Storyboard.TargetName="bar2" Storyboard.TargetProperty="Offset" To=".5" Duration="0:0:1" BeginTime="0:0:0" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="Content" Value="B750">
<Trigger.EnterActions>
<BeginStoryboard Name="B750" HandoffBehavior="SnapshotAndReplace">
<Storyboard FillBehavior="HoldEnd" Duration="0:0:1">
<DoubleAnimation Storyboard.TargetName="bar1" Storyboard.TargetProperty="Offset" To=".75" Duration="0:0:1" BeginTime="0:0:0" />
<DoubleAnimation Storyboard.TargetName="bar2" Storyboard.TargetProperty="Offset" To=".75" Duration="0:0:1" BeginTime="0:0:0" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="Content" Value="B1k0">
<Trigger.EnterActions>
<BeginStoryboard Name="B1k0" HandoffBehavior="SnapshotAndReplace">
<Storyboard FillBehavior="HoldEnd" Duration="0:0:1">
<DoubleAnimation Storyboard.TargetName="bar1" Storyboard.TargetProperty="Offset" To="1" Duration="0:0:1" BeginTime="0:0:0" />
<DoubleAnimation Storyboard.TargetName="bar2" Storyboard.TargetProperty="Offset" To="1" Duration="0:0:1" BeginTime="0:0:0" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
But for some reason, it only ever moves up. The parts where it's supposed to move down again, it just sits there. Stopping the animation between changes only causes it to begin again from the bottom, and that's not what I want.
I am not sure what you mean with going down lol but every animation/trigger has EnterAction and ExitAction.
To me it sounds like you are seeking for ExitAction which will allow you to move that thingy back to its start position. :)
Take a look at this link:
http://msdn.microsoft.com/en-us/library/system.windows.triggerbase.exitactions%28v=vs.110%29.aspx
Here is an example :
<Style x:Key="PropertyTriggerExampleButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Opacity" Value="0.25" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="1" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="0.25" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
Edit:
Then you need to have multiple DoubleAnimations like this:
<BeginStoryboard>
<Storyboard>
<DoubleAnimation .... />
<DoubleAnimation ... />
<DoubleAnimation ... />
<DoubleAnimation ... />
</Storyboard>
</BeginStoryboard>
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>
How do I set the Background after a Storyboard ColorAnimation completes in XAML?
My ColorAnimation runs which makes Background flash red but after it returns to the original background colour (white) I would like it to remind red but i can't see how to do this.
My xaml is below - thanks
<Grid Name="cell" Background="White">
<Grid.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding DataItem.ControlValue, Converter={StaticResource IsNotNullOrEmptyConverter}}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="Blink" >
<ColorAnimation Storyboard.TargetProperty="Background.Color" To="Red"
RepeatBehavior="3x" Duration="0:0:1" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="Blink" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
Set AutoReverse to False on your ColorAnimation if you don't want it to revert back to original value i.e White.
<ColorAnimation Storyboard.TargetProperty="Background.Color" To="Red"
RepeatBehavior="3x" Duration="0:0:1" AutoReverse="False"/>
UPDATE
Add another ColorAnimation in your Storyboard which will begin after your first ColorAnimation completes may be after 4 sec interval.
<BeginStoryboard>
<Storyboard x:Name="Blink">
<ColorAnimation Storyboard.TargetProperty="Background.Color" To="Red"
RepeatBehavior="3x" Duration="0:0:1" AutoReverse="True"/>
<ColorAnimation Storyboard.TargetProperty="Background.Color" To="Red"
Duration="0:0:1" BeginTime="0:0:4"/>
</Storyboard>
</BeginStoryboard>
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>