how to sweep two canvases in wpf.

Question

0.00/5 (No votes)

See more:

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 6:37am

footballpardeep

Add a Solution

Comments

Sergey Alexandrovich Kryukov 20-Sep-12 12:57pm

Not quite clear. Could you explain more exactly how this "sweep" should work?
--SA

Sergey Alexandrovich Kryukov 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 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 20-Sep-12 14:52pm

Thanks for replying.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Kenneth Haugland · Accepted Answer · 2012-09-20T08:47:00

Solution 1

I got it to work like this:

XML

<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.

Posted 20-Sep-12 8:47am

Kenneth Haugland

Comments

footballpardeep 20-Sep-12 14:52pm

Thanks,it worked.

[no name] 20-Sep-12 15:14pm

Good job. I never thought of that.

Kenneth Haugland 20-Sep-12 15:37pm

Done it before so wasnt so hard :-D