Doncho Minkov
Telerik Software Academyacademy.telerik.com
Technical Trainerhttp://www.minkov.it
academy.telerik.com/.../desktop-applications-csharp-wpf
WPF ConceptsDependency Properties, Routing
Table of Contents Dependency Objects Dependency Properties Attached Properties Trees in WPF
Trees in WPF Trees in Silverlight VisualTreeHelper LogicalTreeHelper
Table of Contents (2) Routing
Bubbling Tunneling
Commanding in XAML Built-in commands ICommand The Relay Command
MVVM Design Pattern
Dependency Object
Dependency Object The DependencyObject
Represents an object that participates in the dependency property system
Enables WPF property system services
The property system's 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
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
Dependency Properties
Dependencies
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
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
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
Dependency Properties
Live Demo
Attached PropertiesHow to set properties from another
place
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.
Attached PropertiesLive Demo
Custom Dependency Properties
How to make our own Dependency Properties?
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 static readonly DependencyProperty ScrollValueProperty = DependencyProperty.Register( "ScrollValue", typeof(double), typeof(UserControl), null);
Dependency Property's instance is always
readonly
The name of the Dependency
Property
Registration to the Property System
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
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); }}
Custom Attached Properties
How to make attached properties?
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 readonly DependencyProperty MarginProperty = DependencyProperty.RegisterAttached("Margin", typeof(Thickness), typeof(ContentMargin), new FrameworkPropertyMetadata(default(Thickness), new PropertyChangedCallback(OnPropertyChanged)));
Custom Dependency and Attached
PropertiesLive Demo
Trees in WPFObject, Visual and Logical
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
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
Object Tree
Window Border AdornedDecoration
AdornedLayerContentPresenter
StackPanel
Label
Border
ContentPresenter
TextBlock
Button
Border
ContentPresenter
TextBlock
The Object Tree
Logical Tree
Window Border AdornedDecoration
AdornedLayerContentPresenter
StackPanel
Label
Border
ContentPresenter
TextBlock
Button
Border
ContentPresenter
TextBlock
The Logical Tree
Visual Tree
Window Border AdornedDecoration
AdornedLayerContentPresenter
StackPanel
Label
Border
ContentPresenter
TextBlock
Button
Border
ContentPresenter
TextBlock
The Visual Tree
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
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
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
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)
Traversing Through Trees in WPF
VisualTreeHelper and Logical Tree Helper
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…
Traversing Through Trees in WPF
Live Demo
Routed Events in WPF
Bubbling and Tunneling
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
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
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
Routed Events Example
Tunneling
Window
Grid
StackPanel
TextBlockPreviewMouseLeftButtonDown Event is
raised
Routed Events Example
Window
Grid
StackPanel
TextBlock
Bubbling
MouseLeftButtonDown Event is raised
Routed Events in
WPF/SilverlightLive Demo
Commands in .NET
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
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
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.
The Four Main Concepts in WPF Commanding
The routed command model in WPF consists of four main concepts Command
The action to be executed
CommandSourceThe object that invokes the command
CommandTargetThe object that the command is executed on
CommandBindingThe object that maps command logic to command
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>
Commands in .NETLive Demo
The ICommand Interface
How to implement our own Commands
ICommand Interface
The ICommand interface
public bool CanExecute(object parameter);
public event EventHandler CanExecuteChanged;
public void Execute(object parameter);
Determines whether the
command can be executed
When changes of the CanExecute
state occur
Called to invoke the command
Implementation Command Example
Lets implement a Command to show the selected text in a TextBoxclass 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()); }}
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; }}
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
The ICommand Interface
Live Implementation
Better CommandingEven better than Custom Commands
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
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) {…}
Better CommandingLive Demo
What's the Point of Commands?!
Why the hell we need Commands?
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
Model – View – ViewModel
Design PatternWhat is MVVM?
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
What is Model View ViewModel?
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
MVVM ArchitectureThe View, the Model, the ViewModel
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
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
MVVM Layers Connections
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
View ViewModel
Model
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 ModelView ViewMode
lModel
User Fires an Event
The ViewModel requests data
The ViewModel receives data
The View Shows the new
data
Simple MVVM Implementation
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
Keeps the names
ViewModel Gets/deletes/adds the names
View Gives a UI for these operations
Data and data logic
Business Logic
User Interface
Live Demo
Simple MVVM Implementation
Implementing the ViewModel
INotifyProperyChanged
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
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
Implementing INotifyPropertyChanged
The Property System automatically notifies the View about a change with PropertyChanged
public class ViewModel:INotifyPropertyChanged{ PropertyChanged(object sender,PropertyChangedEventArgs e)
OnPropertyChanged(string propertyName) { if(this.PropertyChanged!=null) { var args=new PropertyChangedEventArgs(propertyName); PropertyChanged(this,args); } }}
MVVM Real Life Implementation
Lets Get Practical
Implementing ImageViewer
We will implement an Image 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
MVVM Real Life Implementation
Live Demo
Questions?
XAML Concepts
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезания
ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGap
free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно
?
? ? ??
?? ?
?
?
?
??
?
?
? ?
Questions?
?http://academy.telerik.com
XAML Concepts
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
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