Andy Yeckel Design
Andy Yeckel Design

Portfolio / MSDN "Take The Tour" - Prototype Silverlight UI Project 56 of 78   ☚ Prev | Next ☛

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.

On the navigation side, the left Fisheye menu not only magnifies items on hover, but also updates their opacity in direct relation to cursor distance. Calculates a 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 ) 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

  • MSDN
  • MSDN "Take The Tour" - Prototype Silverlight UI msdn4.jpg
  • MSDN "Take The Tour" - Prototype Silverlight UI msdn3.jpg
  • MSDN "Take The Tour" - Prototype Silverlight UI msdn2.jpg
  • MSDN "Take The Tour" - Prototype Silverlight UI msdn1.jpg