CODEWITHSUNDEEP
c#wpfxaml
zizouraj
zizouraj

Reputation: 493

How to add objects to Canvas after ellipse reaches middle of the Canvas?

I am animating the ellipse to move horizontally in wpf. Now I want to add few more ellipses on to the canvas when ellipse reaches certain point on canvas (let's say midpoint of the canvas). How can I achieve this?

XAML code- 

<Canvas Background="AliceBlue" x:Name="canvas">
        <Ellipse
            Name="ellipse1"              
            Canvas.Left="50"
            Fill="#FFFFFF00"
            Height="75"
            Width="100"              
           />           
    </Canvas>

Code behind-

 public partial class MainWindow : Window
{
    private DoubleAnimation anim = new System.Windows.Media.Animation.DoubleAnimation(50, 400, TimeSpan.FromSeconds(10),
                                                    System.Windows.Media.Animation.FillBehavior.HoldEnd);
    private AnimationClock clock;

    public MainWindow()
    {
        InitializeComponent();
        clock = anim.CreateClock();
        this.ellipse1.ApplyAnimationClock(Canvas.LeftProperty, clock);
    }
}


Initially I thought it was simple, I would just access Canvas.Left from code behind and when it reaches the value I want, I would add the ellipses. But I am struggling to implement this, I guess I would need some kind of watcher or event to achieve this. How should I implement it?

Upvotes: 2

Views: 202

Answers (1)

Walt Ritscher
Walt Ritscher

Reputation: 7047

Create two storyboards. Each one does half the animation. When the first storyboard completes start the second storyboard and add the other ellipses.

XAML

<Window.Resources>
  <Storyboard x:Key="StartingStoryboard"
              Completed='Storyboard_Completed'>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"
                                    Storyboard.TargetName="ellipse1">
      <EasingDoubleKeyFrame KeyTime="0"
                            Value="0" />
      <EasingDoubleKeyFrame KeyTime="0:0:2"
                            Value="100" />
    </DoubleAnimationUsingKeyFrames>
  </Storyboard>
  <Storyboard x:Key="EndingStoryboard">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"
                                    Storyboard.TargetName="ellipse1">
      <EasingDoubleKeyFrame KeyTime="0"
                            Value="100" />
      <EasingDoubleKeyFrame KeyTime="0:0:2"
                            Value="200" />
    </DoubleAnimationUsingKeyFrames>
  </Storyboard>
</Window.Resources>
<Window.Triggers>
  <EventTrigger RoutedEvent="FrameworkElement.Loaded">
    <BeginStoryboard Storyboard="{StaticResource StartingStoryboard}" />

  </EventTrigger>
</Window.Triggers>
<Canvas Background="AliceBlue"
        x:Name="canvas1">
  <Ellipse Name="ellipse1"
            Fill="#FFFFFF00"
            Height="75"
            Width="100"
            RenderTransformOrigin="0.5,0.5">
    <Ellipse.RenderTransform>
      <TransformGroup>
        <ScaleTransform />
        <SkewTransform />
        <RotateTransform />
        <TranslateTransform />
      </TransformGroup>
    </Ellipse.RenderTransform>
  </Ellipse>
</Canvas>

Code

private void Storyboard_Completed(object sender, EventArgs e) {
  var sb = FindResource("EndingStoryboard") as Storyboard;
  sb.Begin();
  var orangeEllipse = new Ellipse();
  orangeEllipse.Fill = new SolidColorBrush(Colors.Orange);
  orangeEllipse.Width = orangeEllipse.Height = 40;
  canvas1.Children.Add(orangeEllipse);
}

Upvotes: 1

Related Questions