2 Day - WPF Training by Adil Mughal

Windows Presentation Foundation Using Visual Studio 2010 & Expression Blend 4 Adil Ahmed Mughal

About Me
Adil Ahmed Mughal
Development Team Lead at Telenor Pakistan
Awarded Microsoft Most Valuable Professional
Microsoft Certified Technology Specialist (MCTS) - .NET Framework 4
INETA, User Group Leader
I blog at http://www.AdilMughal.com
Actively participates in community events

Introduction
Name
Company affiliation
Title/function
Job responsibility
Networking experience
Windows Media Services experience
Your expectations for the course

About This Course
Audience
Course Prerequisites
Course Objectives
Course Structure = Modules -> Lessons

Course Outline
Module 1: Creating an Application by Using WPF
Module 2: Building User Interfaces
Module 3: Customizing Appearance
Module 4: Data Binding
Module 5: Data Binding for Collections
Module 6: Lab Project

Module 1

Module 1: Creating an Application by Using Windows Presentation Foundation (WPF)
Overview of WPF
Creating a Simple WPF Application
Handling Events and Commands

Lesson: Overview of WPF
Background
What Is WPF?
WPF Architecture
Defining User Interfaces in WPF
WPF Capabilities and Features
WPF Application Types

Background
A perspective on User Experience
A look at the Past
User
User32/GDI
MFC
Windows Forms/GDI+
OpenGL
DirectX

Background
A perspective on User Experience
A look at the Past
WPF – why WPF?
Single Integration Solution

What Is WPF?
It is a new foundation for building Windows-based applications by using:
Media
Documents
Application UI
.NET Framework 2.0 Windows Presentation Foundation (WPF) Windows Communication Foundation (WCF) Windows Workflow Foundation (WF) Windows CardSpace (WCS)

WPF Architecture WPF Core Components PresentationFramework Common Language Runtime PresentationCore milcore DirectX User32 Kernel Managed Code Unmanaged Code

Defining User Interfaces in WPF <Window ... > ... <Label>Label</Label> <TextBox>TextBox</TextBox> <RichTextBox ... /> <RadioButton>RadioButton</RadioButton> <CheckBox>CheckBox</CheckBox> <Button>Button</Button> </Window>

WPF Capabilities and Features WPF provides the following capabilities and features:
XAML-based user interfaces
Page layout management
Data binding
2-D and 3-D graphics
Multimedia
Animation
Documents and printing
Security
Accessibility
Localization
Interoperability with Windows Forms controls

WPF Application Types Stand-Alone Applications XAML Browser Applications (XBAPs)

Lesson: Creating a Simple WPF Application
Demonstration: Creating WPF Applications by Using Visual Studio 2008
Defining the Application
Defining Windows or Pages
Adding Controls
Building and Running a WPF Application

Demonstration: Creating WPF Applications by Using Visual Studio 2008
In this demonstration, you will see how to:
Create a stand-alone WPF application
Add controls to your application

Defining the Application <Application xmlns:x=… xmlns=… x:Class="MyApp.App" StartupUri="Window1.xaml"> <Application.Resources> … </Application.Resources> </Application> Visual Studio generates a XAML application file that specifies:
The code-behind class for the application
The startup window or page
Application-wide resources

Defining Windows or Pages A stand-alone application contains windows or pages
They are represented by <Window> or <Page> elements in the XAML file
The code-behind file contains event-handler code
<Window xmlns:x=… xmlns=… x:Class="MyApp.Window1" Title="My Window"> <Grid> … </Grid> </Window> <Page xmlns:x=… xmlns=… x:Class="MyApp.Page1" WindowTitle="My Page"> <Grid> … </Grid> </Page>

Adding Controls Windows and pages contain controls
The controls are represented by XAML elements
<Button> and <TextBox> are examples of these
... <Grid> <TextBox Name="TextBox1" /> <Button Name="Button1">Click here</Button> </Grid> ...

Building and Running a WPF Application You can build and run a WPF application in Visual Studio Stand-alone or browser application Stand-Alone Application Browser Application

Lesson: Handling Events and Commands
The WPF Event Model
Handling WPF Control Events
What Are Routed Events?
Defining Routed Events
What Are Commands?
Demonstration: Defining Commands

The WPF Event Model WPF controls generate events such as:
Clicking buttons
Entering text
Selecting lists
Gaining focus

