This WPF demo is used to test and demonstrate a few basic concepts and capabilities of the new Windows Presentation Foundation framework. It includes transparent windows, binding, UI elements, scaling, rotating, skewing, brushes, styles, 3D with images, textures and video, and manipulation of media elements.

Estimated time for the demo: 40 minutes.

Screenshots
NB: Some screenshots may not be totally up-to-date.

• Recommended:
  Open this link in Internet Explorer
  Note: This is a ClickOnce installation. Use Internet Explorer to view the page, then click on Install. If you don't have Internet Explorer or if you cannot use ClickOnce, see below.
• Downloading and installing the demo (...)
  Download the following zip file. After download, unzip to a folder and then start GalaSoftLb.Wpf.Demo.exe.

  • Complete zip file including the movie (1629 KB)
• Download the zipped project files

• The demo is provided as-is, without any guarantee.
• Some parts of this demo are taken from the book "Programming Windows Presentation Foundation" at O'Reilly, by Chris Sells and Ian Griffiths (ISBN 0-596-10113-9)
• The "brushes" part of the demo is taken from MSDN "VisualBrush Sample".

• Start by explaining the basic concepts of WPF
  • Separation Content - Layout - Code behind
  • Comparison with ASP.NET where HTML is replaced by XAML, CSS by XAML styles, code-behind by... code-behind!
• Underline amazing abilities of graphics engine (3D, media, dynamism) as compared to SVG for example
• Explain that same project files can be opened in Expression and Visual Studio, without conversion. Explain teamwork designer/developer.
• Add that many tools (3D editors, converters) exist, for example Adobe Illustrator converter, Zam3D, etc...
• Underline positive community spirit available for whole .NET 3.0 (ex WinFX) line of technologies: Blogs, forums, examples online including source code, etc...
• Explain what WPF/E is: Subset of WPF, designed to run on multiple platforms including Firefox, Opera, Safari (Mac), and later Linux. The major missing part is 3D, most other features should be present in WPF/E. Also, WPF/E running in the browser will be scriptable.

• Start the application GalaSoftLb.Wpf.Demo.exe
• Underline the special look&feel of the main window, without rounded corners, opacity (last slider on the right). Click on the window to drag it.
• Explain the buttons: Some are very standard and dull, but others are styled, demonstrating a new way to think a UI.
• Click on the "Binding" UI. The window shows that it's possible to bind a property of an element with another property (in this case, the slider value is bound with the content of a textbox).
  NB: The binding in this case goes through a C# converter, which adds the word "Value" in front of the numeric value. This demonstrate the use of such a code-behind converter.
  Close the window.
• Type a text in the small textbox on the bottom right of the window. Explain that the content of the box is bound to the button's content.
• Use the slider included in the 3D button to modify its opacity. The slider's value is bound to the button's opacity.
• Click on the "built-in" button. This window shows basic UI elements, their look&feel. Comment on the possibility to include images or any other element inside a listbox, a button... Comment on the hierarchical nature of XAML (XML), allowing adding any element inside of any element very easily.
  Close the window.
• Click on the "huge" button. Notice how the rendering is perfect, however big the button is. Also underline how you can add graphics in a button.
  Close the window.
• Talk about the look of the "brushes" button. Add that due to the vector graphics, the look&feel remain perfect even if elements are scaled. To demonstrate this, use the slider on the top-right to "zoom". Underline how perfect the button still looks even when scaled to the maximum.
• Click on the "brushes" button.
  Disclaimer: This sample is taken from MSDN (Search "VisualBrush Sample") and compiled as-is.
  Explain that using brushes, it is possible to achieve all kind of visual effects. A brush can be used to "paint" an element with any content, including special effects, transformations, multimedia, etc...
  Close the window.
• Click on the "skins" button. Explain the concept of cascading styles in XAML (similar to CSS). The window first displays UI element without any style. On click of a button, one can use a collection of styles ("metal" skin) or another ("fruity" skin). Skins (collections of style) can be designed by a graphical designer independantly of the developer's work.
  Close the window.
• Talk about transformation in XAML. Explain the concepts of rotation, skewing, scaling, etc... Note that most 2D transformations are also available in 3D. To demonstrate 2D transformations, use the sliders on the right: Scaling, Skewing, Rotating. Note how the rendering is still perfect even when skewed or rotated. Note also that when skewed, the active area of the button really follows the button's boundaries. In other environments, this effect is very hard to achieve.
• Talk about animations in XAML. Explain storyboards, timelines. To show the concept, click anywhere in the window and see the small animation modifying 2 buttons' height. No C# code involved, this is pure XAML.
  NB: DO NOT DOUBLE CLICK, click once and wait until the end of the animation. Sorry, it's not very elaborate.
• Click on the 3D button.
  NB: To be smooth, the demo should run on a machine with a good graphic card.
  Explain that the scene has been created in a 3D editor (Zam3D) and exported to XAML. On the big sphere, a picture of the Earth is "brushed". The other smaller sphere has a metallic look. Use the sliders on the bottom to scale and rotate the scene. Note the lighting. Finally, use the buttons X, Y and Z to animate the scene according to all 3 axis. Note that the whole scene including the animation's definition takes about 310 lines of XAML code, no code behind.
  Close the window.
• Click on the Media button. The "Simpsons" movie should start.
  NB: Sometimes the movie takes a few seconds to show up. Be prepared.
  Using the sliders on the right, you can scale, skew, rotate and modify the movie's opacity. Note that the movie still runs smoothly even when modified.
  NB: The movie lasts only about 1 min and is saved in low resolution to expedite the download.
  Close the window.
• Talk about the ease of media integration. To demonstrate, click on the "media button" checkbox. This replaces the content of the button with a MediaElement set to play the Simpsons movie. As before, you can transform the button using the sliders on the right.
  NB: This is made using code-behind, however the modification is very easy to do in XAML. Show this in the file Start.xaml, lines 144 and next.
• Talk about 3D media. To demonstrate, click on the 3D button and then on the "media 3D" checkbox See how the content of the big sphere has been replaced by the movie.
  NB: The movie sometimes takes a little time to start, be prepared.
  NB: For some reason, the movie is upside down, I didn't find why.
  Use the X, Y and Z buttons to animate the whole scene and note that the movie still plays.
  NB: Setting a MediaElement to be displayed on the sphere is made using code-behind, however the modification is very easy to do in XAML. Show this in the file EarthMoon3D.xaml, lines 257 and next.
  Close the window.

This is the end of the demo.

I hope that you like it and that it helps you understand basic concepts in WPF.