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.