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.TRANSCRIPT
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.:
– [email protected]– www.fluid.com