Building a Real World WPF Application: The North Face In-Store Explorer

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.:

– darren-mix06@fluid.com

– www.fluid.com