u2envy1
asked on
Silverlight Animation
Im creating a header for a website in silverlight.
The header will take an image slide the image across the header & fade out.
When the image reaches the other side of the header the image must change.
The animation is working but the image does not want to change.
What am i doing wrong ?
xaml attached
The header will take an image slide the image across the header & fade out.
When the image reaches the other side of the header the image must change.
The animation is working but the image does not want to change.
What am i doing wrong ?
xaml attached
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="HeatAndHomeHeader.Page"
Width="640" Height="239">
<UserControl.Resources>
<Storyboard x:Name="ImageMove">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="119"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="83"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="-22"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-98"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="-234"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.7000000" Value="-329"/>
<SplineDoubleKeyFrame KeyTime="00:00:02.1000000" Value="-367"/>
<SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="-383"/>
<SplineDoubleKeyFrame KeyTime="00:00:02.9000000" Value="-326"/>
<SplineDoubleKeyFrame KeyTime="00:00:03.3000000" Value="-279"/>
<SplineDoubleKeyFrame KeyTime="00:00:03.6000000" Value="-221"/>
<SplineDoubleKeyFrame KeyTime="00:00:03.9000000" Value="-148"/>
<SplineDoubleKeyFrame KeyTime="00:00:04.3000000" Value="-48"/>
<SplineDoubleKeyFrame KeyTime="00:00:04.6000000" Value="125"/>
<SplineDoubleKeyFrame KeyTime="00:00:05" Value="163"/>
<SplineDoubleKeyFrame KeyTime="00:00:05.3000000" Value="190"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.485"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.59"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0.695"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0.795"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.4000000" Value="0.895"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.7000000" Value="0.985"/>
<SplineDoubleKeyFrame KeyTime="00:00:02.1000000" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="0.1"/>
<SplineDoubleKeyFrame KeyTime="00:00:02.9000000" Value="0.17"/>
<SplineDoubleKeyFrame KeyTime="00:00:03.3000000" Value="0.395"/>
<SplineDoubleKeyFrame KeyTime="00:00:03.6000000" Value="0.575"/>
<SplineDoubleKeyFrame KeyTime="00:00:03.9000000" Value="0.715"/>
<SplineDoubleKeyFrame KeyTime="00:00:04.3000000" Value="0.895"/>
<SplineDoubleKeyFrame KeyTime="00:00:04.6000000" Value="0.705"/>
<SplineDoubleKeyFrame KeyTime="00:00:05" Value="0.53"/>
<SplineDoubleKeyFrame KeyTime="00:00:05.3000000" Value="0.135"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Image HorizontalAlignment="Right" Margin="0,0,8,8" Width="249" Source="Images/underfloor-heating.jpg" Stretch="UniformToFill" RenderTransformOrigin="0.5,0.5" Opacity="0.185" x:Name="image">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform X="257"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Grid>
</UserControl>
How are you going about changing the image?
ASKER
While the storyboard is recording I selected the new image to the image control.
What is the options in changing the image ?
What is the options in changing the image ?
If you can't get it to work the way you are attempting. Have both or all of your images as seperate images in the animation. when you reach the desired frame, you can then fade your images in and out, you can even get a better morphing effect this way.
After reading your 2nd post, I don't think you can do what you are trying to do in a storyboard. I would just have both images ready with ones opacity set to 0
After reading your 2nd post, I don't think you can do what you are trying to do in a storyboard. I would just have both images ready with ones opacity set to 0
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Any code example for the 2nd option ?
2) In code behind, add code that fires when the proper storyboard completes that changes the image source.
If I would want to use this control in my asp.net app. Must I create the control as a silverlight project in expression blend or silverlight project in visual studio ?
For using the control in asp.net I just want to add a reference to the control & use it.
Is that possible ?
2) In code behind, add code that fires when the proper storyboard completes that changes the image source.
If I would want to use this control in my asp.net app. Must I create the control as a silverlight project in expression blend or silverlight project in visual studio ?
For using the control in asp.net I just want to add a reference to the control & use it.
Is that possible ?