Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2 Day - WPF Training by Adil Mughal

5,007 views

Published on

Slides for 2 day training session on Windows Presentation Foundation

Published in: Technology
  • Could you please allow me to download these slides ?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

2 Day - WPF Training by Adil Mughal

  1. 1. Windows Presentation Foundation Using Visual Studio 2010 & Expression Blend 4 Adil Ahmed Mughal
  2. 2. About Me <ul><li>Adil Ahmed Mughal </li></ul><ul><li>Development Team Lead at Telenor Pakistan </li></ul><ul><li>Awarded Microsoft Most Valuable Professional </li></ul><ul><li>Microsoft Certified Technology Specialist (MCTS) - .NET Framework 4 </li></ul><ul><li>INETA, User Group Leader </li></ul><ul><li>I blog at http://www.AdilMughal.com </li></ul><ul><li>Actively participates in community events </li></ul>
  3. 3. Introduction <ul><li>Name </li></ul><ul><li>Company affiliation </li></ul><ul><li>Title/function </li></ul><ul><li>Job responsibility </li></ul><ul><li>Networking experience </li></ul><ul><li>Windows Media Services experience </li></ul><ul><li>Your expectations for the course </li></ul>
  4. 4. About This Course <ul><li>Audience </li></ul><ul><li>Course Prerequisites </li></ul><ul><li>Course Objectives </li></ul><ul><li>Course Structure = Modules -> Lessons </li></ul>
  5. 5. Course Outline <ul><li>Module 1: Creating an Application by Using WPF </li></ul><ul><li>Module 2: Building User Interfaces </li></ul><ul><li>Module 3: Customizing Appearance </li></ul><ul><li>Module 4: Data Binding </li></ul><ul><li>Module 5: Data Binding for Collections </li></ul><ul><li>Module 6: Lab Project </li></ul>
  6. 6. Module 1
  7. 7. Module 1: Creating an Application by Using Windows Presentation Foundation (WPF) <ul><li>Overview of WPF </li></ul><ul><li>Creating a Simple WPF Application </li></ul><ul><li>Handling Events and Commands </li></ul>
  8. 8. Lesson: Overview of WPF <ul><li>Background </li></ul><ul><li>What Is WPF? </li></ul><ul><li>WPF Architecture </li></ul><ul><li>Defining User Interfaces in WPF </li></ul><ul><li>WPF Capabilities and Features </li></ul><ul><li>WPF Application Types </li></ul>
  9. 9. Background <ul><li>A perspective on User Experience </li></ul><ul><li>A look at the Past </li></ul><ul><ul><li>User </li></ul></ul><ul><ul><li>User32/GDI </li></ul></ul><ul><ul><li>MFC </li></ul></ul><ul><ul><li>Windows Forms/GDI+ </li></ul></ul><ul><ul><li>OpenGL </li></ul></ul><ul><ul><li>DirectX </li></ul></ul>
  10. 10. Background <ul><li>A perspective on User Experience </li></ul><ul><li>A look at the Past </li></ul><ul><ul><li>WPF – why WPF? </li></ul></ul><ul><ul><li>Single Integration Solution </li></ul></ul>
  11. 11. What Is WPF? <ul><li>It is a new foundation for building Windows-based applications by using: </li></ul><ul><ul><li>Media </li></ul></ul><ul><ul><li>Documents </li></ul></ul><ul><ul><li>Application UI </li></ul></ul>.NET Framework 2.0 Windows Presentation Foundation (WPF) Windows Communication Foundation (WCF) Windows Workflow Foundation (WF) Windows CardSpace (WCS)
  12. 12. WPF Architecture WPF Core Components PresentationFramework Common Language Runtime PresentationCore milcore DirectX User32 Kernel Managed Code Unmanaged Code
  13. 13. Defining User Interfaces in WPF <Window ... > ... <Label>Label</Label> <TextBox>TextBox</TextBox> <RichTextBox ... /> <RadioButton>RadioButton</RadioButton> <CheckBox>CheckBox</CheckBox> <Button>Button</Button> </Window>
  14. 14. WPF Capabilities and Features WPF provides the following capabilities and features: <ul><li>XAML-based user interfaces </li></ul><ul><li>Page layout management </li></ul><ul><li>Data binding </li></ul><ul><li>2-D and 3-D graphics </li></ul><ul><li>Multimedia </li></ul><ul><li>Animation </li></ul><ul><li>Documents and printing </li></ul><ul><li>Security </li></ul><ul><li>Accessibility </li></ul><ul><li>Localization </li></ul><ul><li>Interoperability with Windows Forms controls </li></ul>
  15. 15. WPF Application Types Stand-Alone Applications XAML Browser Applications (XBAPs)
  16. 16. Lesson: Creating a Simple WPF Application <ul><li>Demonstration: Creating WPF Applications by Using Visual Studio 2008 </li></ul><ul><li>Defining the Application </li></ul><ul><li>Defining Windows or Pages </li></ul><ul><li>Adding Controls </li></ul><ul><li>Building and Running a WPF Application </li></ul>
  17. 17. Demonstration: Creating WPF Applications by Using Visual Studio 2008 <ul><li>In this demonstration, you will see how to: </li></ul><ul><li>Create a stand-alone WPF application </li></ul><ul><li>Add controls to your application </li></ul>
  18. 18. Defining the Application <Application xmlns:x=… xmlns=… x:Class=&quot;MyApp.App&quot; StartupUri=&quot;Window1.xaml&quot;> <Application.Resources> … </Application.Resources> </Application> Visual Studio generates a XAML application file that specifies: <ul><li>The code-behind class for the application </li></ul><ul><li>The startup window or page </li></ul><ul><li>Application-wide resources </li></ul>
  19. 19. Defining Windows or Pages A stand-alone application contains windows or pages <ul><li>They are represented by <Window> or <Page> elements in the XAML file </li></ul><ul><li>The code-behind file contains event-handler code </li></ul><Window xmlns:x=… xmlns=… x:Class=&quot;MyApp.Window1&quot; Title=&quot;My Window&quot;> <Grid> … </Grid> </Window> <Page xmlns:x=… xmlns=… x:Class=&quot;MyApp.Page1&quot; WindowTitle=&quot;My Page&quot;> <Grid> … </Grid> </Page>
  20. 20. Adding Controls Windows and pages contain controls <ul><li>The controls are represented by XAML elements </li></ul><ul><li><Button> and <TextBox> are examples of these </li></ul>... <Grid> <TextBox Name=&quot;TextBox1&quot; /> <Button Name=&quot;Button1&quot;>Click here</Button> </Grid> ...
  21. 21. 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
  22. 22. Lesson: Handling Events and Commands <ul><li>The WPF Event Model </li></ul><ul><li>Handling WPF Control Events </li></ul><ul><li>What Are Routed Events? </li></ul><ul><li>Defining Routed Events </li></ul><ul><li>What Are Commands? </li></ul><ul><li>Demonstration: Defining Commands </li></ul>
  23. 23. The WPF Event Model WPF controls generate events such as: <ul><li>Clicking buttons </li></ul><ul><li>Entering text </li></ul><ul><li>Selecting lists </li></ul><ul><li>Gaining focus </li></ul>
  24. 24. Handling WPF Control Events Implement event handler method in the code-behind file Specify an event handler in the XAML file <Button Name=&quot;Button1&quot; Click=&quot;Button1_Click&quot;> Click here </Button> public void Button1_Click( object sender, RoutedEventArgs e) { MessageBox.Show(&quot;Hello WPF&quot;); }
  25. 25. 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
  26. 26. Defining Routed Events Example of event bubbling <ul><li>Define leaf elements inside a container element </li></ul><ul><li>Handle leaf events at the container level </li></ul><StackPanel Button.Click=&quot; CommonClickHandler &quot;> <Button Name=&quot;YesButton&quot;>Yes</Button> <Button Name=&quot;NoButton&quot;>No</Button> </StackPanel> private void CommonClickHandler (object sender, RoutedEventArgs e) { Button b = e.Source as Button; ... }
  27. 27. What Are Commands? Commands separate the semantics of an action from its logic <ul><li>Multiple sources can trigger the same command </li></ul><ul><li>You can customize the command logic for different targets </li></ul>Key concepts in WPF commanding: <ul><li>Commands </li></ul><ul><li>Command sources </li></ul><ul><li>Command bindings </li></ul><ul><li>Command manager </li></ul>Examples of predefined commands: <ul><li>Copy, Cut, and Paste </li></ul>
  28. 28. Demonstration: Defining Commands <ul><li>In this demonstration, you will see how to: </li></ul><ul><li>Define menu items that perform Copy and Paste commands </li></ul><ul><li>Use the native ability of the TextBox to process the Copy and Paste commands </li></ul>
  29. 29. Module Review and Takeaways <ul><li>Time to hands on WPF </li></ul><ul><li>Create a New Project in Visual Studio </li></ul><ul><li>Gets hands on XAML </li></ul><ul><li>Drag and Drop few controls </li></ul><ul><li>It will be as simple as Windows Forms </li></ul>
  30. 30. Module 2
  31. 31. Module 2: Building User Interfaces <ul><li>Defining Layout </li></ul><ul><li>Building User Interfaces by Using Content Controls </li></ul><ul><li>Building User Interfaces by Using Items Controls </li></ul>
  32. 32. Lesson: Defining Layout <ul><li>WPF Layout Model </li></ul><ul><li>WPF Layout Classes </li></ul><ul><li>Demonstration: Defining Layout by Using Panels </li></ul><ul><li>Demonstration: Defining Layout by Using Grids </li></ul>
  33. 33. WPF Page Layout Model <ul><li>Abstract rectangular bounding box </li></ul><ul><li>Retrieve by calling GetLayout on a FrameworkElement </li></ul>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
  34. 34. WPF Layout Classes Canvas VirtualizingStackPanel DockPanel Grid StackPanel WrapPanel Panel Background Children ZIndex
  35. 35. Demonstration: Defining Layout by Using Panels <ul><li>In this demonstration, you will see how to: </li></ul><ul><li>Use the Canvas class </li></ul><ul><li>Use the StackPanel class </li></ul><ul><li>Use the WrapPanel class </li></ul><ul><li>Use the DockPanel class </li></ul>
  36. 36. Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.
  37. 37. Demonstration: Defining Layout by Using Grids In this demonstration, you will see how to use the Grid class
  38. 38. Lesson: Building User Interfaces by Using Content Controls <ul><li>What Is a Content Control? </li></ul><ul><li>Demonstration: Creating a User Interface by Using Content Controls </li></ul><ul><li>What Is a Headered Content Control? </li></ul><ul><li>Demonstration: Creating a User Interface by Using Headered Content Controls </li></ul>
  39. 39. What Is a Content Control? <ul><li>Common content controls: </li></ul><ul><li>Button </li></ul><ul><li>CheckBox </li></ul><ul><li>GroupItem </li></ul><ul><li>Label </li></ul><ul><li>RadioButton </li></ul><ul><li>RepeatButton </li></ul><ul><li>ToggleButton </li></ul><ul><li>ToolTip </li></ul><ul><li>Contains a single item </li></ul><ul><li>Has a Content property </li></ul>Examples Text DateTime UIElement Multiple objects Button This is text content of a Button 04/03/2007 13:06
  40. 40. Demonstration: Creating a User Interface by Using Content Controls <ul><li>In this demonstration, you will see how to: </li></ul><ul><li>Use the ContentControl class </li></ul><ul><li>Use the Border Decorator class </li></ul>
  41. 41. Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.
  42. 42. What Is a Headered Content Control? <ul><li>Headered content controls: </li></ul><ul><li>Expander </li></ul><ul><li>GroupBox </li></ul><ul><li>TabItem </li></ul><ul><li>Specialized ContentControl </li></ul><ul><li>Has a Content property </li></ul><ul><li>Has a Header property </li></ul>Example TabItem header GroupBox Expander
  43. 43. Demonstration: Creating a User Interface by Using Headered Content Controls <ul><li>In this demonstration, you will see how to: </li></ul><ul><li>Use the TabItem class </li></ul><ul><li>Use the GroupBox class </li></ul><ul><li>Use the Expander class </li></ul>
  44. 44. Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.
  45. 45. Lesson: Building User Interfaces by Using Items Controls <ul><li>What Is an Items Control? </li></ul><ul><li>Handling Item Selection </li></ul><ul><li>Demonstration: Creating a User Interface by Using Items Controls </li></ul>
  46. 46. What Is an Items Control? <ul><li>Contains multiple objects </li></ul><ul><li>Has an Items property </li></ul><ul><li>Has an ItemsSource property </li></ul><ul><li>Common items controls: </li></ul><ul><li>ComboBox </li></ul><ul><li>ListBox </li></ul><ul><li>Menu </li></ul><ul><li>StatusBar </li></ul><ul><li>TabControl </li></ul><ul><li>ToolBar </li></ul><ul><li>TreeView </li></ul>Can be different types ItemsSource Items
  47. 47. Handling Item Selection Attach event handler <ListBox SelectionChanged=&quot;ListBox1_SelectionChanged&quot;> ... </ListBox> Define event handler public void ListBox1_SelectionChanged( object sender, SelectionChangedEventArgs e) { ... }
  48. 48. Demonstration: Creating a User Interface by Using Items Controls In this demonstration, you will see how to use the ListBox class
  49. 49. Module Review and Takeaways <ul><li>Review Questions </li></ul><ul><li>When would you use the DockPanel , Border , StackPanel , and Grid layout classes? </li></ul><ul><li>How do you define the content for a Button element? </li></ul><ul><li>How do you define the child items for a ListView element? </li></ul><ul><li>Which assemblies must you reference to integrate Windows Forms controls in your WPF applications? </li></ul><ul><li>Which WPF element do you use to host Windows Forms controls in your WPF applications? </li></ul>
  50. 50. Module 3
  51. 51. Module 3: Customizing Appearance <ul><li>Sharing Logical Resources in an Application </li></ul><ul><li>Creating Consistent User Interfaces by Using Styles </li></ul><ul><li>Changing the Appearance of Controls by Using Control Templates </li></ul><ul><li>Enhancing User Interfaces by Using Triggers and Animations </li></ul>
  52. 52. Lesson: Sharing Logical Resources in an Application <ul><li>What Are Resources? </li></ul><ul><li>Defining Resources </li></ul><ul><li>Referencing Resources in XAML </li></ul><ul><li>Referencing Resources Programmatically </li></ul><ul><li>Reusing Resources Across Applications </li></ul><ul><li>Demonstration: Sharing Resources in a WPF Application </li></ul><ul><li>Defining Localized Resources </li></ul>
  53. 53. What Are Resources? Resources provide a simple way to reuse commonly defined objects and values For example: brushes, styles, and control templates XAML Code
  54. 54. Defining Resources You can define resources at various levels: <ul><li>Application scope </li></ul><ul><li>Window or Page scope </li></ul><ul><li>Element-level scope </li></ul>XAML <Window.Resources> <SolidColorBrush x:Key=&quot;blueBrush&quot; Color=&quot;Blue&quot;/> <SolidColorBrush x:Key=&quot;whiteBrush&quot; Color=&quot;White&quot;/> <sys:Double x:Key=&quot;myValue&quot;>100</sys:Double> </Window.Resources>
  55. 55. Referencing Resources in XAML To reference a resource statically: PropertyName=&quot; {StaticResource ResourceKey } &quot; <Button Background=&quot;{StaticResource blueBrush}&quot; Foreground=&quot;{StaticResource whiteBrush}&quot;> Text </Button> To reference a resource dynamically: PropertyName=&quot; {DynamicResource ResourceKey } &quot; <Button Background=&quot;{DynamicResource blueBrush}&quot; Foreground=&quot;{DynamicResource whiteBrush}&quot;> Text </Button>
  56. 56. Referencing Resources Programmatically FindResource method: SolidColorBrush brush = (SolidColorBrush) this.FindResource(&quot;whiteBrush&quot;); SetResourceReference method: this.myButton.SetResourceReference( Button.BackgroundProperty, &quot;whiteBrush&quot;); Resources property: SolidColorBrush brush = (SolidColorBrush) this.Resources[ &quot;whiteBrush&quot;]; Or TryFindResource
  57. 57. Reusing Resources Across Applications Merged resource dictionaries: <Page.Resources> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source=&quot;ResourcesMyResources1.xaml&quot; /> <ResourceDictionary Source=&quot;ResourcesMyResources2.xaml&quot; /> </ResourceDictionary.MergedDictionaries> </Page.Resources> Merged Resource Dictionary MyResources2.xaml MyResources1.xaml
  58. 58. Demonstration: Sharing Resources in a WPF Application <ul><li>In this demonstration, you will see how to: </li></ul><ul><li>Define and reference resources by using XAML/ Programmatically </li></ul>
  59. 59. Defining Localized Resources WPF provides several localization features: <ul><li>Automatic layout </li></ul><ul><li>Localization attributes and comments </li></ul><ul><li>Bidirectional content support </li></ul><ul><ul><li>FlowDirection property </li></ul></ul><ul><ul><li>Number substitution </li></ul></ul><ul><li>Localized content in satellite assemblies </li></ul>
  60. 60. Lesson: Creating Consistent User Interfaces by Using Styles <ul><li>What Are Styles? </li></ul><ul><li>Defining Styles </li></ul><ul><li>Setting Styles Programmatically </li></ul>
  61. 61. 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 <ul><li>Enables you to apply styles to multiple controls </li></ul><ul><li>Promotes consistent appearance of controls </li></ul>Style Control <Resources />
  62. 62. Defining Styles <Page.Resources> <Style x:Key=&quot;myStyle&quot; TargetType=&quot;{x:Type Label}&quot;> <Setter Property=&quot;Background&quot; Value=&quot;Blue&quot; /> <Setter Property=&quot;Foreground&quot; Value=&quot;White&quot; /> </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
  63. 63. Setting Styles Programmatically textblock1.Style = (Style)(Resources[&quot;TitleText&quot;]); 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
  64. 64. Lesson: Changing the Appearance of Controls by Using Control Templates <ul><li>What Are Control Templates? </li></ul><ul><li>Defining a Control Template for a Content Control </li></ul><ul><li>Providing User Customization by Using Template Bindings </li></ul><ul><li>Demonstration: Changing the Appearance of Controls by Using Control Templates </li></ul>
  65. 65. What Are Control Templates? Behavior class ControlTemplate Controls have built-in appearance and behavior: To customize the appearance and structure of a control: <ul><li>The behavior is defined by a predefined control class </li></ul><ul><li>The appearance is defined by a default ControlTemplate </li></ul><ul><li>Define a new ControlTemplate for the control </li></ul>Control
  66. 66. Defining a Control Template for a Content Control To define a control template for a content control: <ul><li>Define a < Style> for a type of control </li></ul><ul><li>Set the Template property to a ControlTemplate </li></ul><ul><li>Define a ContentPresenter for the control content </li></ul><Style TargetType=&quot;Button&quot;> <Setter Property=&quot;Template&quot;> <Setter.Value> <ControlTemplate TargetType=&quot;Button&quot;> <Grid> <Ellipse Fill=&quot;Blue&quot;/> <ContentPresenter VerticalAlignment=&quot;Center&quot; HorizontalAlignment=&quot;Top&quot;/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
  67. 67. 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=&quot;ListBox&quot;> <Setter Property=&quot;Template&quot;> <Setter.Value> <ControlTemplate TargetType=&quot;ListBox&quot;> <Border Background=&quot;{TemplateBinding ListBox.Background}&quot; CornerRadius=&quot;5&quot;> ... </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>
  68. 68. Demonstration: Changing the Appearance of Controls by Using Control Templates <ul><li>In this demonstration, you will see how to: </li></ul><ul><li>Modify the appearance of content controls by using control templates </li></ul>
  69. 69. Lesson: Enhancing User Interfaces by Using Triggers and Animations <ul><li>What Are Triggers? </li></ul><ul><li>Defining Property Triggers </li></ul><ul><li>What Are Animations? </li></ul><ul><li>Defining Animations </li></ul><ul><li>Demonstration: Enhancing Controls by Using Triggers and Animations </li></ul>
  70. 70. What Are Triggers? <ul><li>MultiTrigger </li></ul><ul><li>DataTrigger and MultiDataTrigger </li></ul>A trigger sets properties or starts actions: Triggered by property value changes or events Trigger types: <ul><li>EventTrigger </li></ul><ul><li>PropertyTrigger </li></ul>Trigger actions enable triggers to perform actions: <ul><li>EnterActions and ExitActions properties </li></ul><ul><li>Actions property for event triggers </li></ul>
  71. 71. Defining Property Triggers To define a property trigger: Style TargetType=&quot;{x:Type ListBoxItem}&quot;> <Setter Property=&quot;Opacity&quot; Value=&quot;0.5&quot; /> <Style.Triggers> <Trigger Property=&quot;IsSelected&quot; Value=&quot;True&quot;> <Setter Property=&quot;Opacity&quot; Value=&quot;1.0&quot; /> </Trigger> </Style.Triggers> </Style> Define a Trigger element 1 Specify the property that initiates the trigger 2 Define the behavior of the trigger 3
  72. 72. What Are Animations? Animations enable you to animate controls and graphical objects: <ul><li>Animate properties such as Width , Height , and Opacity </li></ul><ul><li>Grouped together by using Storyboard objects </li></ul>Types of animation: <ul><li>ColorAnimation </li></ul><ul><li>DoubleAnimation </li></ul><ul><li>PointAnimation </li></ul><ul><li>Custom </li></ul>
  73. 73. Defining Animations You add animation elements to a Storyboard element to define animations <Rectangle Name=&quot;MyRectangle&quot; ...> <Rectangle.Triggers> <EventTrigger RoutedEvent=&quot;Mouse.MouseEnter&quot;> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration=&quot;0:0:1&quot; Storyboard.TargetProperty=&quot;Opacity&quot; To=&quot;0.0&quot; /> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle> EventTrigger Trigger action Storyboard Animation
  74. 74. 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
  75. 75. Lab Review <ul><li>How do you use multiple XAML resource files in a merged dictionary? </li></ul><ul><li>How do you create a Style that applies to all elements of a particular type? </li></ul><ul><li>How do you modify the structure and appearance of a control? </li></ul><ul><li>How do you create a property trigger? </li></ul><ul><li>How do you create a Style that applies to selected elements? </li></ul>
  76. 76. Module Review and Takeaways
  77. 77. Windows Presentation Foundation Using Visual Studio 2010 & Expression Blend 4 Adil Ahmed Mughal
  78. 78. Module 4
  79. 79. Module 4: Data Binding <ul><li>Overview of Data Binding </li></ul><ul><li>Creating a Data Binding </li></ul><ul><li>Implementing Property Change Notification </li></ul>
  80. 80. Lesson: Overview of Data Binding <ul><li>The WPF Data-Binding Model </li></ul><ul><li>Binding Sources and Binding Targets </li></ul><ul><li>Data-Binding Modes </li></ul>
  81. 81. The WPF Data-Binding Model UI Element Managed Object ADO.NET Data Source XML Data
  82. 82. Binding Sources and Binding Targets Data-binding components: <ul><li>Binding target object </li></ul><ul><li>Binding target dependency property </li></ul><ul><li>Binding source </li></ul><ul><li>Path to the binding source property </li></ul>Dependency Property Property Binding Target Object Binding Source Object
  83. 83. Data-Binding Modes Binding Target Binding Source Binding Object OneWay TwoWay OneWayToSource OneTime WPF supports four data-binding modes: <ul><li>OneWay </li></ul><ul><li>TwoWay </li></ul><ul><li>OneWayToSource </li></ul><ul><li>OneTime </li></ul>
  84. 84. Lesson: Creating a Data Binding <ul><li>Binding to a Class Property </li></ul><ul><li>Binding Multiple Controls to a Class </li></ul><ul><li>Binding to a Full Object </li></ul><ul><li>Binding to XML Data </li></ul><ul><li>Binding to Another User Interface Element </li></ul><ul><li>Demonstration: Binding to Different Data Sources </li></ul>
  85. 85. Demonstration: Binding to Different Data Sources <ul><li>In this demonstration, you will see how to: </li></ul><ul><li>Binding </li></ul>
  86. 86. Lesson: Implementing Property Change Notification <ul><li>What Are Property Change Notifications? </li></ul><ul><li>Propagating Property Change Notifications to a Binding Target </li></ul><ul><li>Propagating Value Changes to a Binding Source </li></ul><ul><li>Demonstration: Triggering Source Updates </li></ul>
  87. 87. 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
  88. 88. 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: <ul><li>Declare the PropertyChanged event </li></ul><ul><li>Create the OnPropertyChanged method </li></ul><ul><li>Call the OnPropertyChanged method </li></ul>Use dependency properties for visual elements
  89. 89. Propagating Value Changes to a Binding Source <TextBox Width=&quot;100&quot;> <TextBox.Text> <Binding Source=&quot;{StaticResource myData}&quot; Path=&quot;ColorName&quot; UpdateSourceTrigger=&quot;PropertyChanged&quot; /> </TextBox.Text> </TextBox> Specify the timing of binding source updates by using the UpdateSourceTrigger property <ul><li>Default </li></ul><ul><li>Explicit </li></ul><ul><li>LostFocus </li></ul><ul><li>PropertyChanged </li></ul>
  90. 90. Demonstration: Triggering Source Updates <ul><li>In this demonstration, you will see how to: </li></ul><ul><li>Propagate changes to the binding target </li></ul><ul><li>Propagate value changes to a binding source </li></ul>
  91. 91. Lab Review <ul><li>How do you create a data binding? </li></ul><ul><li>Which interface do you use to implement property change notification? </li></ul><ul><li>Which interface do you use to implement a custom value converter? </li></ul><ul><li>How do you define validation rules for a Binding ? </li></ul>
  92. 92. Module Review and Takeaways <ul><li>Review Questions </li></ul><ul><li>Best Practices </li></ul>
  93. 93. Module 5
  94. 94. Module 5: Data Bindings to Collections <ul><li>Binding to Collections of Objects </li></ul><ul><li>Presenting Data by Using Collection Views </li></ul><ul><li>Presenting Data by Using Data Templates </li></ul>
  95. 95. Lesson: Binding to Collections of Objects <ul><li>Overview of Binding to Collections </li></ul><ul><li>What Is an Observable Collection? </li></ul><ul><li>Defining an Observable Collection Class </li></ul><ul><li>Introduction to LINQ </li></ul><ul><li>Binding to ADO.NET Data Objects </li></ul>
  96. 96. 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
  97. 97. 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
  98. 98. Defining an Observable Collection Class To define and use an observable collection class: public class NameList : ObservableCollection<Person> { ... public class PersonName { ... } } <Window ... xmlns:c=&quot;clr-namespace:MySample&quot; > <Window.Resources> <c:NameList x:Key=&quot;list&quot;/> </Window.Resources> <ListBox ItemsSource = &quot;{Binding Source={StaticResource list}}&quot; /> </Window> <ul><li>Define a class that extends ObservableCollection(T) </li></ul><ul><li>Create a XAML resource to represent the class, and bind to it </li></ul>
  99. 99. 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
  100. 100. Binding to ADO.NET Data Objects WPF enables you to bind to ADO.NET classes such as: <ul><li>DataSet </li></ul><ul><li>DataTable </li></ul><ul><li>DataView </li></ul>To bind to an ADO.NET object: <ul><li>Populate an ADO.NET object such as DataSet </li></ul><ul><li>Set the DataContext property of a control such as ListBox </li></ul><ul><li>Create bindings to the required data objects by using properties such as ItemsSource </li></ul>
  101. 101. Lesson: Presenting Data by Using Data Templates <ul><li>What Is a Data Template? </li></ul><ul><li>Defining and Using a Data Template </li></ul><ul><li>Defining a Data Template as a Resource </li></ul><ul><li>Using Data Triggers in a Data Template </li></ul>
  102. 102. 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
  103. 103. Defining and Using a Data Template <ListBox ItemsSource=&quot;{Binding Source={StaticResource list}}&quot;> <ListBox.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Text=&quot;{Binding Path=FirstName}&quot; /> <TextBlock Text=&quot;{Binding Path=LastName}&quot;/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> To define and use a data template: <ul><li>Define a DataTemplate element </li></ul><ul><li>Add it to the ItemTemplate or ContentTemplate property </li></ul>
  104. 104. Defining a Data Template as a Resource <Window.Resources> <DataTemplate x:Key=&quot;myDataTemplate&quot;> <StackPanel> <TextBlock Text=&quot;{Binding Path=FirstName}&quot; /> <TextBlock Text=&quot;{Binding Path=LastName}&quot;/> </StackPanel> </DataTemplate> </Window.Resources> <ListBox ItemsSource=&quot;{Binding Source={StaticResource list}}&quot; ItemTemplate=&quot;{StaticResource myDataTemplate}&quot; /> You define reusable data templates as resources by setting the x:Key or DataType property on the DataTemplate
  105. 105. Using Data Triggers in a Data Template <DataTemplate x:Key=&quot;myDataTemplate&quot;> <DataTemplate.Triggers> <DataTrigger Binding=&quot;{Binding Path=Gender}&quot; Value=&quot;Male&quot;> <Setter TargetName=&quot;border&quot; Property=&quot;Foreground&quot; Value=&quot;Blue&quot;/> </DataTrigger> </DataTemplate.Triggers> </DataTemplate> To define a data trigger: <ul><li>Define a DataTrigger element </li></ul><ul><li>Set the Binding and Value properties on the DataTrigger </li></ul><ul><li>Add Setter child elements to set control properties </li></ul>
  106. 106. Module Review and Takeaways <ul><li>Review </li></ul>
  107. 107. Contact Information <ul><li>Blog: </li></ul><ul><ul><li>http://www.AdilMughal.com </li></ul></ul><ul><li>Email: </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><ul><li>a [email_address] </li></ul></ul><ul><li>User Group: </li></ul><ul><ul><li>DevNext ( http://www.devnextug.org ) </li></ul></ul><ul><ul><li>Emerging .NET Devs ( http://eDotNetDevs.org ) </li></ul></ul>

×