Led the UI/UX design for Microsoft’s .NET Field Demo, Woodgrove, a fictional educational platform designed to showcase the capabilities of .NET technologies such as WPF, Silverlight, and ASP.NET. The Woodgrove demo featured touch-enabled interaction, highlighted by custom-developed flip controls that allowed users to access contextual student data by interacting with cards or photos, creating a tactile and intuitive UX model. Although flip-based UIs had appeared previously in consumer applications such as Apple's iTunes, Woodgrove was distinctive in demonstrating a developer-ready, customizable implementation within the .NET ecosystem, making it an early example of interactive spatial navigation.

The Woodgrove logo was designed in XAML, enabling dynamic changes to its color and styling, emphasizing the adaptability and flexibility of WPF and Silverlight frameworks. This project intentionally departed from traditional Microsoft branding, utilizing a visually approachable aesthetic to underline the versatility of Microsoft’s technologies for various use cases, particularly in education.

The Woodgrove demo served as a key component in Microsoft training materials, showcasing practical implementation strategies for building rich, interactive applications with .NET.

TiltView is a Silverlight 3 prototype demonstrating basic real-time tilt and pseudo-3D effects driven by mouse interaction. The interface calculates rotation offsets from cursor movements, updating dynamically to simulate depth with subtle 3D transforms and gradient highlights.

Core Technical Implementation

Mouse movements captured on the main page drive rotations:

void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
{
    Point pt = e.GetPosition(null);
    cX = CalculatePos(pt.Y, this.ActualHeight, -5);
    cY = -(CalculatePos(pt.X, this.ActualWidth, -5));
}

A timer updates rotation each frame at ~24 FPS:

void _timer_Tick(object sender, EventArgs e)
{
    _planes[0].Rotate(_parent.cX, _parent.cY);
}

Tilt rotations are applied using PlaneProjection:

public void Rotate(double x, double y)
{
    proj.RotationX = RotateCap(x, 70);
    proj.RotationY = RotateCap(y, 70);
    proj.GlobalOffsetX += -y / 10;
    proj.GlobalOffsetY += x / 10;
}

Read the TiltView Code description: full PDF documentation.

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.

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

SlideView is a modular user interface control first implemented in Silverlight and WPF, designed to present collections of content within a horizontally scrollable container. Originally introduced in 2007, SlideView directly extended earlier interface experiments, including the infinite looping and parallax effects developed in the 2002 Car Game, as well as the data-driven, horizontally sliding navigation system from the SixspeedMedia 2D Carousel and subsequent iterations found on ayeckel.com.

Built on principles established by these earlier prototypes, SlideView introduced a streamlined, horizontally navigable interface, implementing a user experience where items could be smoothly scrolled or dragged horizontally. The underlying interaction used a straightforward combination of data binding, templated user controls ("ChildItems"), storyboard animations, and transformations native to the Silverlight and WPF frameworks.

Core Technical Implementation

SlideView's scrolling interaction is implemented using a TranslateTransform, activated by mouse interactions on a templated panel containing slide content:

<ItemsControl x:Name="SlideList">
  <UIElement.RenderTransform>
    <TranslateTransform x:Name="slideTransform" X="0" Y="0"/>
  </UIElement.RenderTransform>
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <local:ChildItem Width="250" Height="200"/>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

Each ChildItem managed independent visual state transitions through embedded animations triggered by mouse events:

<UserControl x:Class="WPFSlideLibrary.ChildItem">
  <Grid Width="250" Height="200" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave">
    <Grid.Resources>
      <Storyboard x:Key="HoverEffect">
        <!-- Hover animation storyboard -->
      </Storyboard>
    </Grid.Resources>
    <Image Source="{Binding Screenshot}" Stretch="UniformToFill"/>
    <TextBlock Text="{Binding Name}"
               HorizontalAlignment="Center"
               VerticalAlignment="Bottom"
               Margin="5"
               FontSize="14"
               FontWeight="Bold"/>
  </Grid>
