Btb017 David


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Btb017 David

  1. 1. Building a Real-World WPF Application: The North Face In-Store Explorer Darren David Senior Applications Engineer Fluid, Inc. BTB017
  2. 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. 3. 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 David Senior Applications Engineer Fluid, Inc.
  4. 4. Karsten: (206) 555-1212
  5. 5. Application Overview WHAT WE BUILT <ul><li>The North Face sponsors more expeditions each year than all of its competitors combined </li></ul><ul><ul><li>Athlete-tested equipment </li></ul></ul><ul><ul><li>Treasure trove of rich media content </li></ul></ul><ul><li>Interactive kiosk that allows customers to experience the expeditions in a way that is relevant to TNF’s products and brand </li></ul>
  6. 6. Demo
  7. 7. Background <ul><li>Fluid’s specialty was in RIA and web development </li></ul><ul><li>Familiar with declarative markup-based UI development </li></ul><ul><li>Entire application was prototyped in 6 weeks with a single developer. </li></ul>
  8. 8. Visual Design <ul><li>Used a storyboard approach to help explain the concept </li></ul>
  9. 9. Show Me the Money <ul><li>Whitepaper and code samples for this talk available on MSDN </li></ul><ul><ul><li> </li></ul></ul><ul><li>Three main aspects of the application </li></ul><ul><ul><li>State Management </li></ul></ul><ul><ul><li>Image Montage </li></ul></ul><ul><ul><li>Video Carousel </li></ul></ul>
  10. 10. State Management <ul><li>Demo </li></ul>
  11. 11. State Management <ul><li>Most basic WinFX application is a NavigationApplication </li></ul><ul><li>TNF App required a highly customized navigation schema </li></ul><ul><li>Instantiate all screens/controls at startup, then transition between them as needed </li></ul><ul><li>Z Index </li></ul><ul><li>Techniques for hiding user controls </li></ul><ul><ul><li>Visibility </li></ul></ul><ul><ul><li>Opacity </li></ul></ul><ul><ul><li>Canvas.Left/Canvas.Top </li></ul></ul><ul><li>Divide application into states </li></ul><ul><li>StateManager class controls transitions between states </li></ul><ul><ul><li>SetState( state ), OnCurrentStateChanged event </li></ul></ul><ul><ul><li>Great for simple applications and transitions </li></ul></ul>
  12. 12. Image Montage <ul><li>Demo </li></ul>
  13. 13. Image Montage <ul><li>Custom Control </li></ul><ul><li>Contains a collection of Image objects </li></ul><ul><li>Add an Image to the Visual Tree, animate it, lather, rinse, repeat </li></ul>
  14. 14. Image Montage <ul><li>Getting images into WPF </li></ul><ul><ul><li>5 lines of code </li></ul></ul><ul><li>DataBinding </li></ul><ul><ul><li>ObservableCollection </li></ul></ul><ul><li>DependencyProperties </li></ul><ul><ul><li>Width </li></ul></ul><ul><ul><li>Opacity </li></ul></ul><ul><ul><li>Canvas.Left/Canvas.Top </li></ul></ul><ul><li>DispatcherTimer </li></ul><ul><ul><li>Equivalent of setInterval() </li></ul></ul><ul><li>Animation </li></ul><ul><ul><li>XAML or code </li></ul></ul><ul><ul><li>Storyboards </li></ul></ul><ul><ul><li>BeginAnimation() </li></ul></ul><ul><ul><ul><li>DoubleAnimation </li></ul></ul></ul><ul><ul><li>CurrentStateInvalidated </li></ul></ul>public void LoadImages() { DirectoryInfo dir = new DirectoryInfo(@&quot;images&quot;); foreach (FileInfo f in dir.GetFiles(&quot;*.jpg&quot;)) { Image newImage = new Image(); newImage.Source = new BitmapImage(new Uri(f.FullName, UriKind.Relative)); this.Images.Add(newImage); } }
  15. 15. 3D in WPF <ul><li>3D Math Primer for Graphics and Game Development </li></ul><ul><ul><li> </li></ul></ul><ul><li>WPF 3D API </li></ul><ul><ul><li>Viewport3D </li></ul></ul><ul><ul><ul><li>Camera </li></ul></ul></ul><ul><ul><ul><ul><li>LookDirection </li></ul></ul></ul></ul><ul><ul><ul><li>Light </li></ul></ul></ul><ul><ul><ul><li>Content </li></ul></ul></ul><ul><ul><li>Transform3D </li></ul></ul><ul><ul><ul><li>Don’t need to use matrix math if you don’t want to </li></ul></ul></ul>
  16. 16. Video Carousel <ul><li>ListBox3D, ListItem3D </li></ul><ul><ul><li>By extending ListBox, we can override the methods to add ListItem3D elements to our viewport instead of ListBoxItems </li></ul></ul><ul><ul><li>Use a custom layout method </li></ul></ul><ul><ul><li>Can databind! </li></ul></ul><ul><li>VisualBrush to paint UIElements on to Meshes </li></ul><ul><ul><li>MediaElement to host a video </li></ul></ul><ul><li>Animation </li></ul><ul><li>Controlling volume </li></ul><ul><li>Optimization </li></ul><ul><ul><li>Fewer meshes with more points is more performant than more meshes with fewer points </li></ul></ul>
  17. 17. Solution Architecture <ul><li>WinFX Windows Application </li></ul><ul><ul><li>ClickOnce application, Full Trust </li></ul></ul><ul><li>Application Resources </li></ul><ul><ul><li>Similar to Library in Flash </li></ul></ul><ul><ul><li>Styles, Controls, Data containers </li></ul></ul><ul><li>Directories mapped to Namespaces </li></ul><ul><li>Include your Fonts in your project so they will be available on machines that don't have them installed </li></ul><ul><ul><li>Check your licensing! </li></ul></ul><ul><li>Refactor generic classes/controls into a separate project </li></ul>
  18. 18. Application Architecture <ul><li>Styles, Styles, Styles </li></ul><ul><li>Encapsulate custom UI functionality in Custom Controls </li></ul><ul><ul><li>Controls, Panels, or entire sections of an application </li></ul></ul><ul><ul><li>ex: ExpeditionCarousel, LogoPanel, ImageMontage </li></ul></ul><ul><ul><li>Can reference from XAML or code </li></ul></ul><ul><ul><li>Window1.xaml for TNF Kiosk contains 100% custom controls </li></ul></ul><ul><li>Data stored in XML </li></ul><ul><ul><li>Uses native .NET Serialization/Deserialization to create business objects at runtime </li></ul></ul><ul><li>Runtime config params stored as project settings </li></ul><ul><ul><li>Application and User scopes </li></ul></ul><ul><ul><li>Strongly-typed </li></ul></ul>
  19. 19. Discoveries + Suggestions <ul><li>Just make it work </li></ul><ul><li>Databinding </li></ul><ul><ul><li>INotifyPropertyChanged/INotifyCollectionChanged interfaces </li></ul></ul><ul><ul><li>Use Converters to control output in XAML </li></ul></ul><ul><li>Intellisense available in codebehind files after you build </li></ul><ul><ul><li>Give XAML elements &quot;x:Name&quot; properties </li></ul></ul><ul><li>MultiThreaded applications </li></ul><ul><ul><li>BackgroundWorker </li></ul></ul><ul><ul><li>Freeze() </li></ul></ul><ul><li>GUI tools </li></ul><ul><ul><li>Expression Interactive Designer </li></ul></ul><ul><ul><li>Orcas VS Designer </li></ul></ul><ul><li>Performance Optimization </li></ul><ul><ul><li>Optimizing Performance in the Windows Presentation Foundation </li></ul></ul><ul><ul><li> </li></ul></ul><ul><li>Avalon team blogs </li></ul>
  20. 20. Getting Started <ul><li>Get the WinFX CTPs </li></ul><ul><ul><li>WinFX runtime </li></ul></ul><ul><ul><li>Visual Studio extensions </li></ul></ul><ul><ul><li>WinFX SDK </li></ul></ul><ul><li>Books </li></ul><ul><ul><li>Programming WPF - Chris Sells & Ian Griffiths </li></ul></ul><ul><ul><li>Programming C# - Jesse Liberty </li></ul></ul><ul><li>Use what you know. </li></ul><ul><ul><li>Standards </li></ul></ul><ul><ul><li>Design Patterns </li></ul></ul><ul><ul><li>Port existing frameworks/classes </li></ul></ul>
  21. 21. Q&A
  22. 22. Thanks! Any Questions? <ul><li>Fluid, Inc.: </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><ul><li> </li></ul></ul>