Image size enlarge

Re: Image size enlarge

11-01-2008 5:05 AM |

Essentially what you need here is an animation to play on the image.  Since you mention "images" in the plural though I assume you want a single animation you can replay on any image.

There are two approaches to this:

1. Create the animation in xaml (using Blend) on one Image and then change the target in code.  This is easier to do but means you can only play one animation at a time.
2. Create the animation purely in code. 

Of course you can also have a combination of the two (so you could create the animation in blend, then create a copy of it in code and manipulate it)

Here's an example of the first approach.  This is the Xaml created by recording an animation in Blend against "Image1".   Notice that I have given the two DoubleAnimationUsingKeyFrames elements names (GrowImageScaleXAnimation and GrowImageScaleYAnimation) so that it is easy to change their properties in code later on:

		<Storyboard x:Name="GrowImage" AutoReverse="True">
			<DoubleAnimationUsingKeyFrames x:Name="GrowImageScaleXAnimation" BeginTime="00:00:00" Storyboard.TargetName="Image1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1.1" KeySpline="0.24,0.75,0.9,1"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames x:Name="GrowImageScaleYAnimation" BeginTime="00:00:00" Storyboard.TargetName="Image1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1.1" KeySpline="0.24,0.75,0.9,1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>

 

So if you have two images like this:

<Image x:Name="Image1" Width="100" Height="100" Source="Images/beta.jpg" MouseLeftButtonUp="Image_MouseLeftButtonUp" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Image x:Name="Image2" Width="100" Height="100" Source="Images/beta.jpg" MouseLeftButtonUp="Image_MouseLeftButtonUp"  RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>

 You can write the following code to play the animation on either one:

        private void PlayXamlImageAnimation(string ImageName)
        {
            GrowImage.Stop();
            Storyboard.SetTargetName(GrowImageScaleXAnimation, ImageName);
            Storyboard.SetTargetName(GrowImageScaleYAnimation, ImageName);
            GrowImage.Begin();
        }

.

The purely code animation requires more work to build the animation, so rather than post it all here I have uploaded a sample to my skydrive here (this includes both the Xaml approach and the code one.

http://cid-fb8b852ef1ab0b35.skydrive.live.com/self.aspx/SampleCode/SilverlightImageResize.zip