Skip to main content
Home Forums Silverlight Programming Programming with .NET - General Fade and image from left to right?
4 replies. Latest Post by jeppe_r on November 8, 2009.
(0)
jeppe_r
Member
1 points
8 Posts
11-07-2009 4:11 PM |
Mjello Guys,
I think I have searched the whole internet now, and still not found my answer, so hope you guys can help me out here :)What I want is to create an animated fade from the left side to the right side of an image..
e.g. if you have an image of an arrow ---------------------------->Then you would start with -then ---------(.. and end with the whole image, end the arrow is the last thing to become visable)---------------------------->
Well, hope you'll understand what I mean..I do not have that much experince with silverlight, but do program asp.netHave visual studio pro and blend 3, so no problem there..
Hope someone can help me out, anything links, examples would be great!
Fredrik N
Participant
1062 points
216 Posts
11-07-2009 4:38 PM |
You can for example add an UIElement on top of the Image, for example a Rectangle, then use the RenderTransform's TranslateTransform to move the rectangle so the image will be display behind. You can use and animation that will target the X property, for example:
<Storyboard x:Name="moveImg"> <DoubleAnimation Storyboard.TargetName="recTransForm" Storyboard.TargetProperty="X" Duration="0:0:1" To="100"/> </Storyboard>
<Grid> <Image Width="100" Height="100"></Image> <Rectangle Fill="Black" Width="100" Height="100"> <Rectangle .RenderTransform> <TranslateTransform X="0" x:Name="recTransForm"/> </Rectangle .RenderTransform> </Rectangle> </Grid>
11-07-2009 7:57 PM |
Hmm.. well, that could be a solution.
But would you try to post the code for the whole xaml file, I doesn't seems to have success with it :/
Thanks, so far, hope you can help me a little further..
11-08-2009 3:13 AM |
Here is a full running example, it will move the rectangle to the right when the SL is started. Insead of moving an UI element you can use other kind of animation, like using the SkewTransform, it will Skew the Image, but it will make the image use an accordion kind of animation. You also have to remember, if you use my solution, the rectangle will only move out from the image, so if you have other UI element to the right of the image, the rectangle can move over them. In that case make sure the element to the right of the img it on top of the rectangle etc. I only provide you with the simples solution to give you an idea how you can do what you are asking for.
<UserControl x:Class="SilverlightApplication2.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <UserControl.Resources> <BeginStoryboard x:Name="myAnim">
<Storyboard x:Name="moveImg"> <DoubleAnimation Storyboard.TargetName="recTransForm" Storyboard.TargetProperty="X" Duration="0:0:1" To="300"/> </Storyboard> </BeginStoryboard> </UserControl.Resources> <Grid x:Name="LayoutRoot"> <Image Source="Desert.jpg" Width="300" Height="300"></Image> <Rectangle Fill="white" Width="300" Height="300"> <Rectangle.RenderTransform> <TranslateTransform X="0" x:Name="recTransForm"/> </Rectangle.RenderTransform> </Rectangle>
</Grid></UserControl>
11-08-2009 9:19 AM |
Well yeh, it works well, thanks there..The simplest way I found to make it "fade" too, was to make an gradient tranparent image file, and then use that as overlay instead of the rectangle..
Thanks once again!
Fade and image from left to right?