3D Rotate a Shattered Content Control

• Download source code - 1.66 MB

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.

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.

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.