Click here to Skip to main content
14,207,126 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


17 bookmarked
Posted 6 Jul 2009
Licenced CPOL

3D Rotate a Shattered Content Control

, 6 Jul 2009
Rate this:
Please Sign up or sign in to vote.
Rotate between front and back content.


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

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


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.

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.


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


About the Author

Dan Wts
Canada Canada
No Biography provided

Comments and Discussions

General3D Rotate a Shattered Content Control Pin
mouss200622-Dec-10 6:14
membermouss200622-Dec-10 6:14 
Generalwhite stripe on bottom Pin
DaProgramma14-Jul-09 23:45
memberDaProgramma14-Jul-09 23:45 
GeneralRe: white stripe on bottom [modified] Pin
Dan Wts15-Jul-09 15:01
memberDan Wts15-Jul-09 15:01 
GeneralPretty cool~ Pin
Dragonfly_Lee9-Jul-09 23:42
memberDragonfly_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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.190612.1 | Last Updated 7 Jul 2009
Article Copyright 2009 by Dan Wts
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid