Anmiated thumbnail to fullsize image view

2 posts, 0 answers
  1. invDev
    invDev avatar
    22 posts
    Member since:
    Dec 2009

    Posted 22 Jul 2011 Link to this post

    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.
  2.
  3. Michał
    Michał avatar
    6 posts
    Member since:
    Apr 2009

    Posted 24 Jul 2011 Link to this post

    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
Back to Top