Windows Presentation Foundation

Agenda Introduction Developing Applications WPF and WF interoperability Custom Controls Styles and Templates Data Binding Graphics Not covered sections Resume

Introduction

Progress WinAPI MFC Windows Forms WPF

WPF Components

Main features New GUI core Declarative programming using XAML Layout system Styles Control Templates Data Templates Flexible Data Binding Graphics and Multimedia support Improved security model Unified document format (XML Paper Specification) Compatibility with Windows Forms

Developing Applications

Developer Environment Visual Studio 2005.NET 3.0 Visual Studio Extensions Windows SDK

Application types XAML browser applications Stand-alone applications –Windows Applications –Hosted in WPF Navigation Window

XAML browser application WPF Everywhere for XAML + browser plug-in Installed using ClickOnce Run in browser Internet Zone security

Stand-alone application User permissions Like a standard Windows Application

Creating stand-alone application Create WPF project –Windows Application (WPF) –Custom Control Library (WPF) Create class –User Control (WPF) –Custom Control (WPF) –Window (WPF) Create styles and templates –Resource dictionary –Local resource

Kinds of WPF Project objects User control –CS code-behind file –XAML declaration Custom control –CS implementation –Style in XAML resource dictionary XAML Resource –Style or Data Template or Control Template in XAML resource dictionary

WPF Application Project structure Application class (User control) –Based on System.Windows.Application –Build action – ApplicationDefinition –StartupUri property in XAML – Window class Window class (User control) –Based on System.Windows.Window User Control class (User control) –Based on System.Windows.Controls.UserControl Custom Control class (Custom control) –Based on System.Windows.Controls.Control –Overrides metadata in static constructor Resource Dictionary (XAML Resource) –Top file tag ResourceDictionary –Main file “themes\generic.xaml”

WPF Application Project screen shot

WPF and WF interoperability

WPF and WF interoperability Agenda Hosting a Windows Form Control in WPF Hosting a WPF Control in Windows Forms Troubleshooting Hybrid Applications

Hosting a WF Control in WPF 1.Create Windows Application (WPF) project 2.Add reference to the WindowsFormsIntegration assembly 3.Add reference to the System.Windows.Forms assembly 4.Create System.Windows.Forms.Integration. WindowsFormsHost host object 5.Set WF control to Child property of host object 6.Add host object onto WPF panel (for example, Window)

Hosting a WF Control in WPF - sample // Creating Windows Form control MaskedTextBox mtbDate = new MaskedTextBox("00/00/0000"); // Creating Integration host WindowsFormsHost host = new WindowsFormsHost(); host.Child = mtbDate; // Appending host to Window this.AddChild(host);

Hosting a WPF Control in WF 1.Create Windows Application (WinForms) project 2.Add references to WindowsFormsIntegration, PresentationCore, PresentationFramework and WindowsBase assemblies 3.Add into project file the following line : Just after 5.Create System.Windows.Forms.Integration.ElementHost host object 6.Add WPF control to host object 7.Add host object on WF Form

Hosting a WPF Control in WF // Create WPF Control TextBlock textBlock = new TextBlock(); textBlock.Text = "WPF TextBlock control"; // Create host ElementHost host = new ElementHost(); host.Child = textBlock; host.Dock = DockStyle.Fill; // Add host to Form this.Controls.Add(host);

Troubleshooting Hybrid Applications Overlapping Controls Child Property Scaling Adapter Nesting Focus Property Mapping Layout-related Properties on Hosted Content Navigation Applications Opacity and Layering Dispose Enabling Visual Styles Licensed Controls

Custom Controls

Models for Control Authoring Restyle existed controls Derive from UserControl Derive from Control Derive from FrameworkElement

Restyle existed controls Simplest way No additional properties Custom control logic only in XAML

Restyle existed controls – example

Restyle existed controls – screen shot

Derive from UserControl Built like Application Composite of existed controls No complex customization

Deriving from UserControl - example <TextBlock Text="{Binding ElementName=parent,Path=LabelText}" Margin="5"/> <TextBox Text="{Binding ElementName=parent,Path=ValueText}" Margin="5"/>

Deriving from UserControl – example <Window x:Class="UserControls.Window" xmlns:l="clr-namespace:UserControls"> <l:UserControl LabelText="Label Text“ ValueText="Value Text"/>

Deriving from UserControl – screen shot

Deriving from Control Flexible way Like most WPF controls Support Control Templates Support Themes

Deriving from Control - example

Deriving from FrameworkElement Own Render way Appearance is defined by own render logic

Styles and Templates

Styling and Templating Resources Style structure Data Templates Control Templates Triggers

Styling and Templating - Resources Store local Styles, Data Templates and Control Templates Apply to FrameworkElement and FrameworkContentElement Share resources via Resource Dictionaries Static and Dynamic resources

Resources example <ResourceDictionary xmlns=" xmlns:x=" xmlns:local="clr-namespace:ControlLibrary">

Styling and Templating – Style structure Naming and Referencing Deriving Styles Setters Data Template Control Template Triggers

Styling and Templating – Data Templates Name and Data Type Visual data content Content Control and Content Presenter Triggers

Styling and Templating – Control Templates Name and Target Type Visual data content Template Attributes Triggers

Styling and Templating – Triggers Trigger and Multi Trigger Data Trigger and Multi Data Trigger Event Trigger and Multi Event Trigger

Data Binding

Binding a dependency property to a CLR property Path == DaraSource Binding only to dependency properties

Data Context 1.The binding looks for a non-null DataContext on the TextBox itself 2.The binding looks for a non-null DataContext on the Grid 3.The binding looks for a non-null DataContext on the Window

Master-Detail Binding public class Families : ObservableCollection { } public class Family { string familyName; public string FamilyName { get { return familyName; } set { familyName = value; } } People members; public People Members { get { return members; } set { members = value; } } public class People : ObservableCollection { } public class Person { string name; public string Name { get { return name; } set { name = value; } } int age; public int Age { get { return age; } set { age = value; } }

Master-Detail Binding <?Mapping XmlNamespace="local" ClrNamespace="MasterDetailBinding" ?>...

Master-Detail Binding Families: <ListBox Grid.Row="1" Grid.Column="0" IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding}">

Graphics

Not covered sections

Sections Security model Web Browser Applications Using multimedia and graphics Easy to restyle application

Resume

Advantages WPF has very flexible model XAML is a great advance in declarative programming Easy to use multimedia and graphics Easy to restyle application

Disadvantages WPF functionality is not so high as WF one WPF and WF interoperability is buggy VS support of XAML is buggy and not full Most available WPF documentation is out of date