Click here to Skip to main content
11,797,355 members (78,267 online)
Rate this: bad
Please Sign up or sign in to vote.
See more: WPF Animation Canvas
I have two Canvases side by side, like we have doors, i am able to swept the left canvas(door) from center to left, but i am facing problem in sweptting right canvas from center to right.


You can say i want the effect of openning of certains.
|canvas1|canvas2 |
|       |        |
|    <--|-->     |
|       |        |
|       |        |
arrows showing the direction of animation.
My code is here:
<Window x:Class="animationWithWPF.Window1"
        Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">
        <Canvas Height="261" HorizontalAlignment="Left" Name="canvas1" VerticalAlignment="Top" Width="140" removed="#FF6FB16F" />
        <Canvas Height="261" HorizontalAlignment="Left" Margin="139,0,0,0" Name="canvas2" VerticalAlignment="Top" Width="139" removed="#FF70BE70" />

private void Window_Loaded(object sender, RoutedEventArgs e)
         DoubleAnimation a = new DoubleAnimation();
         a.To = 0;
         DoubleAnimation b = new DoubleAnimation();
         b.To =139;
         b.From = 0;
         canvas1.BeginAnimation(Canvas.WidthProperty, a);
         canvas2.BeginAnimation(Canvas.WidthProperty, b);
Posted 20-Sep-12 6:37am
Sergey Alexandrovich Kryukov at 20-Sep-12 12:57pm
Not quite clear. Could you explain more exactly how this "sweep" should work?
Sergey Alexandrovich Kryukov at 20-Sep-12 13:01pm
For the first idea, I would suggest you try to animate just one object, as the two separate animations do not have to be synchronized with each other. If your animation is more complex than something you can achieve with available WPF animation (a simple example: accelerated motion, a motion following some expressing depending on time, not just linear), you can easily design the lower-level animation, using a separate thread and Dispatcher. But first, could explain how exactly it should look? And what do you see instead, why?
footballpardeep at 20-Sep-12 13:55pm
sweep is nothing, just canvas width will decrease.
<pre> DoubleAnimation a = new DoubleAnimation();
a.To = 0;
canvas1.BeginAnimation(Canvas.WidthProperty, a);</pre>
This is working fine for canvas1.

on the canvas2 i want the reverse effect of above animation.
As for canvas1 , when it's width will decrease from deafult value of canvas to 0.
For examle:Initially canvas width was:
canvas1 (on left side)
above canvas width will dreacrease from 100 to 0 , and direction will be from right to left.

for canvas2 i want the same effect means i want to reduce with from 100 to 0, but direction should be left to right for that.(I don't know whether i am able to explain it correctly or not)
footballpardeep at 20-Sep-12 14:52pm
Thanks for replying.

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

I got it to work like this:
    <Canvas Height="261" HorizontalAlignment="Left" Name="canvas1" VerticalAlignment="Top" Width="140" Background="#FF6FB16F" />
    <Canvas Height="261" HorizontalAlignment="Right" Name="canvas2" VerticalAlignment="Top" Width="139" Background="#FF70BE70" />

I just changed the Horizontal to Right instead of left and it works fine, as the canvas2 is pushed to the right as it gets smaller.
footballpardeep at 20-Sep-12 14:52pm
Thanks,it worked.
Wes Aday at 20-Sep-12 15:14pm
Good job. I never thought of that.
Kenneth Haugland at 20-Sep-12 15:37pm
Done it before so wasnt so hard :-D

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 CPallini 475
1 OriginalGriff 375
2 Maciej Los 370
3 Abhinav S 359
4 KrunalRohit 291
0 OriginalGriff 2,092
1 Maciej Los 1,760
2 KrunalRohit 1,436
3 CPallini 1,245
4 ppolymorphe 893

Advertise | Privacy | Mobile
Web01 | 2.8.151002.1 | Last Updated 20 Sep 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100