Handling WPF Control Events Implement event handler method in the code-behind file Specify an event handler in the XAML file <Button Name="Button1" Click="Button1_Click"> Click here </Button> public void Button1_Click( object sender, RoutedEventArgs e) { MessageBox.Show("Hello WPF"); }

What Are Routed Events? Root element Child element #1 Child element #2 Leaf element #1 Leaf element #2 WPF can route events up or down the element tree Event bubbling: Event routed up element tree Event tunneling: Event routed down element tree Tunnel Tunnel Bubble Bubble Item clicked

Defining Routed Events Example of event bubbling
Define leaf elements inside a container element
Handle leaf events at the container level
<StackPanel Button.Click=" CommonClickHandler "> <Button Name="YesButton">Yes</Button> <Button Name="NoButton">No</Button> </StackPanel> private void CommonClickHandler (object sender, RoutedEventArgs e) { Button b = e.Source as Button; ... }

What Are Commands? Commands separate the semantics of an action from its logic
Multiple sources can trigger the same command
You can customize the command logic for different targets
Key concepts in WPF commanding:
Commands
Command sources
Command bindings
Command manager
Examples of predefined commands:
Copy, Cut, and Paste

Demonstration: Defining Commands
Define menu items that perform Copy and Paste commands
Use the native ability of the TextBox to process the Copy and Paste commands

Module Review and Takeaways
Time to hands on WPF
Create a New Project in Visual Studio
Gets hands on XAML
Drag and Drop few controls
It will be as simple as Windows Forms

Module 2

Module 2: Building User Interfaces
Defining Layout
Building User Interfaces by Using Content Controls
Building User Interfaces by Using Items Controls

Lesson: Defining Layout
WPF Layout Model
WPF Layout Classes
Demonstration: Defining Layout by Using Panels
Demonstration: Defining Layout by Using Grids

WPF Page Layout Model
Abstract rectangular bounding box
Retrieve by calling GetLayout on a FrameworkElement
Measurement Pass 1 Hello World! Evaluate each member of the Children collection to determine Its DesiredSize Arrangement Pass 2 Window or Page element Determine the final size of each child object and place within Its layout slot Layout class Child objects

WPF Layout Classes Canvas VirtualizingStackPanel DockPanel Grid StackPanel WrapPanel Panel Background Children ZIndex

Demonstration: Defining Layout by Using Panels
Use the Canvas class
Use the StackPanel class
Use the WrapPanel class
Use the DockPanel class

Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.

Demonstration: Defining Layout by Using Grids In this demonstration, you will see how to use the Grid class

Lesson: Building User Interfaces by Using Content Controls
What Is a Content Control?
Demonstration: Creating a User Interface by Using Content Controls
What Is a Headered Content Control?
Demonstration: Creating a User Interface by Using Headered Content Controls

What Is a Content Control?
Common content controls:
Button
CheckBox
GroupItem
Label
RadioButton
RepeatButton
ToggleButton
ToolTip
Contains a single item
Has a Content property
Examples Text DateTime UIElement Multiple objects Button This is text content of a Button 04/03/2007 13:06

Demonstration: Creating a User Interface by Using Content Controls
Use the ContentControl class
Use the Border Decorator class

What Is a Headered Content Control?
Headered content controls:
Expander
GroupBox
TabItem
Specialized ContentControl
Has a Content property
Has a Header property
Example TabItem header GroupBox Expander

Demonstration: Creating a User Interface by Using Headered Content Controls
Use the TabItem class
Use the GroupBox class
Use the Expander class

Lesson: Building User Interfaces by Using Items Controls
What Is an Items Control?
Handling Item Selection
Demonstration: Creating a User Interface by Using Items Controls

What Is an Items Control?
Contains multiple objects
Has an Items property
Has an ItemsSource property
Common items controls:
ComboBox
ListBox
Menu
StatusBar
TabControl
ToolBar
TreeView
Can be different types ItemsSource Items

Handling Item Selection Attach event handler <ListBox SelectionChanged="ListBox1_SelectionChanged"> ... </ListBox> Define event handler public void ListBox1_SelectionChanged( object sender, SelectionChangedEventArgs e) { ... }

Demonstration: Creating a User Interface by Using Items Controls In this demonstration, you will see how to use the ListBox class

