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
