1 / 80

WPF Concepts

http://schoolacademy.telerik.com. WPF Concepts. Dependency Properties , Routing. Doncho Minkov. Telerik School Academy. schoolacademy.telerik.com. Technical Trainer. http://www.minkov.it. Table of Contents. Dependency Objects Dependency Properties Attached Properties Trees in WPF

dimaia
Download Presentation

WPF Concepts

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. http://schoolacademy.telerik.com WPF Concepts Dependency Properties, Routing Doncho Minkov Telerik School Academy schoolacademy.telerik.com Technical Trainer http://www.minkov.it

  2. Table of Contents • Dependency Objects • Dependency Properties • Attached Properties • Trees in WPF • Trees in WPF • Trees in Silverlight • VisualTreeHelper • LogicalTreeHelper

  3. Table of Contents (2) • Routing • Bubbling • Tunneling • Commanding in XAML • Built-in commands • ICommand • The Relay Command • MVVM Design Pattern

  4. Dependency Object

  5. Dependency Object • The DependencyObject • Represents an object that participates in the dependency property system • Enables WPFpropertysystemservices • The property system's functions: • Compute the values of properties • Provide system notification about values that have changed • DependencyObjectas a base class enables objects to use DependencyProperties

  6. Dependency Object (2) • DependencyObject has the following • Get, Set, and Clearmethods for values of any dependency properties • Metadata, coerce value support, property changed notification • Override callbacks for dependency properties or attached properties • DependencyObjectclass facilitates the per-owner property metadata for a dependency property

  7. Dependency Properties Dependencies

  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. 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. 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. Dependency Properties Live Demo

  12. Attached Properties How to set properties from another place

  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 don't have the wrapper property • Examples of Attached Properties • Grid.Row, Grid.Column, Grid.RowSpan • Canvas.Top, Canvas.Left, Canvas.Bottom • etc.

  14. Attached Properties Live Demo

  15. Custom Dependency Properties How to make our own Dependency Properties?

  16. Custom Dependency Properties • The first thing to do is to register the Dependency Property • Need registration due to the Property System • In most of the cases we need a dependency property on a UserControl public staticreadonly DependencyProperty ScrollValueProperty = DependencyProperty.Register( "ScrollValue", typeof(double), typeof(UserControl), null); Dependency Property's instance is always readonly Registration to the Property System The name of the Dependency Property

  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. 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. Custom Attached Properties How to make attached properties?

  20. Custom Attached Properties • The registration of attached properties is a little different private 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 readonlyDependencyProperty MarginProperty = DependencyProperty.RegisterAttached("Margin", typeof(Thickness), typeof(ContentMargin), new FrameworkPropertyMetadata(default(Thickness), new PropertyChangedCallback(OnPropertyChanged)));

  21. Custom Dependency and Attached Properties Live Demo

  22. Trees in WPF Object, Visual and Logical

  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. 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. Object Tree The Object Tree AdornedDecoration Border Window StackPanel ContentPresenter AdornedLayer Label Button Border Border ContentPresenter ContentPresenter TextBlock TextBlock

  26. Logical Tree The Logical Tree AdornedDecoration Border Window StackPanel ContentPresenter AdornedLayer Label Button Border Border ContentPresenter ContentPresenter TextBlock TextBlock

  27. Visual Tree The Visual Tree AdornedDecoration Border Window StackPanel ContentPresenter AdornedLayer Label Button Border Border ContentPresenter ContentPresenter TextBlock TextBlock

  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. 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. The Logical Tree • The logical tree describes the relations between elements of the user interface • The logical tree is responsible for: • Inherit DependencyPropertyvalues • Resolving DynamicResourcesreferences • Looking up element names for bindings • Forwarding RoutedEvents

  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 IsEnabledproperty • Do Hit-Testing • RelativeSource(FindAncestor)

  32. Traversing Through Trees in WPF VisualTreeHelper and Logical Tree Helper

  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. Traversing Through Trees in WPF Live Demo

  35. Routed Events in WPF Bubbling and Tunneling

  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. 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. 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. Routed Events Example Window Grid Tunneling StackPanel TextBlock PreviewMouseLeftButtonDown Event is raised

  40. Routed Events Example Window Grid Bubbling StackPanel TextBlock MouseLeftButtonDown Event is raised

  41. Routed Events in WPF/Silverlight Live Demo

  42. Commands in .NET

  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 Pasteoperations

  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. 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 CanExecutemethod • A button can subscribe to the CanExecuteChangedevent • Disabled if CanExecute returns false • Enabled if CanExecute returns true.

  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. 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. Commands in .NET Live Demo

  49. The ICommand Interface How to implement our own Commands

  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 command When changes of the CanExecute state occur

More Related