Slide View / Multi View UI Design
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.