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: 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 In this demonstration, you will see how to: 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: 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 In this demonstration, you will see how to: 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 In this demonstration, you will see how to: 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 In this demonstration, you will see how to: 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

Module Review and Takeaways 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: 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="Resources\MyResources1.xaml" /> <ResourceDictionary Source="Resources\MyResources2.xaml" /> </ResourceDictionary.MergedDictionaries> </Page.Resources> Merged Resource Dictionary MyResources2.xaml MyResources1.xaml

Demonstration: Sharing Resources in a WPF Application In this demonstration, you will see how to: 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 In this demonstration, you will see how to: 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?

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 In this demonstration, you will see how to: 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 In this demonstration, you will see how to: 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 ?

Module Review and Takeaways Review Questions Best Practices

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

Module Review and Takeaways 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

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to 2 Day - WPF Training by Adil Mughal (20)

More from Adil Mughal (12)

Recently uploaded (20)

2 Day - WPF Training by Adil Mughal

Editor's Notes