Part of the Microsoft.NET Framework 3.0 Tomer Shamam.NET Technologies Expert Sela Group

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

 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

WPF Showoff

Windows XP Home/Pro SP2 Windows Server 2003 Windows Vista

 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

 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

 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

 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)

 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

 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

 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

 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

 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

 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

 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

 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

 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

 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

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; }

<Window x:Class="Sela.WPF.Demo.XAMLDemo" xmlns=" xmlns:x=" Title="XAML Demo" Height="200" Width="200">

 XAML doesn’t suggest a model for UI flow, although it is still possible, but not recommended <Window x:Class="Sela.WPF.FlowDemo1" xmlns=" xmlns:x=" 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!!!"; } ]]>

 Source files are best recommended for flow-code <Window x:Class="Sela.WPF.FlowDemo2" xmlns=" xmlns:x=" 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!!!"; }

The XAMLPad

 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

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

Designing with Blend

 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

Tomer Shamam.NET Technologies Expert Sela Group