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.



