Building a Real-World WPF Application: The North Face In-Store Explorer

Darren DavidSenior Applications Engineer

Fluid, Inc.

BTB017

How a Flash Developer With Absolutely No Windows Application or 3D

Development Experience Developed a Crazy WPF App in only 6 Weeks

BTB017

Darren DavidSenior 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?

BTB017

Darren DavidSenior Applications Engineer

Fluid, Inc.

Karsten:(206) 555-1212

Application OverviewWHAT WE BUILT

• 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

Demo

Background• 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

– http://tinyurl.com/rvyja • Three main aspects of the application

– State Management– Image Montage– Video Carousel

State ManagementDemo

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 MontageDemo

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• DataBinding

– ObservableCollection• DependencyProperties

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

• DispatcherTimer– Equivalent of setInterval()

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

• DoubleAnimation– CurrentStateInvalidated

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);

}

}

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

– http://tinyurl.com/jfwca• WPF 3D API

– 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– http://tinyurl.com/e93dh

• 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

Q&A

Thanks! Any Questions?• Fluid, Inc.:

– darren-mix06@fluid.com– www.fluid.com