</UserControl>

Applications and Evolution

SlideView's framework was adaptable and became foundational for several later projects, including the multi-view interfaces developed for the AT&T Developer Central DVD, the immersive, depth-enhanced MSDN 3D Carousel, and the linear filtering system explored in the Victory Lap project. Each of these adaptations refined the basic SlideView framework, demonstrating its flexibility across multiple platforms and interface contexts.

The manipulation processor behaviors and processing are based on the original DiffX single-pointer inertia method developed for Sixspeedmedia.com (2002–2003), the Silverlight-based multi-touch Touch Processor developed with Umesh Patel at CM Group, and ultimately integrated into Microsoft's official WPF 4.0 ManipulationDelta events. The Silverlight processor extended Microsoft's baseline offerings by incorporating robust inertia modeling, advanced gesture handling—including combined pinch and rotate gestures—and visual debugging utilities for developers. These contributions significantly influenced Microsoft's approach to multi-touch gesture processing in WPF.

A detailed technical breakdown and further context is available here.

Dynamic Lighting Control using gradients and positon

Initially prototyped as the CM Button, this custom control featured a data-driven dynamic linear gradient lighting effect using a XAML-defined gradient brush. The gradient's center point actively tracked cursor or touch inputs within the button's boundaries, producing interactive visual feedback. Colors in the gradient could either blend between two distinct brand-specific colors or smoothly transition from a single brand color to transparency (RGBA) with alpha channel support.

The CM Button supported additional visual enhancements, including dynamic gloss highlights, subtle edge lighting, and responsive drop shadows—all achieved through vector-based XAML definitions rather than raster-based graphics. Its appearance, including colors, typography, font style, and size (small, medium, large), was externally configured via XML, enhancing flexibility and ease of integration across diverse applications.

Another early variation shows an ellipse shape for the AT&T DVD landing screen prototype, although this version was ultimately not selected for deployment.

It was incorporated into Luminosity — which was used by Microsoft across multiple internal training groups—the CM Button was renamed to GlossButton. GlossButton retained the original dynamic gradient logic and interactive properties. Uses as part of the standard Luminosity-based video players and interactive course UIs.

The dynamic gradient logic evolved directly from an earlier Director-based prototype, "Lighting, Bounce and Drag Demo (2001)", where vector objects continually oriented their gradient fills toward the cursor position, demonstrating the long-term progression of the concept.

Below is the complete implementation code for the GlossButton to show how it was created:

namespace SilverlightPlayer.Controls
{
    public class GlossButton : Button
    {
        public static readonly DependencyProperty BackgroundColorProperty =
            DependencyProperty.Register(
                nameof(BackgroundColor),
                typeof(SolidColorBrush),
                typeof(GlossButton),
                new PropertyMetadata(
                    new SolidColorBrush(Colors.Black),
                    new PropertyChangedCallback(OnBackgroundChanged)));

        public static readonly DependencyProperty GlowProperty =
            DependencyProperty.Register(
                nameof(Glow),
                typeof(SolidColorBrush),
                typeof(GlossButton),
                new PropertyMetadata(
                    new SolidColorBrush(Colors.Black),
                    new PropertyChangedCallback(OnGlowChanged)));

        // Additional dependency properties defined here (omitted earlier, now restored explicitly):

        private bool _mouseOver;
        private bool _mousePressed;

        public GlossButton()
        {
            this.DefaultStyleKey = typeof(GlossButton);
            this.IsEnabledChanged += (s, e) => this.SetState();
        }

        private void SetState()
        {
            if (!this.IsEnabled)
                VisualStateManager.GoToState(this, "Disabled", true);
            else if (_mousePressed)
                VisualStateManager.GoToState(this, "Pressed", true);
            else if (_mouseOver)
                VisualStateManager.GoToState(this, "MouseOver", true);
            else
                VisualStateManager.GoToState(this, "Normal", true);
        }

