Click here to Skip to main content
Rate this: bad
good
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.
 
or
 
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"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">
    <Grid>
        <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" />
    </Grid>
</Window>
 
 
   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 7:37am
Comments
Sergey Alexandrovich Kryukov at 20-Sep-12 12:57pm
   
Not quite clear. Could you explain more exactly how this "sweep" should work?
--SA
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?
--SA
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)
<pre>
---------------------------100-----<----
------------------------------<-
--------------------------<-
-------------
---------
--<--
--
-
0
</pre>
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
good
Please Sign up or sign in to vote.

Solution 1

I got it to work like this:
<Grid>
    <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" />
</Grid>
 
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.
  Permalink  
Comments
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 Sergey Alexandrovich Kryukov 295
1 OriginalGriff 274
2 Shweta N Mishra 216
3 PIEBALDconsult 184
4 CPallini 155
0 OriginalGriff 7,630
1 Sergey Alexandrovich Kryukov 7,022
2 DamithSL 5,586
3 Manas Bhardwaj 4,946
4 Maciej Los 4,525


Advertise | Privacy | Mobile
Web04 | 2.8.1411023.1 | Last Updated 20 Sep 2012
Copyright © CodeProject, 1999-2014
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