BTB017

Building a Real-World WPF Application:

The North Face In-Store Explorer
Darren David
Senior 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

Darren David
Senior Applications Engineer
Fluid, Inc.
 BTB017

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
WHAT 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 public void LoadImages()

– 5 lines of code {

• DataBinding DirectoryInfo dir = new DirectoryInfo(@"images");

foreach (FileInfo f in dir.GetFiles("*.jpg"))
– ObservableCollection {

• DependencyProperties Image newImage = new Image();

newImage.Source = new BitmapImage(new
– Width Uri(f.FullName, UriKind.Relative));
– Opacity this.Images.Add(newImage);
– 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
– 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