deconstructing timberland and reebok

1
BTB017
Building a Real-World WPF Application The
North Face In-Store Explorer
Darren David
Senior Applications Engineer
Fluid, Inc.
2
How a Flash Developer With Absolutely No Windows
Application or 3D Development Experience
Developed a Crazy WPF App in only 6 Weeks
BTB017
Darren David
Senior Applications Engineer
Fluid, Inc.
3
BTB017
27 Things I Cant Figure Out How To Do in WPF
and Heres a Stack of Bugs I Cant Work Around
and Why Wont My App Compile?
Darren David
Senior Applications Engineer
Fluid, Inc.
4
Karsten(206) 555-1212
5
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 TNFs products and brand

6
Demo
7
Background

• Fluids 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.

8
Visual Design

• Used a storyboard approach to help explain the
  concept

9
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

10
State Management

• Demo

11
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

12
Image Montage

• Demo

13
Image Montage

• Custom Control
• Contains a collection of Image objects
• Add an Image to the Visual Tree, animate it,
  lather, rinse, repeat

14
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(_at_"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)
15
3D in WPF

• 3D Math Primer for Graphics and Game Development
• http//tinyurl.com/jfwca
• WPF 3D API
• Viewport3D
• Camera
• LookDirection
• Light
• Content
• Transform3D
• Dont need to use matrix math if you dont want
  to

16
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

17
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

18
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

19
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 "xName" 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

20
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

21
QA
22
Thanks! Any Questions?

• Fluid, Inc.
• darren-mix06_at_fluid.com
• www.fluid.com