MSDN "Take The Tour" - Prototype Silverlight UI
Builds on earlier SlideView concepts, introducing more advanced 3D transforms and rotation-based animations to create an even richer interactive experience. While a regular SlideView moves on a 2D flat plane, this version rotates content panes in line with the animation direction, then snaps them back into place using elastic easing. It also incorporates a multi-state “Fisheye” style navigation panel for a sleek, modern feel.
This moves beyond simple parallax or linear scrolling, leveraging PlaneProjection for near-3D illusions and dynamic transitions. The idea is to make each pane feel like a separate “card” spinning or shifting in space before settling. It further introduces subtle rotation on the Y-axis while adjusting GlobalOffsetX
and GlobalOffsetZ
, all timed through Silverlight storyboards.
Another major difference from regular SlideView is how the UI handles rotation states within the animation. Instead of simply sliding, the content frames tilt up to -45°
or rotate slightly, then spring back to a final position. This creates a more immersive sense of “pane reorientation” each time the user navigates. ElasticEase is used for a bouncy, natural feel during the snap-back transition.
MAX_SCALE
and a MULTIPLIER
factor to dynamically adjust scale. That approach produces an highlight effect that draws focus, keeping context of surrounding items.
Below is a shortened snippet from the ContentFrame class, specifically the Animate
method, demonstrating how rotation and offset values are applied, along with elasticity for snapping panes back. This code reveals how the UI calculates intermediate states and transitions before final alignment:
// Shortened excerpt from ContentFrame Animate method
private void Animate(int id, int x, int z)
{
int previousPosition = this._position;
this._position = id + this._position;
Storyboard sbEnd = (Storyboard)this.Resources["sbEnd"];
Storyboard sbMove = (Storyboard)this.Resources["sbMove"];
// Set initial 'From' offsets
(sbMove.Children[0] as DoubleAnimation).From = new double?(this.proj.GlobalOffsetX);
(sbMove.Children[1] as DoubleAnimation).From = new double?(this.proj.GlobalOffsetZ);
// Target partial offsets for a smooth shift
(sbMove.Children[0] as DoubleAnimation).To = new double?(0.8 * x);
(sbMove.Children[1] as DoubleAnimation).To = new double?(0.8 * z);
// Introduce tilt or rotation
// If user navigates multiple frames, tilt changes more:
if (Math.Abs(id) > 4)
(sbMove.Children[4] as DoubleAnimation).To = new double?(-45.0);
else
(sbMove.Children[4] as DoubleAnimation).To = new double?(2.0);
// ElasticEase for springiness
(sbMove.Children[3] as DoubleAnimation).To = new double?((id / Math.Abs(id)) * -5);
// After sbMove completes, sbEnd finalizes the offsets and rotation
// ... (rest of method omitted for brevity) ...
}
Here, the code modifies GlobalOffsetX
and GlobalOffsetZ
while layering in a DoubleAnimation
on the rotation. By using a partial multiplier for the To
values (e.g., 0.8 * x
), the system creates a softer entry before the final stage. Then sbEnd
polishes off the last 20% of motion, snapping the pane into place. This structure is more complex than the typical “one-shot” SlideView scroll found in simpler demos.
Paragraph 7: Once the user navigates to a new section, the difference in angle (-45°
or 2°
) depends on how many frames are moved, and a negative or positive sign indicates direction. ElasticEase
ensures a spring effect, so the pane appears to pivot, slow down, and then bounce once it reaches its final location—offering more visual feedback compared to standard SlideView transitions.
Meanwhile, the “Fisheye” navigation panel watchers the mouse Y-position, scaling each navigation item with Math.Abs
distance checks. If the user’s pointer is very close to an item, it grows toward MAX_SCALE
or slightly below, while others shrink and fade. This interplay of scale, opacity, and slight 3D rotation sets the experience apart from the simpler lists in a typical SlideView environment.
The overall result is near-3D browsing experience resembling high end gaming interfaces while being xml driven and touch enabled. The MSDN “Take The Tour” prototype demonstrates a further yet distinct evolution of SlideView