Review Questions
When would you use the DockPanel , Border , StackPanel , and Grid layout classes?
How do you define the content for a Button element?
How do you define the child items for a ListView element?
Which assemblies must you reference to integrate Windows Forms controls in your WPF applications?
Which WPF element do you use to host Windows Forms controls in your WPF applications?

Module 3

Module 3: Customizing Appearance
Sharing Logical Resources in an Application
Creating Consistent User Interfaces by Using Styles
Changing the Appearance of Controls by Using Control Templates
Enhancing User Interfaces by Using Triggers and Animations

Lesson: Sharing Logical Resources in an Application
What Are Resources?
Defining Resources
Referencing Resources in XAML
Referencing Resources Programmatically
Reusing Resources Across Applications
Demonstration: Sharing Resources in a WPF Application
Defining Localized Resources

What Are Resources? Resources provide a simple way to reuse commonly defined objects and values For example: brushes, styles, and control templates XAML Code

Defining Resources You can define resources at various levels:
Application scope
Window or Page scope
Element-level scope
XAML <Window.Resources> <SolidColorBrush x:Key="blueBrush" Color="Blue"/> <SolidColorBrush x:Key="whiteBrush" Color="White"/> <sys:Double x:Key="myValue">100</sys:Double> </Window.Resources>

Referencing Resources in XAML To reference a resource statically: PropertyName=" {StaticResource ResourceKey } " <Button Background="{StaticResource blueBrush}" Foreground="{StaticResource whiteBrush}"> Text </Button> To reference a resource dynamically: PropertyName=" {DynamicResource ResourceKey } " <Button Background="{DynamicResource blueBrush}" Foreground="{DynamicResource whiteBrush}"> Text </Button>

Referencing Resources Programmatically FindResource method: SolidColorBrush brush = (SolidColorBrush) this.FindResource("whiteBrush"); SetResourceReference method: this.myButton.SetResourceReference( Button.BackgroundProperty, "whiteBrush"); Resources property: SolidColorBrush brush = (SolidColorBrush) this.Resources[ "whiteBrush"]; Or TryFindResource

Reusing Resources Across Applications Merged resource dictionaries: <Page.Resources> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="ResourcesMyResources1.xaml" /> <ResourceDictionary Source="ResourcesMyResources2.xaml" /> </ResourceDictionary.MergedDictionaries> </Page.Resources> Merged Resource Dictionary MyResources2.xaml MyResources1.xaml

Demonstration: Sharing Resources in a WPF Application
Define and reference resources by using XAML/ Programmatically

Defining Localized Resources WPF provides several localization features:
Automatic layout
Localization attributes and comments
Bidirectional content support
FlowDirection property
Number substitution
Localized content in satellite assemblies

Lesson: Creating Consistent User Interfaces by Using Styles
What Are Styles?
Defining Styles
Setting Styles Programmatically

What Are Styles? You use styles to apply property values to elements: You typically define styles in Resources sections in XAML: Enables you to represent user interface properties such as font and background color as styles
Enables you to apply styles to multiple controls
Promotes consistent appearance of controls
Style Control <Resources />

Defining Styles <Page.Resources> <Style x:Key="myStyle" TargetType="{x:Type Label}"> <Setter Property="Background" Value="Blue" /> <Setter Property="Foreground" Value="White" /> </Style> </Page.Resources> Style for all Label elements To define a style that sets properties for all elements of a specified type: Define a < Style> element 1 Set the TargetType property to an element type 2 Define < Setter> child elements to set property values 3

Setting Styles Programmatically textblock1.Style = (Style)(Resources["TitleText"]); To apply a style programmatically: You can also modify styles programmatically to add, remove, or modify styles in the Resources collection Index into the Resources collection 1 Cast the resource object into a Style instance 2 Set the Style property on the control 3

Lesson: Changing the Appearance of Controls by Using Control Templates
What Are Control Templates?
Defining a Control Template for a Content Control
Providing User Customization by Using Template Bindings
Demonstration: Changing the Appearance of Controls by Using Control Templates

What Are Control Templates? Behavior class ControlTemplate Controls have built-in appearance and behavior: To customize the appearance and structure of a control:
The behavior is defined by a predefined control class
The appearance is defined by a default ControlTemplate
Define a new ControlTemplate for the control
Control

Defining a Control Template for a Content Control To define a control template for a content control:
Define a < Style> for a type of control
Set the Template property to a ControlTemplate
Define a ContentPresenter for the control content
<Style TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Ellipse Fill="Blue"/> <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Top"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>

