Andy Yeckel Design
Andy Yeckel Design

Portfolio / Microsoft SAAS Interactive Poster Website - XML Localization System Project 9 of 78   ☚ Prev | Next ☛

Microsoft SAAS Interactive Poster Website - XML Localization System

This project is a Silverlight-based interactive web application, designed as a technical demonstration showcasing:

  • Vector-based, infinitely scalable UI (XAML)
  • Dynamic XML-driven localization (multi-language, supporting Left-to-Right and Right-to-Left text)
  • Custom-built interactive zoom (emulating DeepZoom)
  • Smooth easing animations
  • Custom cursor interactions

MainPage Class (Entry Point):
Initializes localization by asynchronously loading XML files that describe languages and their localized content. Sets up zoom interaction via a custom control (ZoomElement), linked to mouse-wheel events and an interactive slider. Manages UI state and applies language localization based on user selection.

Example (language loading & localization):

WebClient webClient = new WebClient();
webClient.DownloadStringCompleted += Languages_DownloadCompleted;
webClient.DownloadStringAsync(new Uri("XML/languages.xml", UriKind.Relative));

Localization uses XML with structured Language objects containing localized strings mapped to UI components.

Poster Class (Core Interactive Element):
Contains visual elements (sections, popups) and multiple storyboard animations. Uses a custom easing-driven animation pipeline for introducing UI elements with rotation (PlaneProjection) and Z-depth to create a pseudo-3D effect.

Initialization snippet (rotation projection setup):

(((UIElement)this.grid).Projection as PlaneProjection).RotationX = -90.0;
(((UIElement)this.grid).Projection as PlaneProjection).RotationY = -90.0;
(((UIElement)this.grid).Projection as PlaneProjection).GlobalOffsetZ = -10000.0;

Animation uses storyboards named "SBPop" to sequentially rotate UI elements into view.

PopControl Class (Interactive Zoom Control):
Defines interactive elements that enlarge smoothly on mouse hover. Implements static zoom-level management, responding dynamically to the global zoom state.

Zoom handling logic snippet:

public static void SetZoom(double zoom)
{
    if (zoom > 3.0)
        CURRENT_ZOOM = 1.0;
    else
    {
        CURRENT_ZOOM = INITIAL_ZOOM / (zoom * 0.95);
        CURRENT_ZOOM = Math.Clamp(CURRENT_ZOOM, 1.0, MAX_ZOOM);
    }
}

Animations ensure smooth, GPU-efficient scaling on hover.

CustomCursor Class:
Implements a custom cursor system adjusting cursor states such as DEFAULT, GRAB, TEXT, and MAX_ZOOM. Updates cursor position based on mouse movements, creating a smoother user experience.

Cursor positioning snippet:

public void MoveTo(double x, double y)
{
    this.translate.X = x - Application.Current.Host.Content.ActualWidth / 2.0;
    this.translate.Y = y - Application.Current.Host.Content.ActualHeight / 2.0;
}

Zoom Interaction (Custom DeepZoom Emulation):
A custom-developed ZoomElement handles smooth easing-based zoom transitions using mouse-wheel events and click interactions. Zoom transitions animate smoothly between predefined start and end points using easing functions and animation timers.

Example (zoom event handling):

private void UserControl_MouseWheel(object sender, MouseWheelEventArgs e)
{
    (this.zoomElement.Content as ZoomElement).ZoomMouseWheel(sender, e);
}

XML Localization Structure:
Localization XML provides multi-language strings for all UI text, labels, descriptions, and metadata. Dynamic binding ensures rapid UI language updates.

Example XML structure for language definition:

<language file="en.xml" label="English" tags="en,english">
    <item id="securityheader" value="Security"/>
    <item id="toolheader" value="Latest Tools"/>
    <!-- More items -->
</language>

This demonstration highlighted a practical integration of lightweight, infinitely scalable vector graphics, advanced zoom animations, and accessible localization—establishing techniques valuable for future interactive data visualizations.

View project demo (requires Silverlight and IE Mode)

  • Microsoft SAAS Interactive Poster Website - XML Localization System
  • Microsoft SAAS Interactive Poster Website - XML Localization System saas.jpg
  • Microsoft SAAS Interactive Poster Website - XML Localization System saas2.jpg
  • Microsoft SAAS Interactive Poster Website - XML Localization System saas3.jpg