building a real world wpf application: the north face in-store explorer
DESCRIPTION
The North Face hired Fluid, a pioneer in online retail customer experience, to develop a retail kiosk using the rich media, animation and 3-D capabilities of Windows Presentation Foundation. This session walks through how the application was built, discussing design decisions and performance optimizing behaviors that were used. The session covers how the architecture of the application model as a whole was designed, and delves into the creation of the video carousel. The session is delivered by Darren David, Fluid's lead engineer on the project.Watch a video at http://www.bestechvideos.com/2006/11/16/mix06-building-real-world-wpf-applicationTRANSCRIPT
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 Management
Demo
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
Demo
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.:
– www.fluid.com