Develop Reference

correct way to animate objects in wpf and c#

I want to create a animation with WPF, but I dont know the right way. The animation should be async. The animation should be a rectangle that grows (height)
. Is a canvas object for something like that a good choose?
Maybe someone of you can give me a helpfull link. I don't want any code snippets.

Links :
Animation Overview : MSDN
Animation How-To : MSDN
In your case, problem is "Height grows downward or both up/down (50%) each". To make Rectangle grow only upwards poses few small challenges.
How to animate an attached property like Canvas.Top. ( Approach 1)
How to animate a Scale Transform. ( Approach 2 )
Animating Attached-Property
Animating Transforms
I am posting a working code using Canvas (Approach 1).
<Canvas Margin="482,125,206,10" Background="MediumSeaGreen">
<Rectangle x:Name="Rect" Fill="#FF030315" Height="100" Stroke="Black" Width="42" Canvas.Top="222">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard x:Name="Sb">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="Rect" By="-100" Duration="0:0:5"/>
<DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="Rect" By="100" Duration="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<PauseStoryboard BeginStoryboardName="Sb" />
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>

WPF: Deactivating the button animations

I'm designing an UI atm and have the problem that the button animations don't fit the style of my Program and I would rather just change the colour.
My problem is: I just cant find a way do deactivate the animation that appears when you hover about or click a button :(
Is it even possible ?

Here is an image animation which is similar to an Button.
<Image Width="20" Height="20" Source="image\close.png"
ToolTip="close"
Opacity="0.5" Canvas.Left="720" Canvas.Top="3"
MouseLeftButtonDown="Close_MouseLeftButtonDown">
<Image.RenderTransform>
<RotateTransform x:Name="imgTransform"
CenterX="10"
CenterY="10"
Angle="0"/>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard HandoffBehavior="Compose" >
<Storyboard Name="myStoryBoard" >
<DoubleAnimation
Storyboard.TargetName="imgTransform"
Storyboard.TargetProperty="Angle"
By="90" Duration="0:0:.2"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image>
image\close.png is my image and you can change into yours.
As you can test,it has a duration and will stop automatically.However you can get StoryBoard Object by its Name property in C# code and call Stop method on it.

Move&Zoom Image

I have a pretty simple requirement (I thought), a window that shows an image at a certain start point & size and moves/zooms it to a certain end point and size. This is not the typical Image Viewer requirement for pan&zoom. More like a sprite animation.
I tried out a couple of ways, e.g. a ThicknessAnimation to alter the Margin to move the image, but the performance was just not good enough. I have to admit I don't have much experience with WPF, though.
Below is my last version which is ok performance-wise. The image element goes over the whole window and the size and position are set by ScaleTransform and TranslateTransform. It works well (and shows relatively smooth movement) if the end position is on the lower right of the start position, e.g. from 0,0 to 800,600. If it's the other way around, though, the image makes kind of a slingshot movement to the lower right corner of the window, leaves the window and then finally comes back to stop at its end position.
I would appreciate an explanation for this behavior as well as a solution. And if you know a different way that works and is similar or better performance-wise, I'd like to hear that too.
<Window x:Class="ViewBoxText.AnimatedImageWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="AnimatedImageWindow"
WindowStyle="None"
SizeToContent="WidthAndHeight"
AllowsTransparency="True"
ShowInTaskbar="False"
Left="0"
Top="0"
Height="{Binding TotalHeight}"
Width="{Binding TotalWidth}"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid>
<Image x:Name="image" HorizontalAlignment="Left" VerticalAlignment="Top" Width="{Binding TotalWidth}" Height="{Binding TotalHeight}" Stretch="Uniform">
<Image.RenderTransform>
<TransformGroup>
<TranslateTransform X="{Binding HorizontalStart}" Y="{Binding VerticalStart}" />
<ScaleTransform />
</TransformGroup>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard Completed="OnStoryBoardCompleted">
<DoubleAnimation Storyboard.TargetName="image"
Storyboard.TargetProperty="(Image.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)"
From="{Binding ScaleStart}" To="{Binding ScaleEnd}" DesiredFrameRate="30"
Duration="0:0:2" BeginTime="0:0:0" />
<DoubleAnimation Storyboard.TargetName="image"
Storyboard.TargetProperty="(Image.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)"
From="{Binding ScaleStart}" To="{Binding ScaleEnd}" DesiredFrameRate="30"
Duration="0:0:2" BeginTime="0:0:0" />
<DoubleAnimation Storyboard.TargetName="image"
Storyboard.TargetProperty="(Image.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)"
By="{Binding HorizontalOffset}"
Duration="0:0:2" BeginTime="0:0:0" />
<DoubleAnimation Storyboard.TargetName="image"
Storyboard.TargetProperty="(Image.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)"
From="{Binding VerticalStart}" To="{Binding VerticalEnd}"
Duration="0:0:2" BeginTime="0:0:0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</Grid>

The problem is the scale is scaling about 0,0. I believe you want to scale about the point you are interested in, which may or may not be you Vertical/Horizontal end point.
Normally, you would translate so that the centre is on the origin, scale, then put the whole thing back.
e.g. to scale by X about point A,B
Translate -A,-B
Scale X
Translate A,B
Fortunately the scale has a couple of centre properties that make this easier.
So try adjusting the CenterX and CenterY properties of the ScaleTransform.

How to start a storyboard which is attached to a control inside a data template?

I have a storyboard inside a data template. I want to start this only for a certain condition. In my case whenever the no. of seconds in the clock is 59 the storyboard should start.
Below you can see the storyboard as well as the control to which the animation is applied :
<!-- Minute Hand -->
<Image
Source="{Binding Time, Converter={StaticResource MinHandBackground}}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Canvas.Left="118"
Canvas.Top="118">
<Image.RenderTransform>
<TransformGroup>
<TranslateTransform
X="-11"
Y="-90" />
<RotateTransform
x:Name="minHandTransform" />
</TransformGroup>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger
RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard
x:Name="myStoryboard2">
<DoubleAnimation
x:Name="minuteAnimation"
Storyboard.TargetName="minHandTransform"
Storyboard.TargetProperty="Angle"
Duration="0:0:1"
From="{Binding Time, Converter={StaticResource minuteHandTransform}}"
To="{Binding Time, Converter={StaticResource minuteHandToTransform}}"
RepeatBehavior="1x">
<DoubleAnimation.EasingFunction>
<SineEase
EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
Currently the BeginStoryboard starts it immediately on load. I want to start it when the number of seconds is 59 but i cant access the storyboard in the back end as the control is within a data template.
Can anyone please help me out here.....i have been banging my head about this problem for a lot of days now!!

The easiest way would be to move the entire contents of the DataTemplate to a separate UserControl so you would get easier access to all named elements.

How to enlarge a picture in WPF?

I have to enlarge a single picture in WPF. The problem is that after the operation the picture is shown only a part.
And I have to make it enlarged gradually. How can I do it?

I think that you modified image stretch property to none.
Set Height and Width attributes:
<Image
Height="165"
HorizontalAlignment="Left"
Name="image1" Stretch="Fill"
VerticalAlignment="Top"
Width="339"
Source="[your source]" />
In [your source] you will put your image's source.

If your image element is showing only part of the picture, you can change the Stretch property to either Uniform, which preserves the aspect ratio, or Fill, which does not.
You can use a ScaleTransform for the RenderTransform property to enlarge the picture without affecting the layout of your application or a ScaleTransform for the LayoutTransform property to enlarge the picture so your layout is affected. ScaleTransform provides two important properties, ScaleX and ScaleY, which affect how the image is resized in its X and Y axes, respectively. To apply this effect gradually, you must use a DoubleAnimation. You don't specify when you want to trigger the enlargement, so for the purpose of example, I'll assume you want the image to be enlarged when the user mouses over the image. The provided code also gradually decreases the image size when the user mouses out of the image. To change when the increase and decrease of size occurs, change the RoutedEvent property of the two EventTriggers.
<Image Stretch="Uniform" Source="Penguins.jpg">
<Image.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1" x:Name="scale" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="ScaleX"
Storyboard.TargetName="scale" To="1.5"
Duration="0:0:1" />
<DoubleAnimation Storyboard.TargetProperty="ScaleY"
Storyboard.TargetName="scale" To="1.5"
Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="ScaleX"
Storyboard.TargetName="scale" To="1"
Duration="0:0:1" />
<DoubleAnimation Storyboard.TargetProperty="ScaleY"
Storyboard.TargetName="scale" To="1"
Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>