Building a Real-World WPF Application:

The North Face In-Store Explorer
Darren David
Senior Applications Engineer Fluid, Inc.


How a Flash Developer With Absolutely No Windows Application or 3D Development Experience Developed a Crazy WPF App in only 6 Weeks
Darren David
Senior Applications Engineer Fluid, Inc.


27 Things I Can’t Figure Out How To Do in WPF and Here’s a Stack of Bugs I Can’t Work Around and Why Won’t My App Compile?
Darren David
Senior Applications Engineer Fluid, Inc.

Karsten: (206) 555-1212

Application Overview

The North Face sponsors more expeditions each year than all of its competitors combined
– – Athlete-tested equipment Treasure trove of rich media content

Interactive kiosk that allows customers to experience the expeditions in a way that is relevant to TNF’s products and brand


• Fluid’s specialty was in RIA and web development • Familiar with declarative markup-based UI development • Entire application was prototyped in 6 weeks with a single developer.

Visual Design
• Used a storyboard approach to help explain the concept

Show Me the Money
• Whitepaper and code samples for this talk available on MSDN

• Three main aspects of the application
– State Management – Image Montage – Video Carousel

State Management

State Management
• Most basic WinFX application is a NavigationApplication • TNF App required a highly customized navigation schema • Instantiate all screens/controls at startup, then transition between them as needed • Z Index • Techniques for hiding user controls
– Visibility – Opacity – Canvas.Left/Canvas.Top

• Divide application into states • StateManager class controls transitions between states
– SetState( state ), OnCurrentStateChanged event – Great for simple applications and transitions

Image Montage

Image Montage
• Custom Control • Contains a collection of Image objects • Add an Image to the Visual Tree, animate it, lather, rinse, repeat

Image Montage
• Getting images into WPF
– 5 lines of code
public void LoadImages() { DirectoryInfo dir = new DirectoryInfo(@"images"); foreach (FileInfo f in dir.GetFiles("*.jpg")) { Image newImage = new Image(); newImage.Source = new BitmapImage(new Uri(f.FullName, UriKind.Relative)); this.Images.Add(newImage); } }

• DataBinding
– ObservableCollection

• DependencyProperties
– Width – Opacity – Canvas.Left/Canvas.Top

• DispatcherTimer
– Equivalent of setInterval()

• Animation
– XAML or code – Storyboards – BeginAnimation()
• DoubleAnimation

– CurrentStateInvalidated

3D in WPF
• 3D Math Primer for Graphics and Game Development

– Viewport3D
• Camera
– LookDirection

• Light • Content

– Transform3D
• Don’t need to use matrix math if you don’t want to

Video Carousel
• ListBox3D, ListItem3D
– By extending ListBox, we can override the methods to add ListItem3D elements to our viewport instead of ListBoxItems – Use a custom layout method – Can databind!

• VisualBrush to paint UIElements on to Meshes
– MediaElement to host a video

• Animation • Controlling volume • Optimization
– Fewer meshes with more points is more performant than more meshes with fewer points

Solution Architecture
• WinFX Windows Application
– ClickOnce application, Full Trust

• Application Resources
– Similar to Library in Flash – Styles, Controls, Data containers

• Directories mapped to Namespaces • Include your Fonts in your project so they will be available on machines that don't have them installed
– Check your licensing!

• Refactor generic classes/controls into a separate project

Application Architecture
• Styles, Styles, Styles • Encapsulate custom UI functionality in Custom Controls
– – – – Controls, Panels, or entire sections of an application ex: ExpeditionCarousel, LogoPanel, ImageMontage Can reference from XAML or code Window1.xaml for TNF Kiosk contains 100% custom controls

• Data stored in XML
– Uses native .NET Serialization/Deserialization to create business objects at runtime

• Runtime config params stored as project settings
– Application and User scopes – Strongly-typed

Discoveries + Suggestions
• • Just make it work Databinding
– INotifyPropertyChanged/INotifyCollectionChanged interfaces – Use Converters to control output in XAML

• •

Intellisense available in codebehind files after you build
– Give XAML elements "x:Name" properties

MultiThreaded applications
– BackgroundWorker – Freeze()

GUI tools
– Expression Interactive Designer – Orcas VS Designer

Performance Optimization
– Optimizing Performance in the Windows Presentation Foundation –

Avalon team blogs

Getting Started
• Get the WinFX CTPs
– WinFX runtime – Visual Studio extensions – WinFX SDK

• Books
– Programming WPF - Chris Sells & Ian Griffiths – Programming C# - Jesse Liberty

• Use what you know.
– Standards – Design Patterns – Port existing frameworks/classes


Thanks! Any Questions?
• Fluid, Inc.:
– –