Providing User Customization by Using Template Bindings You use a template binding to define properties in the control template: Enables the control template to use ambient property values <Style TargetType="ListBox"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBox"> <Border Background="{TemplateBinding ListBox.Background}" CornerRadius="5"> ... </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>

Demonstration: Changing the Appearance of Controls by Using Control Templates
Modify the appearance of content controls by using control templates

Lesson: Enhancing User Interfaces by Using Triggers and Animations
What Are Triggers?
Defining Property Triggers
What Are Animations?
Defining Animations
Demonstration: Enhancing Controls by Using Triggers and Animations

What Are Triggers?
MultiTrigger
DataTrigger and MultiDataTrigger
A trigger sets properties or starts actions: Triggered by property value changes or events Trigger types:
EventTrigger
PropertyTrigger
Trigger actions enable triggers to perform actions:
EnterActions and ExitActions properties
Actions property for event triggers

Defining Property Triggers To define a property trigger: Style TargetType="{x:Type ListBoxItem}"> <Setter Property="Opacity" Value="0.5" /> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="Opacity" Value="1.0" /> </Trigger> </Style.Triggers> </Style> Define a Trigger element 1 Specify the property that initiates the trigger 2 Define the behavior of the trigger 3

What Are Animations? Animations enable you to animate controls and graphical objects:
Animate properties such as Width , Height , and Opacity
Grouped together by using Storyboard objects
Types of animation:
ColorAnimation
DoubleAnimation
PointAnimation
Custom

Defining Animations You add animation elements to a Storyboard element to define animations <Rectangle Name="MyRectangle" ...> <Rectangle.Triggers> <EventTrigger RoutedEvent="Mouse.MouseEnter"> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="Opacity" To="0.0" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle> EventTrigger Trigger action Storyboard Animation

Demonstration: Enhancing Controls by Using Triggers and Animations In this demonstration, you will see how to enhance the visual impact of controls by using triggers and animations

Lab Review
How do you use multiple XAML resource files in a merged dictionary?
How do you create a Style that applies to all elements of a particular type?
How do you modify the structure and appearance of a control?
How do you create a property trigger?
How do you create a Style that applies to selected elements?

Windows Presentation Foundation Using Visual Studio 2010 & Expression Blend 4 Adil Ahmed Mughal

Module 4

Module 4: Data Binding
Overview of Data Binding
Creating a Data Binding
Implementing Property Change Notification

Lesson: Overview of Data Binding
The WPF Data-Binding Model
Binding Sources and Binding Targets
Data-Binding Modes

The WPF Data-Binding Model UI Element Managed Object ADO.NET Data Source XML Data

Binding Sources and Binding Targets Data-binding components:
Binding target object
Binding target dependency property
Binding source
Path to the binding source property
Dependency Property Property Binding Target Object Binding Source Object

Data-Binding Modes Binding Target Binding Source Binding Object OneWay TwoWay OneWayToSource OneTime WPF supports four data-binding modes:
OneWay
TwoWay
OneWayToSource
OneTime

Lesson: Creating a Data Binding
Binding to a Class Property
Binding Multiple Controls to a Class
Binding to a Full Object
Binding to XML Data
Binding to Another User Interface Element
Demonstration: Binding to Different Data Sources

Demonstration: Binding to Different Data Sources
Binding

Lesson: Implementing Property Change Notification
What Are Property Change Notifications?
Propagating Property Change Notifications to a Binding Target
Propagating Value Changes to a Binding Source
Demonstration: Triggering Source Updates

What Are Property Change Notifications? Binding Target Binding Source Binding Object OneWay TwoWay OneWayToSource Bindings listen for changes in the target property and propagate them back to the source The time when the update happens is defined by the UpdateSourceTrigger property UpdateSourceTrigger

Propagating Property Change Notifications to a Binding Target public class Person : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; // Raise the PropertyChanged event // when property values in the class change. } To implement the INotifyPropertyChanged interface:
Declare the PropertyChanged event
Create the OnPropertyChanged method
Call the OnPropertyChanged method
Use dependency properties for visual elements

Propagating Value Changes to a Binding Source <TextBox Width="100"> <TextBox.Text> <Binding Source="{StaticResource myData}" Path="ColorName" UpdateSourceTrigger="PropertyChanged" /> </TextBox.Text> </TextBox> Specify the timing of binding source updates by using the UpdateSourceTrigger property
Default
Explicit
LostFocus
PropertyChanged

