8. XAML & WPF - WPF Concepts


Published on

WPF Concepts
Telerik Software Academy:
The website and all video materials are in Bulgarian.
Dependency Objects
Dependency Properties
Attached Properties
Trees in WPF
Trees in WPF
Trees in Silverlight
Commanding in XAML
Built-in commands
The Relay Command
MVVM Design Pattern

Published in: Technology, Business

8. XAML & WPF - WPF Concepts

  1. 1. WPF Concepts Dependency Properties, RoutingDoncho MinkovTechnical Trainerhttp://www.minkov.itTelerik Software Academyacademy.telerik.com
  2. 2. Table of Contents Dependency Objects Dependency Properties Attached Properties Trees in WPF  Trees in WPF  Trees in Silverlight  VisualTreeHelper  LogicalTreeHelper
  3. 3. Table of Contents (2) Routing  Bubbling  Tunneling Commanding in XAML  Built-in commands  ICommand  The Relay Command MVVM Design Pattern
  4. 4. Dependency Object
  5. 5. Dependency Object The DependencyObject  Represents an object that participates in the dependency property system  Enables WPF property system services The property systems functions:  Compute the values of properties  Provide system notification about values that have changed DependencyObject as a base class enables objects to use Dependency Properties
  6. 6. Dependency Object (2) DependencyObject has the following  Get, Set, and Clear methods for values of any dependency properties  Metadata, coerce value support, property changed notification  Override callbacks for dependency properties or attached properties DependencyObject class facilitates the per-owner property metadata for a dependency property
  7. 7. Dependency Properties Dependencies
  8. 8. Dependency Properties WPF provides a set of services that can be used to extend the functionality of a CLR property  Collectively, these services are typically referred to as the WPF property system Dependency Property is  A property that is backed by the WPF property system
  9. 9. Dependency Properties (2) Dependency properties are typically exposed as CLR properties  At a basic level, you could interact with these properties directly  May never find out they are dependency properties Better to know if a property is Dependency or plain CLR property  Can use the advantages of the dependency properties
  10. 10. Dependency Properties (3) The purpose of dependency properties is to provide a way to compute the value of a property based on the value of other inputs  Can be implemented to provide callbacks to propagate changes to other properties
  11. 11. Dependency Properties Live Demo
  12. 12. Attached PropertiesHow to set properties from another place
  13. 13. Attached Properties An attached property is intended to be used as a type of global property that is settable on any object In WPF attached properties are defined as dependency properties  They dont have the wrapper property Examples of Attached Properties  Grid.Row, Grid.Column, Grid.RowSpan  Canvas.Top, Canvas.Left, Canvas.Bottom  etc.
  14. 14. Attached Properties Live Demo
  15. 15. Custom Dependency PropertiesHow to make our own Dependency Properties?
  16. 16. Custom Dependency Properties The first thing to do is to register the Dependency Property  Need registration due to the Property System Dependency Propertys instance is always readonly public static readonly DependencyProperty ScrollValueProperty = DependencyProperty.Register( Registration to the "ScrollValue", Property System typeof(double), typeof(UserControl), The name of the null); Dependency Property  In most of the cases we need a dependency property on a UserControl
  17. 17. Dependency Property Registration Two Register Methods:  Register(String, Type, Type)  Registers a dependency property with the specified property name, property type, and owner type  Register(String, Type, Type, PropertyMetadata)  Add Property metadata  Default value or Callback for Property changes
  18. 18. Dependency Property Wrapper After the registration of the Dependency Property it needs wrapper  Used to make it look like plain CLR Property DependencyObject has two methods used for the wrapping of dependency properties  SetValue(DependenyProperty, value)  GetValue(DependenyProperty) public double ScrollValue { get { return (double)GetValue(ScrollValueProperty); } set { SetValue(ScrollValueProperty , value); } }
  19. 19. Custom Attached Properties How to make attached properties?
  20. 20. Custom Attached Properties The registration of attached properties is a little differentprivate static void OnPropertyChanged(…) { … }public static Thickness GetMargin(DependencyObject obj){ return (Thickness)obj.GetValue(MarginProperty);}public static void SetMargin(DependencyObject obj, Thickness val){ obj.SetValue(MarginProperty, val);}public static readonly DependencyProperty MarginProperty = DependencyProperty.RegisterAttached("Margin", typeof(Thickness), typeof(ContentMargin), new FrameworkPropertyMetadata(default(Thickness), new PropertyChangedCallback(OnPropertyChanged)));
  21. 21. Custom Dependency and Attached Properties Live Demo
  22. 22. Trees in WPFObject, Visual and Logical
  23. 23. Trees in WPF WPF uses a hierarchical system to organize elements and components  Developers can manipulate the nodes directly  Affect the rendering or behavior of an application Two such trees exist in WPF  Logical tree  Visual tree
  24. 24. Trees in WPF (2) WPF supports two kinds of trees for rendering  Logical Tree  Describes the structure of control elements  Visual Tree  Describes the structure of Visual elements  Sometimes both trees are used the same way
  25. 25. Object Tree Window Border AdornedDecoration StackPanel ContentPresenter AdornedLayer Label Button Border Border The Object TreeContentPresenter ContentPresenter TextBlock TextBlock
  26. 26. Logical Tree Window Border AdornedDecoration StackPanel ContentPresenter AdornedLayer Label Button Border Border The Logical TreeContentPresenter ContentPresenter TextBlock TextBlock
  27. 27. Visual Tree Window Border AdornedDecoration StackPanel ContentPresenter AdornedLayer Label Button Border Border The Visual TreeContentPresenter ContentPresenter TextBlock TextBlock
  28. 28. Why Two Kinds of Trees? A WPF control consists of multiple, more primitive controls  A button consists of  A border, a rectangle and a content presenter.  These controls are visual children of the button When WPF renders the button  The element itself has no appearance  It iterates through the visual tree and renders the visual children of it
  29. 29. Why Two Kinds of Trees? (2) Sometimes you are not interested in the borders and rectangles of a controls template  You want a more robust tree that only contains the "real" controls  Not all the template parts  And that is the eligibility for the logical tree
  30. 30. The Logical Tree The logical tree describes the relations between elements of the user interface The logical tree is responsible for:  Inherit DependencyProperty values  Resolving DynamicResources references  Looking up element names for bindings  Forwarding RoutedEvents
  31. 31. The Visual Tree Contains all logical elements  Including all visual elements of the template of each element The visual tree is responsible for:  Rendering visual elements  Propagate element opacity  Propagate Layout- and RenderTransforms  Propagate the IsEnabled property  Do Hit-Testing  RelativeSource (FindAncestor)
  32. 32. Traversing Through Trees in WPFVisualTreeHelper and Logical Tree Helper
  33. 33. LogicalTreeHelper and VisualTreeHelper Help a lot when traversing the WPF Trees Key Functionality:  GetParrent(Dependency Object)  Gets the logical parent of the current element  GetChildren(Dependency Object)  GetOpacity(Dependency Object)  Etc…
  34. 34. Traversing Through Trees in WPF Live Demo
  35. 35. Routed Events in WPF Bubbling and Tunneling
  36. 36. Routed Events What is a routed event?  A type of event that can invoke handlers on multiple listeners in an element tree  Rather than just on the object that raised it The event route can travel in one of two directions  Depending on the event definition  Generally the route travels from the source element and then "bubbles" upward through the element tree
  37. 37. Types of Routed Events Three types of routed events in WPF  Bubbling  Event handlers on the event source are invoked  Then routes to successive parent elements until reaching the element tree root  Most routed events use bubbling routing strategy  Direct  Only the source element itself is given the opportunity to invoke handlers in response
  38. 38. Types of Routed Events (2) Three types of routed events in WPF and SL  Tunneling  Event handlers at the tree root are invoked first  Then travels down the object tree to the node that is the source of the event  The element that raised the routed event  Not supported in Silverlight  Available as Preview events  PreviewClick
  39. 39. Routed Events Example Window Grid Tunneling StackPanel TextBlockPreviewMouseLeftButtonDown Event is raised
  40. 40. Routed Events Example Window Grid Bubbling StackPanel TextBlockMouseLeftButtonDown Event is raised
  41. 41. Routed Events inWPF/Silverlight Live Demo
  42. 42. Commands in .NET
  43. 43. WPF Commands Commanding is an input mechanism in WPF  Provides input handling at a more semantic level than device input  Examples of commands are the Copy, Cut, and Paste operations
  44. 44. WPF Commands (2) Commands have several purposes  Separate the semantics and the objects that invoke a command from the logic that executes the command  Allows for multiple and disparate sources to invoke the same command logic  Allows the command logic to be customized for different targets
  45. 45. WPF Commands Commands can be used to indicate whether an action is available  Example: when trying to cut something, the user should first select something  To indicate whether an action is possible  Implement the CanExecute method  A button can subscribe to the CanExecuteChanged event  Disabled if CanExecute returns false  Enabled if CanExecute returns true.
  46. 46. The Four Main Concepts in WPF Commanding The routed command model in WPF consists of four main concepts  Command The action to be executed  CommandSource The object that invokes the command  CommandTarget The object that the command is executed on  CommandBinding The object that maps command logic to command
  47. 47. Four Main Concepts in WPF Commanding Example<Menu> <MenuItem Command="Copy" CommandTarget="{Binding ElementName=textBoxText}" /> <MenuItem Command="Paste" CommandTarget="{Binding ElementName=mainTextBox}" /></Menu><TextBox Name="mainTextBox"/><TextBox Name="textBoxText"> Some Text in a Text Box</TextBox>
  48. 48. Commands in .NET Live Demo
  49. 49. The ICommand Interface How to implement our own Commands
  50. 50. ICommand Interface The ICommand interface Determines whether the command can be executed public bool CanExecute(object parameter); public event EventHandler CanExecuteChanged; public void Execute(object parameter); Called to invoke the When changes of the command CanExecute state occur
  51. 51. Implementation Command Example Lets implement a Command to show the selected text in a TextBox class MessagePopCommand : ICommand { public bool CanExecute(object parameter) { if (parameter == null) { return false; } return !string.IsNullOrEmpty(parameter.ToString()); } public event EventHandler CanExecuteChanged; public void Execute(object parameter) { MessageBox.Show(parameter.ToString()); } }
  52. 52. Implementing Command Example We need to make an instance of the Command in the code behind The XAML file: <TextBox Name="TextBoxToShow">text</TextBox> <Button Content="Click Me!" CommandParameter="{Binding ElementName=TextBoxToShow, Path=Text}" Command="{Binding MessageCommand}"/> In the Code Behind file: private ICommand messageCommand; public ICommand MessageCommand { get { return this.messageCommand; } }
  53. 53. How Does it Work? When binding the command of the button to a specific command instance, the CanExecute method is invoked  If it returns false the button is disabled  If true is returned the button is enabled A known problem  The order of the Command and CommandParameter properties matters!  The XAML parser works from left to right  The paramerters must be known before binding
  54. 54. The ICommand Interface Live Implementation
  55. 55. Better CommandingEven better than Custom Commands
  56. 56. Better Commanding Most of the times it is not necessary to implement ICommand class for every distinct command  Since in most of the cases the ConcreteCommand has the same interface Can we implement a command and give different behavior then instantiating?  Of course – use the so called RelayCommand
  57. 57. The RelayCommand What is a relay command  A command which is given an behavior during instantiating  Both CanExecute and Execute methods ICommand someCommand; public MyWindow() { this.someCommand = new RelayCommand(ExecuteMethod,CanExecuteMethod); } public void ExecuteMethod(object parameter) {…} public bool CanExecuteMethod(object parameter) {…}
  58. 58. Better Commanding Live Demo
  59. 59. Whats the Point of Commands?!Why the hell we need Commands?
  60. 60. The Point of Commands The answer is simple:  The Commands can execute without the knowledge of who wants to execute them Commands are:  Easily implemented  Easily extended  Easily replaceable  A way to change an object without knowledge of who wants to change it  Fundamental part of the MVVM pattern
  61. 61. Model – View – ViewModel Design Pattern What is MVVM?
  62. 62. What is Model View ViewModel? Multilayer architectural pattern  Introduced by Microsoft for usage in WPF/Silverlight Wide usage of MVVM nowadays  Even in JavaScript and web development Used for separation of concerns  i.e. separate presentation from program logic
  63. 63. What is Model View ViewModel? (2) With MVVM the project becomes  More easily extendable  Easier for the back-end and front-end developers to co-work on the same project  Change the presentation layer at any point  Easily testable
  64. 64. MVVM ArchitectureThe View, the Model, the ViewModel
  65. 65. MVVM Architecture MVVM consists of three layers  View is the Presentation Layer  Only GUI elements  No business logic  Model refers to DataLayer  Represents the real state content  Data access layer that represents that content
  66. 66. MVVM Architecture (2) ViewModel is a "Model of the View"  Abstraction of the View  Serves in data binding between the View and the Model  Acts as a data binder/converter  Changes Model information into View information  Passes commands from the View into the Model  Exposes public properties, commands and abstractions
  67. 67. MVVM Layers Connections View ViewModel Model The main idea of MVVM is that each pair of layers is coupled as loosely as possible  The View only knows about the ViewModel  The View has no idea of the Model  The ViewModel only knows about the Model  The ViewModel has no idea of the View  The Model knows nothing about the other layers
  68. 68. MVVM Execution What happens when an user clicks a Button? 1. The View fires event that a button was clicked 2. The View calls a Method in the ViewModel 3. The ViewModel gets/sets some data from/in the Model User Fires The ViewModel an Event requests data View ViewModel Model The View Shows The ViewModel the new data receives data
  69. 69. Simple MVVMImplementation
  70. 70. Simple MVVM Implementation An application that keeps a set of names  The user can add or delete a name at any time  The user can see all the names Application architecture  Model Data and data logic  Keeps the names  ViewModel Business Logic  Gets/deletes/adds the names  View User Interface  Gives a UI for these operations
  71. 71. Simple MVVMImplementation Live Demo
  72. 72. Implementing the ViewModel INotifyProperyChanged
  73. 73. ViewModel Implementation A question pops out  How does the View know about changes in the ViewModel?  How the ViewModel knows about changes in the Model?  There is no reversed connection, right? The answer is simple  The INotifyPropertyChanged interface  Gives an event to notify about changes
  74. 74. INotifyProperyChanged The INotifyPropertyChanged interface contains only one eventPropertyChanged(object sender, PropertyChangedEventArgs e) The point of this event is to be called when the data is changed Both Model and ViewModel should implement this interface  In small project only the ViewModel can implement it
  75. 75. Implementing INotifyPropertyChanged The Property System automatically notifies the View about a change with PropertyChangedpublic class ViewModel:INotifyPropertyChanged{ PropertyChanged(object sender,PropertyChangedEventArgs e) OnPropertyChanged(string propertyName) { if(this.PropertyChanged!=null) { var args=new PropertyChangedEventArgs(propertyName); PropertyChanged(this,args); } }}
  76. 76. MVVM Real LifeImplementation Lets Get Practical
  77. 77. Implementing ImageViewer We will implement anImage Viewer application using WPF and MVVM  The user should be able to see all the images in a given folder  The user should be able to add/delete images  The user should be able to select an image to enlarge it  Next and Previous buttons should be available
  78. 78. MVVM Real LifeImplementation Live Demo
  79. 79. XAML ConceptsQuestions?
  80. 80. XAML Concepts курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET http://academy.telerik.com програмиране за деца – безплатни курсове и уроци ASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC безплатен SEO курс - оптимизация за търсачки алго академия – състезателно програмиране, състезаниякурсове и уроци по програмиране, книги – безплатно от Наков курс мобилни приложения с iPhone, Android, WP7, PhoneGap уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop Дончо Минков - сайт за програмиране free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране безплатен курс "Качествен програмен код" безплатен курс "Разработка на софтуер в cloud среда" C# курс, програмиране, безплатно
  81. 81. Exercises Extend the VideoPlayer Control from the example:  Add a slider that slides with the video length  Add a slider that changes the volume  Add buttons for Play, Pause, Stop  Add key events for volume UP/DOWN  Add key events to jump 5 seconds forward/backward in the video
  82. 82. Free Trainings @ Telerik Academy Desktop Applications with C# and WPF academy.telerik.com/.../ desktop-applications-csharp-wpf Telerik Software Academy  academy.telerik.com Telerik Academy @ Facebook  facebook.com/TelerikAcademy Telerik Software Academy Forums  forums.academy.telerik.com