This is a migrated thread and some comments may be shown as answers.

Anmiated thumbnail to fullsize image view

1 Answer 47 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
invDev
Top achievements
Rank 1
invDev asked on 22 Jul 2011, 05:36 PM
Hi,
we place a thumbnail image in our App.
On mouse-over it should be scaled up 10-times to the down/left direction in a smooth animated way.
On mouse-out it should be resized back to thumbnail view.

I investigated already a lot of time in RadAnimation but I didn´t get the entry point.

Does anybody can provide some sample code that works for study?

Thx.

1 Answer, 1 is accepted

Sort by
0
Michał
Top achievements
Rank 1
answered on 24 Jul 2011, 10:50 PM
Hello,

You can do it without RadAnimation, simply by use two Storyboards. One storyboard for scaling up and one for scaling down.
<Storyboard x:Name="FullSizeStoryboard">
    <DoubleAnimation Duration="0:0:1" To="2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="image" d:IsOptimized="True"/>
    <DoubleAnimation Duration="0:0:1" To="2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="image" d:IsOptimized="True"/>
</Storyboard>
<Storyboard x:Name="ThumbnailStoryboard">
    <DoubleAnimation Duration="0:0:1" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="image"/>
    <DoubleAnimation Duration="0:0:1" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="image"/>
</Storyboard>

And on <Image> element you need to set RenderTransformOrigin="1,0" for image transformation to down/left direction. In storyboards you can set desired duration of animation and desired size after scale (attribute "To" in "FullSizeStoryboard" storyboard). Link to sample project: http://www.speedyshare.com/files/29564174/ImageScale.zip.

Regards,
Michał Zalewski
Tags
General Discussions
Asked by
invDev
Top achievements
Rank 1
Answers by
Michał
Top achievements
Rank 1
Share this question
or