View project More about this project →

Designing and Developing Surface Applications - Surface 2.0 SDK Training

The Surface 2.0 Training Course, developed by CM Group (Content Master) for Microsoft, was hosted on the official resource at microsoft.com/surface/training. The course was delivered using Luminosity, a SCORM-compliant e-learning platform built with Silverlight and HTML5, representing Microsoft's next-generation interactive e-learning solutions.

Luminosity was adopted broadly within Microsoft, notably across initiatives such as Patterns & Practices.

The visual and interaction design process encompassed the complete creation of the user interface and graphics, starting from initial wireframes and progressing through fully realized UI elements and interaction flows. These design elements were developed collaboratively with CM Group and Microsoft's Surface team, who provided instructional content, resulting in a comprehensive training resource specifically designed for Surface 2.0 (later known as PixelSense).

The user interface design referenced early internal Microsoft guidelines, specifically pre-official Metro concepts derived from Windows Phone, which were themselves rooted in foundational design principles such as Swiss and Bauhaus minimalism. As official Metro branding was still in development at the time, independent refinement and interpretation were required to meet the specific design needs of this project.

A notable aspect of the training course was the creation of original, detailed graphics clearly illustrating multi-touch gesture interactions, including rotation, translation, and pinch-to-zoom. Additionally, detailed guidelines for touch-point sizing were produced, explicitly referencing early Windows Phone UI standards, providing practical clarity for developers implementing Surface interactions.

Further technical details regarding multi-touch manipulation processing, gesture recognition, and related frameworks are documented in the separate SlideView entry.

More ⇨

View project More about this project →

.NET Field Demo - Woodgrove

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.

More ⇨

View project More about this project →

CM Button - Data-Driven Dynamic UI Element (2008)

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
        }
    }
}

More ⇨