Click here to Skip to main content
16,017,247 members
Articles / Desktop Programming / WPF

3D Rotate a Shattered Content Control

Rate me:
Please Sign up or sign in to vote.
4.50/5 (5 votes)
6 Jul 2009CPOL2 min read 36.4K   2K   17   4
Rotate between front and back content.

Introduction

This control has front and back content. The transition between the contents is a 3D rotation of the contents broken down into multiple pieces.

Image 1

It is kind of a knockoff of the much more elegant control Josh Smith made, which can be found here.

Background

During the animation, the front and back content controls are hidden and the Viewport3D is made visible. When the animation completes, the Viewport3D is hidden and the appropriate content is made visible.

This is achieved simply by creating a visual brush of each content control, then retrieving a section of the Visual Brush using the Viewbox property, then painting that brush to a grid which is then set to the Visual property of a Viewport2DVisual3D. The Viewport2DVisual3D then gets positioned and added to the Viewport.

Using the code

To change the size of each rotating piece, you can set the PeiceSizeHeight and PeiceSizeWidth fields in the custom control. These fields use absolute coordinates relative to the actual size of the control. There are also fields for the animation length.

These fields should be exposed as dependency properties; however, I felt fields were appropriate to indicate the “incomplete” status of this control.

C#
double PeiceSizeHeight = 0.2;
double PeiceSizeWidth = 0.2;

Points of interest

There are some features of the control that are being ignored until the most significant issues get resolved. Most are marked with comments in the code.

My main problem with this control is the animation. Each piece has its own animation that fires and runs separate from one another, and the actual one gets started right after the creation phase of each Viewport2DVisual3D. A keyframe type animation within a Storyboard would be ideal to build up the animation and give each piece its proper animation “delay” time offset.

The second thing that could make this control better is if each Viewport2DVisual3D had a property that describes the location of the piece (Pieces down, Pieces across – e.g., 3,3 => is the middle (almost) piece of 6 pieces by 6 pieces). This would make the task of performing the animations in a controlled manner require less code, rather than relying on the order in which children were added to the viewport during an iterative statement.

Would this be archived by adding an Attached Property to a custom Viewport3D class or by adding a Dependency Property to a custom Viewport2DVisual3D class? Do I extend the Viewport3D class or the Viewport2DVisual3D class to hold the “Pieces down/Pieces across” property, or am I approaching this all wrong? Thanks for any suggestions.

License

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


Written By
Canada Canada
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
General3D Rotate a Shattered Content Control Pin
mouss200622-Dec-10 6:14
mouss200622-Dec-10 6:14 
Generalwhite stripe on bottom Pin
DaProgramma14-Jul-09 23:45
DaProgramma14-Jul-09 23:45 
Hello,
the animation does not seem to work correctly. When it runs, a white stripe at the bottom of the window appears, and the picture is truncated.
Any ideas?

Tnx
daProgramma
GeneralRe: white stripe on bottom [modified] Pin
Dan Wts15-Jul-09 15:01
Dan Wts15-Jul-09 15:01 
GeneralPretty cool~ Pin
Dragonfly_Lee9-Jul-09 23:42
Dragonfly_Lee9-Jul-09 23:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.