1. Part of the Microsoft.NET Framework 3.0 Tomer Shamam.NET Technologies Expert Sela Group tomer@sela.co.ilhttp://blogs.microsoft.co.il/blogs/tomershamam/

2.  Introduction to WPF  The WPF Engines  The language of WPF (XAML)  The Microsoft Expression Blend

4.  Known as WPF  A new presentation programming model  Provides the foundation for building the next generation User Interface  Has the capabilities of precedes technologies such as MFC, Windows Forms including GDI, GDI+, HTML, and much more  Combines together Application UI, Documents, 2D and 3D Graphics, Animation and Media  Exploits the power of your 3D Graphic Card by using DirectX in its core

5. WPF Showoff

6. Windows XP Home/Pro SP2 Windows Server 2003 Windows Vista

7.  Win32  Hosting WPF content inside Win32  Hosting a Win32 window inside a WPF  Windows Forms  Hosting WPF content inside Windows Forms  Windows Forms Control as a WPF content

9.  Traditional applications are designed to create a display, and then bind it to data  In WPF every aspect of the display is driven by Data Binding  WPF is designed to create objects through property sets that drive behavior  With WPF we can create dynamic, data driven presentation systems

10.  PresentationFramework, PresentationCore and milcore are the major code portion of WPF  Only milcore is written in unmanaged code for best integration with DirectX and fine control over memory and execution  All display in WPF is done through DirectX PresentationFrameworkPresentationFramework PresentationCorePresentationCore Common Language Runtime milcoremilcore DirectXDirectX User32User32 KernelKernel

11.  Two kinds of framework elements:  Content and Behavior  Containers of Content and Behavior  Content element can now contain any kind of content, not only text  A ContentControl has a Content property  The Content property specifies any object that can be rendered (text, UIElement)

12.  WPF provides us with several general- purpose panels  Panel is a container that implements a control layout logic  All panel-controls derive from the WPF Panel class  You can create your own panel Layout Align ResizeDock Move

13.  Provides facilities for computing property's value based on other properties  Dependency properties are combination of static fields, registered with meta data and CLR properties  Attached property is a property that is defined by a different type than the element to which the property is applied

14.  Stands for Extensible Application Markup Language  A declarative language to express any CLR object tree by using a set of properties  It is based on standard XML  XAML is the native language for working with WPF

15.  WPF extends the.NET framework events with routed events  Routed event calls all of the handlers in the composition chain  There are three types of routed events  Direct  Bubbling  Tunneling

16.  Commands are actually actions  Commands separate the semantics of an action from its logic  Commands can be executed by multiple sources and implemented differently by multiple targets  Commands can be either enabled or disabled  Open, Close and Print file are an example of commands, each one of these can be executed from the Menu, Toolbar or the application itself

17.  Data binding decouples the view from its data  Data binding provides services for manipulating data automatically  Data manipulation includes displaying, updating, converting, sorting, filtering, and editing data  With data binding you write less code to marshal data backward and forward

18.  A style is a set of properties applied to a content used for visual rendering  Styles allow an application or UI designer to standardize on a particular look of the product  The separation of the presentation and logic in WPF allows designers and programmers to work simultaneously

19.  Data templates provide a great flexibility for defining the presentation of application’s data  A Data Template describes the visual structure of a data object  DataTemplate objects are particularly useful when binding an ItemsControl such as a ListBox to an entire collection  Instead of building view for displaying data, turn the problem on by letting the data to build the view

20.  Controls in WPF have appearance and behavior  Control template provides a powerful solution for changing the appearance of an existing control  The whole structure and appearance of a control can be completely changed by replacing its default template  Custom controls are not required, unless a new behavior is requested

22.  Stands for Extensible Application Markup Language  A declarative language to express any CLR object tree by using a set of properties  It is based on standard XML  XAML is the native language for working with WPF

23. namespace Sela.WPF.Demo { class CSharpDemoWindow : Window { public CSharpDemoWindow() { this.Title = "C# Demo"; this.Height = 200; this.Width = 200; ComboBox comboBox = new ComboBox(); TextBlock item1 = new TextBlock(new Run("Item1")); TextBlock item2 = new TextBlock(new Run("Item2")); TextBlock item3 = new TextBlock(new Run("Item3")); comboBox.Items.Add(item1); comboBox.Items.Add(item2); comboBox.Items.Add(item3); Image image = new Image(); image.Source = new BitmapImage(new Uri("Images/Click.jpg")); StackPanel panel = new StackPanel(); panel.Children.Add(comboBox); panel.Children.Add(image); this.Content = panel; }

24. <Window x:Class="Sela.WPF.Demo.XAMLDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="XAML Demo" Height="200" Width="200">

25.  XAML doesn’t suggest a model for UI flow, although it is still possible, but not recommended <Window x:Class="Sela.WPF.FlowDemo1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Flow Demo" Height="300" Width="300"> Don't click me! <![CDATA[ void button_click(object sender, RoutedEventArgs e) { Button button = sender as Button; button.Content = "I've warned you!!!"; } ]]>

26.  Source files are best recommended for flow-code <Window x:Class="Sela.WPF.FlowDemo2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Flow Demo" Height="300" Width="300"> Don't click me! // FlowDemo2.xaml.cs using System;... namespace Sela.WPF { public partial class FlowDemo2 : Window {... void button_click(object sender, RoutedEventArgs e){ Button button = sender as Button; button.Content = "I've warned you!!!"; }

27. The XAMLPad

29.  Blend is a professional design tool for creating rich and sophisticated WPF content and application interfaces  Expression Blend provides tools for  Vector, Text, 2D and 3D Drawing  Robust Animation, 3D and Media Integration  Customization and Skinning options  Integration with Data and External Resources  Real-time design and markup views

30. Toolbox Menu Interaction Panel Interaction Panel Artboard Result Panel Project, Properties, Resources Panel

31. Designing with Blend

32.  WPF is designed to allow you to create a dynamic, vector based, data driven presentation layer  WPF provides you with the following benefits:  Hardware support for faster UI  Rapid Development  Easy Deployment  Reduced time to market  Reduced integration time  Designer-Developer better collaboration  Sexier 2D and 3D UI  Media and Animation  Win32 and Windows Forms integration

33. Tomer Shamam.NET Technologies Expert Sela Group tomer@sela.co.ilhttp://blogs.microsoft.co.il/blogs/tomershamam/