Click here to Skip to main content
15,887,596 members

Comments by GRF75 (Top 2 by date)

GRF75 1-Nov-11 13:10pm View    
Warning: Code copied from Kaxaml. Some errors were introduced unintentionally.
GRF75 1-Nov-11 12:49pm View    
Deleted
Nice solution, Shmuel.

However, I must advance each step based on external events, so I can't set BeginTime from XAML nor code. So far, I'm working with multiple storyboards, each one representing one step. On each event, I call these storyboards sequentially. The solution is similar to yours, but with multiple Storyboards using 1 DoubleAnimationUsingPath for X and 1 DoubleAnimationUsingPath for Y.

Lemme show you:
<pre lang="c#">
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<grid>
<grid.resources>
<PathGeometry x:Key="path1"
Figures="M0,0 L10,10 C20,100 30,10 60,120 C30,130 20,170 120,175" />
<PathGeometry x:Key="path2"
Figures="M120,175 C130,150 140,180 160,130 C170,150 175,170 190,120 C200,80 200,60 40,40" />
<storyboard x:key="sb1">
<doubleanimationusingpath storyboard.targetname="rectTranslateTransform"
="" storyboard.targetproperty="X" pathgeometry="{StaticResource path1}" source="X" duration="0:0:2">
<doubleanimationusingpath storyboard.targetname="rectTranslateTransform"
="" storyboard.targetproperty="Y" pathgeometry="{StaticResource path1}" source="Y" duration="0:0:2">

<storyboard x:key="sb2">
<doubleanimationusingpath storyboard.targetname="rectTranslateTransform"
="" storyboard.targetproperty="X" pathgeometry="{StaticResource path2}" source="X" duration="0:0:2">
<doubleanimationusingpath storyboard.targetname="rectTranslateTransform"
="" storyboard.targetproperty="Y" pathgeometry="{StaticResource path2}" source="Y" duration="0:0:2">


<grid.rowdefinitions>
<rowdefinition>
<rowdefinition height="Auto">
<rowdefinition height="Auto">

<Path Data="M0,0 L10,10 C20,100 30,10 60,120 C30,130 20,170 120,175" Stroke="Green" StrokeThickness="2" />
<Path Data="M120,175 C130,150 140,180 160,130 C170,150 175,170 190,120 C200,80 200,60 40,40" Stroke="Blue" StrokeThickness="2" />
<canvas>
<rectangle fill="Red"
="" stroke="DarkRed" strokethickness="1" height="15" width="15" canvas.left="0" canvas.top="0" x:name="rect1">
<rectangle.rendertransform>
<TranslateTransform x:Name="rectTranslateTransform" />



<Button Content="Animate 1" Grid.Row="1">
<Button.Triggers>
<eventtrigger routedevent="ButtonBase.Click">
<beginstoryboard storyboard="{StaticResource sb1}">

</Button.Triggers>
</Button>
<Button Content="Animate 2" Grid.Row="2">
<Button.Triggers>
<eventtrigger routedevent="ButtonBase.Click">
<beginstoryboard storyboard="{StaticResource sb2}">

</Button.Triggers>
</Button>

</Page>
</pre>

I preciate your work. I still think maybe there's a better solution. Time will tell.