I have animated an object along a path using blend storyline. I am animating its X coordinate of the object such that it moves in a straight line between two images. The entire placement is done on a grid where left image is bound to left margin and right image
is bound to right margin so that when window is resize the images move accordingly. PFB the code :
<UserControl.Resources><Storyboardx:Key="LineAnimation"RepeatBehavior="Forever"><DoubleAnimationUsingKeyFramesStoryboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"Storyboard.TargetName="path"><EasingDoubleKeyFrameKeyTime="0"Value="0"/><EasingDoubleKeyFrameKeyTime="0:0:4"Value="462.545"/></DoubleAnimationUsingKeyFrames></Storyboard></UserControl.Resources><GridHeight="0"Width="784.001"><Pathx:Name="path"Fill="#FFF4F4F5"HorizontalAlignment="Left"Height="15.073"Stroke="Black"VerticalAlignment="Top"Data="M0.55429077,0.50088078 C0.56195831,0.50516075 0.56729126,0.523664 0.56729126,0.52366364 29.662338,1.36954 29.320824,1.031827 29.320824,1.0318269 29.320618,14.573003 29.320824,14.573003 29.320824,14.573003 1.0815125,13.726863 1.0815125,13.726863 1.0815125,13.726862 0.33274078,1.1378824 0.50061798,0.47091863 0.55429077,0.50088078 z M35.375294,0.5008778 C35.382957,0.50515866 35.388294,0.52366197 35.388294,0.52366215 64.483337,1.3695344 64.141821,1.0318248 64.141821,1.0318255 64.141616,14.573002 64.141821,14.573002 64.141821,14.573003 35.902512,13.726866 35.902512,13.726866 35.902512,13.726865 35.153748,1.1378781 35.321621,0.47091594 35.375294,0.5008778 z M70.196289,0.50087637 C70.203955,0.50515676 70.209291,0.52366006 70.209291,0.52366072 99.304325,1.3695328 98.962814,1.031823 98.962814,1.0318225 98.962606,14.572999 98.962814,14.572999 98.962814,14.572999 70.723519,13.726864 70.723519,13.726864 70.723518,13.726864 69.974748,1.1378755 70.142621,0.47091386 70.196289,0.50087637 z"Stretch="Fill"Width="99.463"RenderTransformOrigin="0.5,0.5"Margin="92.585,84.488,0,-99.561"><Path.LayoutTransform><TransformGroup><ScaleTransform/><SkewTransform/><RotateTransform/><TranslateTransform/></TransformGroup></Path.LayoutTransform><Path.OpacityMask><LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0"><GradientStopColor="Black"Offset="0"/><GradientStopColor="White"Offset="1"/></LinearGradientBrush></Path.OpacityMask><Path.RenderTransform><TransformGroup><ScaleTransform/><SkewTransform/><RotateTransform/><TranslateTransform/></TransformGroup></Path.RenderTransform></Path><Imagex:Name="image1"Height="192.829"Source="/HackingHttp_Get2;component/Images/server1.png"Stretch="Fill"VerticalAlignment="Center"HorizontalAlignment="Right"Width="171"ScrollViewer.HorizontalScrollBarVisibility="Auto"Margin="0,2.259,54.401,-195.088"/><ImageSource="/HackingHttp_Get2;component/Images/computer.png"Stretch="Fill"Margin="3.44,8.054,610.763,-197.568"/><TextBlockTextWrapping="Wrap"Text="Hitting Server"FontSize="18.667"RenderTransformOrigin="0.5,0.5"Margin="33.8,62.953,637.221,-87.783"><TextBlock.RenderTransform><TransformGroup><ScaleTransform/><SkewTransform/><RotateTransformAngle="-9.503"/><TranslateTransform/></TransformGroup></TextBlock.RenderTransform></TextBlock></Grid>
What I would like to do is scale the X coordinate in the animation ,instead of fixed value, so that when the window size changes the animation changes it proportions as well, adapting to that of the window. Something like this :
<UserControl.Resources><Storyboardx:Key="LineAnimation"RepeatBehavior="Forever"><DoubleAnimationUsingKeyFramesStoryboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"Storyboard.TargetName="path"><EasingDoubleKeyFrameKeyTime="0"Value="{Binding to image1 right position}"/><EasingDoubleKeyFrameKeyTime="0:0:4"Value="{Binding to image2 left position}"/></DoubleAnimationUsingKeyFrames></Storyboard></UserControl.Resources>
I know there is Viewbox that does the resizing , but when we use the same, it resizes the images on window instead of scaling the animation thus giving the illusion .
Simply put, I would like my animation to scale according to the size of the Window. Is there a way to achieve this ?