        // Pointer tracking and glow positioning logic:
        protected override void OnMouseEnter(MouseEventArgs e)
        {
            base.OnMouseEnter(e);
            _mouseOver = true;
            UpdateGradientPosition(e.GetPosition(this));
            SetState();
        }

        protected override void OnMouseLeave(MouseEventArgs e)
        {
            base.OnMouseLeave(e);
            _mouseOver = false;
            SetState();
        }

        protected override void OnMouseMove(MouseEventArgs e)
        {
            base.OnMouseMove(e);
            if (_mouseOver)
                UpdateGradientPosition(e.GetPosition(this));
        }

        protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
        {
            base.OnMouseLeftButtonDown(e);
            _mousePressed = true;
            SetState();
        }

        protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
        {
            base.OnMouseLeftButtonUp(e);
            _mousePressed = false;
            SetState();
        }

        private void UpdateGradientPosition(Point pointerPosition)
        {
            double relativeX = pointerPosition.X / ActualWidth;
            double relativeY = pointerPosition.Y / ActualHeight;

            // Update gradient brush midpoint dynamically based on cursor position:
            LinearGradientBrush gradientBrush = this.Background as LinearGradientBrush;
            if (gradientBrush != null)
            {
                gradientBrush.StartPoint = new Point(relativeX, relativeY);
                gradientBrush.EndPoint = new Point(1 - relativeX, 1 - relativeY);
            }
        }

        private static void OnBackgroundChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var button = d as GlossButton;
            // Background color changed logic here
        }

        private static void OnGlowChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var button = d as GlossButton;
            // Glow color changed logic here
        }
    }
}

Car Game (Director) — December 2001-January 2002

This early project, created in Macromedia Director, demonstrated foundational principles in interactive design through a friction-based, physics-driven driving experience. Notable features included:

• Infinite Looping Graphics: Background elements continuously looped vertically, creating the illusion of an endless roadway.
• Realistic Friction and Motion: Vehicle speed was dynamically adjusted using a friction model:

  mygearspeed = mygearspeed * frictionFactor;

  This method resulted in realistic deceleration and a smooth driving feel.
• Torque and Acceleration Mechanics:

  torque = (wheelspeed + mygear) / (wheelspeed + 2);
  horsepower = (wheelspeed + mygear) * (torque * hp);
      

  These equations provided responsive control, mimicking tactile vehicle dynamics.
• Wrapping Mechanics: Background elements continuously looped vertically, creating a visually immersive and tactile experience. The game simulates speed, steering, and dynamic wrapping to create the illusion of acceleration, where yellow road lines appear closer together as the car moves faster:

  if sprite(me.spritenum).locv <= -200 then
    sprite(me.spritenum).locv = sprite(me.spritenum).locv + 700;
  end if;
      

• Steering Mechanics: Steering angles were adjusted dynamically based on speed, ensuring responsive turns:

  steering = max(-1, min(1, steering));
  angle = angle + ((steering * actual_speed) * 0.0005);

Technical Highlights:

• Friction Model: Dynamic speed decay using friction factor for smooth deceleration.
• Infinite Wrapping: Continuous looping visuals for seamless motion.
• Dynamic Speed Adjustment: Real-time responsiveness based on torque, friction, and user input.
• Visual Acceleration Effect: Faster wrapping creates an illusion of lines compressing as speed increases.
• User Interaction: Keyboard inputs control speed, steering, and braking.
• Feedback Mechanisms: Real-time tachometer and steering angle visual feedback enhance interaction.

This project laid the technical foundation for future works like the Sixspeedmedia 3D Carousel, introducing friction-based animations, continuous looping visuals, and tactile physics. Further documentation, including detailed code and original timestamps, is available for historical verification in the archived project PDF (Car_game_with_infinite_looping_graphical_elements_with_friction_and_mouse_control_with_smooth_animations_-1-17-2001.pdf).

See also related project: Sixspeedmedia 3D Carousel.

