Codenstuff.com

Posted: **Wed Sep 18, 2013 1:51 pm**

Open the window

This is a nice little storyboard animation you can add to your app elements that will create an animation that looks like an opening window or box.

First you will need 2 controls (1 for each side) lets use rectangles and give them the "PlaneProjection" property and name a rectangle "d1" and the other "d2":

Code: Select all

                <Rectangle x:Name="d1" Fill="#FF3434E6" HorizontalAlignment="Left" Height="250" Margin="0" Stroke="Black" VerticalAlignment="Top" Width="140">
                    <Rectangle.Projection>
                        <PlaneProjection  />
                    </Rectangle.Projection>
                </Rectangle>
                <Rectangle x:Name="d2" Fill="#FF1D1DEE" HorizontalAlignment="Left" Height="250" Margin="140,0,0,0" Stroke="Black" VerticalAlignment="Top" Width="140">
                    <Rectangle.Projection>
                        <PlaneProjection  />
                    </Rectangle.Projection>
                </Rectangle>

Edit margins etc as needed.

Then add the animation storyboard (I called it Windows):

Code: Select all

        <Storyboard x:Name="Windows">
            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)" Storyboard.TargetName="d1" d:IsOptimized="True"/>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="d1">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="d1">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="140"/>
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)" Storyboard.TargetName="d2" d:IsOptimized="True"/>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="d2">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="d2">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-140"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

Now to run the animation via code either automatically or in a tapped event or something just add this:

Code: Select all

Windows.Begin()

And the animation will play.

Not sure what you could use this animation for but I'm sure someone will find it useful cooll;

Posted: **Wed Sep 18, 2013 2:37 pm**

cryer; cryer; can't use it
no win8 :lol:

but nice share loove;

Posted: **Fri Sep 20, 2013 6:17 pm**

I think one is able to replicate this effect for any WPF project

Codenstuff.com

Window/Box opening animation

Window/Box opening animation

Re: Window/Box opening animation

Re: Window/Box opening animation