Friday, August 30, 2013

Difference between the dependency property and clr-property

When you play with WPF , you have to deal with very common and effective feature of WPF ie. Dependency property. the Use of this feature is very simple but concept behind is very much complex.

While using the dependency property a question is arises that why we need a new property system against normal property.

In the Normal property the value of a normal .NET property is read directly from a private member in your class

The dependency property is a new kind of implementation of properties that automatically notify any registered interested party each time the value of the property changes.
means if you bind a number of controls to the dependency properties, your controls will surely notified as the value of the bound properties change, without writing any additional code.

 The dependency property has significant amount of added value.The dependency property is the basis of many WPF key features as-
  • Animation
  • Data Binding
  • Styles
  • Resources
  • Metadata overrides
  • Property value inheritance
  • WPF Designer integration
refer the link
most of properties that are exposed by WPF elements are dependency is used without realizing it because it is designed to be consumed in the same way as normal property.
The dependency properties in the WPF libraries are always wrapped by ordinary .Net property, so it can be usable in the normal way.
  The value of a DependencyProperty is resolved dynamically when calling the GetValue() method that is inherited from DependencyObject.
When you set a value of a dependency property it is not stored in a field of your object, but in a dictionary of keys and values provided by the base class DependencyObject. The key of an entry is the name of the property and the value is the value you want to set.

the wrapper class which can create a Dependency property is called a DependencyObject

This free, painless and automatic implementation of the observer pattern is tremendously powerful and greatly reduces the burden on the client programmer (in fact, the data-binding system depends on it!).

Efficient Storage/Reduce memory footprint

We know that in UI design many of the properties of the control will remain with its initial value.
Dependency properties store only modified properties in the instance, so less memory is used to store property values
If the value of a property has not been store locally,WPF will retrieve its value from a style, another element, or the default value

To understand this let consider a example-
Suppose we have a number of buttons in a form, each button has a dozen of properties,which, , if they set through one of these mechanisms, use no memory at all. other wise with these mechanism for each property take memory to set with control weather it is not set locally.

Dynamic value resolution

The actual value of a dependency property as seen by the object may be set by many source.WPF take many factors into consideration.

The behavior gives dependency property their name, a dependency property depends on the multiple property providers.each with its own level of precedence.

When we retrieve a value from a property value, the WPF property system goes through a series of steps to arrive at the final value.
Following are the factors ,arranged from lowest to highest precedence.

Below is the list of precedence from lowest priority to highest priority .

-Default Value: The default value (as set by FrameworkPropertyMetadata object).
it is used in the case that no other value has been applied

-Inherited Value: A Property might inherit a value from a parent element.
e.g. DataContext which is inherited unless specifically set.
-Default style: The value set from a theme style
e.g. Border and text styles for buttons or text boxes will use a theme style.
- Style setters. Styles contained by the, page, application or animations use setters to modify the value of a dependency property.

-Template triggers: A property may be set by a template depending upon a MouseOver or Focused state.

-Style triggers: Similarly, styles can specify triggers that apply styles according to the value of a property. Maybe a bank balance value would be shown in red if the account was overdrawn.

-Implicit Styles: These styles are defined in the resources of the object or page that uses them and override default styles which are of lower precedence.

-TemplatedParent template properties: Dependency properties which are owned by items in the visual tree and which exist because they have been created as the result of a template setting are modified using this principle. You will not declare anything explicitly for this but rather it is inferred by the action of the template system.

-Local value: Explicitly set by markup or a SetValue call in code.

-Animation: Properties set by animation storyboard setters.

-Coersion: This is the highest priority exception case which is to allow you to alter the value of a property despite every other attempt. Some properties are coerced automatically but in general, you will have to respond to a callback and set the value in code to override all the other possibilities. Basically, coersion is a get out clause in which you can say "I don't care what you think. Do it my way!" To do this you'll use a CoerceValueCallback.

Change Notification

Dependency properties have a built-in change notification mechanism. By registering a callback in the property metadata you get notified, when the value of the property has been changed. This is also used by the databinding.

Property Value Inheritance
 When you access a dependency property the value is resolved by using a value resolution strategy. If no local value is set, the dependency property navigates up the logical tree until it finds a value. When you set the FontSize on the root element it applies to all textblocks below except you override the value.

Thursday, August 29, 2013

Visual Tree and Logical Tree in WPF

The WPF Interface is the collection of elements which are hierarchically related,which represent the logical tree.the template of one element consist of many inner element(visual elements),which represent visual tree.