SlideView is a modular user interface control first implemented in Silverlight and WPF, designed to present collections of content within a horizontally scrollable container. Originally introduced in 2007, SlideView directly extended earlier interface experiments, including the infinite looping and parallax effects developed in the 2002 Car Game, as well as the data-driven, horizontally sliding navigation system from the SixspeedMedia 2D Carousel and subsequent iterations found on ayeckel.com.

Built on principles established by these earlier prototypes, SlideView introduced a streamlined, horizontally navigable interface, implementing a user experience where items could be smoothly scrolled or dragged horizontally. The underlying interaction used a straightforward combination of data binding, templated user controls ("ChildItems"), storyboard animations, and transformations native to the Silverlight and WPF frameworks.

Core Technical Implementation

SlideView's scrolling interaction is implemented using a TranslateTransform, activated by mouse interactions on a templated panel containing slide content:

<ItemsControl x:Name="SlideList">
  <UIElement.RenderTransform>
    <TranslateTransform x:Name="slideTransform" X="0" Y="0"/>
  </UIElement.RenderTransform>
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <local:ChildItem Width="250" Height="200"/>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

Each ChildItem managed independent visual state transitions through embedded animations triggered by mouse events:

<UserControl x:Class="WPFSlideLibrary.ChildItem">
  <Grid Width="250" Height="200" MouseEnter="OnMouseEnter" MouseLeave="OnMouseLeave">
    <Grid.Resources>
      <Storyboard x:Key="HoverEffect">
        <!-- Hover animation storyboard -->
      </Storyboard>
    </Grid.Resources>
    <Image Source="{Binding Screenshot}" Stretch="UniformToFill"/>
    <TextBlock Text="{Binding Name}"
               HorizontalAlignment="Center"
               VerticalAlignment="Bottom"
               Margin="5"
               FontSize="14"
               FontWeight="Bold"/>
  </Grid>
</UserControl>

Applications and Evolution

SlideView's framework was adaptable and became foundational for several later projects, including the multi-view interfaces developed for the AT&T Developer Central DVD, the immersive, depth-enhanced MSDN 3D Carousel, and the linear filtering system explored in the Victory Lap project. Each of these adaptations refined the basic SlideView framework, demonstrating its flexibility across multiple platforms and interface contexts.

The manipulation processor behaviors and processing are based on the original DiffX single-pointer inertia method developed for Sixspeedmedia.com (2002–2003), the Silverlight-based multi-touch Touch Processor developed with Umesh Patel at CM Group, and ultimately integrated into Microsoft's official WPF 4.0 ManipulationDelta events. The Silverlight processor extended Microsoft's baseline offerings by incorporating robust inertia modeling, advanced gesture handling—including combined pinch and rotate gestures—and visual debugging utilities for developers. These contributions significantly influenced Microsoft's approach to multi-touch gesture processing in WPF.

A detailed technical breakdown and further context is available here.

Lighting, Bounce and Drag Demo – Director (2001). Director-based Lingo demonstration featuring gradient-filled vector circles bouncing autonomously within a defined area. Objects can be manually repositioned using the "Grab" toggle. Additional visual modes include automatic color transitions and continual orientation toward cursor position. The use of gradient fills creates an interactive lighting illusion, with objects visually responding as if lit by the cursor. This visual approach reappeared in later interface components such as CMButton/GlossButton.

Proof-of-concept SlideView UI created for Intel Modular Server (IMS) in 2007 at Content Master. This project directly reused existing SlideView code developed for Sixspeedmedia.com, adapting both the original 3D Carousel and the flat, horizontally sliding 2D Carousel to display Intel's product imagery and technical content.

• 3D Carousel navigation using flick gestures, inertia, and data-bound content.
• 2D Carousel navigation, horizontally scrolling with easing toward edges.
• Interactive demo enabling 360-degree rotation of server hardware using frame-by-frame drag gestures.

This IMS demo served as the bridge between earlier Flash-based SlideView experiments and subsequent Silverlight implementations, demonstrating SlideView’s usability in business applications. Presented directly to Intel and Microsoft stakeholders.