Demonstration: Triggering Source Updates
Propagate changes to the binding target
Propagate value changes to a binding source

Lab Review
How do you create a data binding?
Which interface do you use to implement property change notification?
Which interface do you use to implement a custom value converter?
How do you define validation rules for a Binding ?

Review Questions
Best Practices

Module 5

Module 5: Data Bindings to Collections
Binding to Collections of Objects
Presenting Data by Using Collection Views
Presenting Data by Using Data Templates

Lesson: Binding to Collections of Objects
Overview of Binding to Collections
What Is an Observable Collection?
Defining an Observable Collection Class
Introduction to LINQ
Binding to ADO.NET Data Objects

Overview of Binding to Collections You can bind item controls to a collection of objects For example: bind a ListBox control to a database result set ItemsSource Property Value Binding Target Binding Source ItemsControl Object Collection Object OneWay Binding Object

What Is an Observable Collection? Venus Earth Mars Ceres Jupiter Saturn Uranus Neptune Pluto Eris Implements INotifyCollectionChanged ItemsSource property Venus Earth Mars Jupiter Saturn Uranus Neptune Mercury Observable Collection New data items CollectionChanged

Defining an Observable Collection Class To define and use an observable collection class: public class NameList : ObservableCollection<Person> { ... public class PersonName { ... } } <Window ... xmlns:c="clr-namespace:MySample" > <Window.Resources> <c:NameList x:Key="list"/> </Window.Resources> <ListBox ItemsSource = "{Binding Source={StaticResource list}}" /> </Window>
Define a class that extends ObservableCollection(T)
Create a XAML resource to represent the class, and bind to it

Introduction to LINQ . NET Language Integrated Query C# Visual Basic Others Standard Query Operators DLinq (ADO.NET) XLinq ( System.Xml ) CLR Objects Relational Data XML

Binding to ADO.NET Data Objects WPF enables you to bind to ADO.NET classes such as:
DataSet
DataTable
DataView
To bind to an ADO.NET object:
Populate an ADO.NET object such as DataSet
Set the DataContext property of a control such as ListBox
Create bindings to the required data objects by using properties such as ItemsSource

Lesson: Presenting Data by Using Data Templates
What Is a Data Template?
Defining and Using a Data Template
Defining a Data Template as a Resource
Using Data Triggers in a Data Template

What Is a Data Template? Andy Jacobs 43 Robert Brown 34 Kelly Krout 63 Lola Jacobsen 23 MySample.Person MySample.Person MySample.Person MySample.Person Data Template

Defining and Using a Data Template <ListBox ItemsSource="{Binding Source={StaticResource list}}"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding Path=FirstName}" /> <TextBlock Text="{Binding Path=LastName}"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> To define and use a data template:
Define a DataTemplate element
Add it to the ItemTemplate or ContentTemplate property

Defining a Data Template as a Resource <Window.Resources> <DataTemplate x:Key="myDataTemplate"> <StackPanel> <TextBlock Text="{Binding Path=FirstName}" /> <TextBlock Text="{Binding Path=LastName}"/> </StackPanel> </DataTemplate> </Window.Resources> <ListBox ItemsSource="{Binding Source={StaticResource list}}" ItemTemplate="{StaticResource myDataTemplate}" /> You define reusable data templates as resources by setting the x:Key or DataType property on the DataTemplate

Using Data Triggers in a Data Template <DataTemplate x:Key="myDataTemplate"> <DataTemplate.Triggers> <DataTrigger Binding="{Binding Path=Gender}" Value="Male"> <Setter TargetName="border" Property="Foreground" Value="Blue"/> </DataTrigger> </DataTemplate.Triggers> </DataTemplate> To define a data trigger:
Define a DataTrigger element
Set the Binding and Value properties on the DataTrigger
Add Setter child elements to set control properties

Review

Contact Information
Blog:
http://www.AdilMughal.com
Email:
[email_address]
a [email_address]
User Group:
DevNext ( http://www.devnextug.org )
Emerging .NET Devs ( http://eDotNetDevs.org )

2 Day - WPF Training by Adil Mughal

by Adil Mughal on Mar 26, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 315

Statistics

2 Day - WPF Training by Adil Mughal — Presentation Transcript