Logical Tree
 It represent the essential structure of UI.It closely matches the elements you declare in XAML, and excludes most visual elements created internally to help render the elements you declared.
The logical representation of UI controls is called as Logical Tree. Logical Tree structure represents the hierarchy of UI controls and elements in WPF. Logical Tree doesn’t include inner controls of UI element. For example, Window contains StackPanel and StackPanel contains Buttons the Logical Tree can be represented as below

The logical tree is responsible for:
  • Inherit DependencyProperty values
  • Resolving DynamicResources references
  • Looking up element names for bindings
  • Forwaring RoutedEvents

Visual Tree
The visual tree represents all of the elements in your UI(all logical elements including all visual elements of the template of each element) which render to an output device (typically, the screen).
The Logical representation of UI controls with its internal controls is called as Visual Tree. Visual Tree contains same elements the Logical Tree contains but it also contains elements or controls which are internally used to create the element or control in Logical Tree. In short, you can say Visual Tree contains all the elements the Logical Tree has with its template of each element. Please have a look on Visual Tree of above created Logical Tree.

The Visual tree is used for:-
  •  Rendering visual elements
  • Propagate element opacity
  • Propagate Layout- and RenderTransforms
  • Propagate the IsEnabled property.
  • Do Hit-Testing
  • RelativeSource (FindAncestor)

Wednesday, August 28, 2013

Features of WPF

  • Device Independent Pixel (DPI)/Independent of screen resolution/Resolution Independent
  • Built-In Support for Graphics and Animation
  • Highly Customizable/Redefine Styles and Control Templates
  • Resource based Approach for every control
  • New Property System 
  •  Binding Capabilities
  • Declarative Programming
Device Independent Pixel (DPI)/Independent of screen resolution/Resolution Independent  

A WPF windows and elements are measured using device independent unit, A single device independent unit is defined as 1/96 of an inch.
 If you increase the resolution of your screen, the user interface stays the same size - it just gets crispier. Since WPF builds on a vector based rendering engine it's incredibly easy to build scaleable user interfaces.

Built-In Support for Graphics and Animation

WPF using DirectX for rendering the elements, it has major support of graphics and animation capabilities.
Set of classes provided by WPF to deal with the  animation and graphics.

Highly Customizable/Redefine Styles and Control Templates 

WPF provides a huge flexibility to define styles and ControlTemplets.
In WPF ,Styles can be completely seperated from UIElement, You can just define it once and can change the look and feel of any control by using it with the element.

WPF gives the flexibility to the change the appearance of whole control itself by using ControlTemplests.
Say for instance, you have a Check Box, which has a Rectangle in it and a ContentPresenter (one where the caption of the Text Box appears). Thus you can redefine your checkbox and put a ToggleButton inside it, so that the check will appear on the ToggleButton rather than on the Rectangle.

New Property System

WPF introduces a new property system i.e. Dependency Property.
Every element of WPF defines a large number of dependency properties. The dependency properties have strong capabilities than the normal properties.

Data Binding

Declarative Programming

WPF provide the capability to the developer to define the rich client UI in a declarative way.
Tasks like defining a template for a control, creating a control hierarchy and similar work would be much easier if it is done in a declarative fashion. In WPF declarative programming was made possible with the introduction of Extensible Application Markup Language (XAML).

Seperation of Appearance and Behavior

WPF separates the appearance of an user interface from its behavior. The appearance is generally specified in the Extensible Application Markup Language (XAML), the behavior is implemented in a managed programming language like C# or Visual Basic. The two parts are tied together by databinding, events and commands. The separation of appearance and behavior brings the following benefits:
  • Appearance and behaviour are loosely coupled
  • Designers and developers can work on separate models.
  • Graphical design tools can work on simple XML documents instead of parsing code.

Rich Composition

Controls in WPF are extremely composable. You can define almost any type of controls as content of another. Although these flexibility sounds horrible to designers, its a very powerful feature if you use it appropriate. Put an image into a button to create an image button, or put a list of videos into a combobox to choose a video file.
    <StackPanel Orientation="Horizontal">
        <Image Source="speaker.png" Stretch="Uniform"/>
        <TextBlock Text="Play Sound" />

What is WPF?

Microsoft introduces WPF, It is the next generation UI framework to create applications with a rich user experience.
It provide one combine framework for application UIs, 2D graphics, 3D graphics, documents and multimedia.
This makes the UI faster, scalable and resolution independent.