Upload
damian-chmielewski
View
221
Download
0
Embed Size (px)
Citation preview
8/2/2019 WP7_tpa_6_binding_mvvm
1/24
TPA - Windows Phone
Data binding, MVVM
Prepared by: Kamil Kowalski
8/2/2019 WP7_tpa_6_binding_mvvm
2/24
Agenda
Data binding
Dependency Property, INotifyPropertyChanged
Data flow, Converters
Model View-Model View design pattern MVVM structure
Commands, Behaviors
Advantages & Pitfalls
Some Useful MVVM Frameworks
Q & A
8/2/2019 WP7_tpa_6_binding_mvvm
3/24
Data binding
Almost every application has some kind of data, and theability to connect that data to elements in the UI (the view) is
absolutely essential.
Connection between data and UI can be done:
Programmatically - in various ways to, for example: assigning valuesas you go
bind data to controls - powerful and essential features of XAML
programming.
Note: Data binding is present in WinForms and ASP.NET, but its hard to
say, that this feature ispowerfulin those frameworks.
8/2/2019 WP7_tpa_6_binding_mvvm
4/24
Data binding
What Is Data Binding? Data binding is the process that establishes a connection between the
application UI and business logic.
If the binding has the correct settings and the data provides the
proper notifications, then, when the data changes its value, the
elements that are bound to the data reflect changes automatically.
Data binding can also mean that if an outer representation of the
data in an element changes, then the underlying data can be
automatically updated to reflect the change.
Binding always follows the model:
8/2/2019 WP7_tpa_6_binding_mvvm
5/24
Data binding
Data binding is essentially the bridge between your bindingtarget and your binding source.
Each binding has these four components: a binding target object, a
target property, a binding source and a path to the value in the
binding source to use.
The target property must be a dependency property.
Binding source object is not restricted to being a custom CLR object.
XAML based data binding supports data in the form of CLR objects
and XML (see Binding Sources Overview).
http://msdn.microsoft.com/en-us/library/ms743643.aspxhttp://msdn.microsoft.com/en-us/library/ms743643.aspxhttp://msdn.microsoft.com/en-us/library/ms743643.aspx8/2/2019 WP7_tpa_6_binding_mvvm
6/24
Data bindingdependency properties
The purpose of dependency properties is to provide a way tocompute the value of a property based on the value of other
inputs (see Dependency Properties Overview).
Dependency properties are just like normal CLR properties,
but with a X-factor. The X-factor is that these properties have inbuilt support for data
binding, animation, styling, value expressions, property validation,
per-type default values.
Dependency properties are needed to be able to save state
of UI Elements.
http://msdn.microsoft.com/en-us/library/ms752914.aspxhttp://msdn.microsoft.com/en-us/library/ms752914.aspxhttp://msdn.microsoft.com/en-us/library/ms752914.aspx8/2/2019 WP7_tpa_6_binding_mvvm
7/24
Data bindingdata flow
The data flow of a binding can go from the binding target tothe binding source.
OneWay binding causes changes to the source property to
automatically update the target property, but changes to the target
property are not propagated back to the source property.
TwoWay binding causes changes to either the source property or the
target property to automatically update the other. OneWayToSource is the reverse of OneWay binding; it updates the
source property when the target property changes.
OneTime binding, which causes the source property to initialize the
target property, but subsequent changes do not propagate.
8/2/2019 WP7_tpa_6_binding_mvvm
8/24
Data bindingINotifyPropertyChanged
To detect source changes the source must implement a suitableproperty change notification mechanism such as
INotifyPropertyChanged.
INotifyPropertyChanged- a simple interface that allows each
property to notify the UI when its value changes.
Its common to create a helper method that checks to make sure the
event has at least one method registered to it. If so, the helper method
raises the event, passing in the name of the property that updated.
The UpdateSourceTriggerproperty of the binding determines what
triggers the update of the source.
If the UpdateSourceTriggervalue is PropertyChanged, then binding
source gets updated as soon as the target property changes.
If the UpdateSourceTriggervalue is LostFocus, then that value only gets
updated with the new value when the target property loses focus.
8/2/2019 WP7_tpa_6_binding_mvvm
9/24
Data bindingconverters
Data Conversion or Value Conversion is required whenbinding target needs data to be slightly tweaked from what it
is currently.
Value converters are purely part of binding target.
Value converter must derive from IValueConverterorIMultiValueConverter.
8/2/2019 WP7_tpa_6_binding_mvvm
10/24
Data bindingconverters
Typical scenarios where it makes sense to implement a dataconverter:
Your data should be displayed differently, depending on culture.
The data being used is not necessarily intended to change the text
value of a property, but is instead intended to change some other
value, such as the source for an image, or the color or style of the
display text.
More than one control or to multiple properties of controls are bound
to the same data.
In this case, the primary binding might just display the text, whereas
other bindings handle specific display issues but still use the same
binding as source information.
8/2/2019 WP7_tpa_6_binding_mvvm
11/24
Model View-Model Viewstructure
Model-View-ViewModel (MVVM) pattern splits the UserInterface code into 3 conceptual parts - Model, View andViewModel.
Model - set of classes representing the data coming from the servicesor the database.
View - code corresponding to the visual representation of the data theway it is seen and interacted with by the user.
ViewModel - serves as the glue between the View and the Model. Itwraps the data from the Model and makes it friendly for beingpresented and modified by the view.
ViewModel also controls the View's interactions with the rest of theapplication (including any other Views).
8/2/2019 WP7_tpa_6_binding_mvvm
12/24
Model View-Model Viewstructure
ViewModel code can (and should) refer to the Model, but the Modelclasses (if separate from the ViewModel) should not be aware of the
ViewModel.
View should be aware of the ViewModel, but ViewModel should be not
aware of the View.
8/2/2019 WP7_tpa_6_binding_mvvm
13/24
Model View-Model Viewbasic concepts
MVVM pattern became possible because of the followingconcepts:
Bindings - Each binding connects two properties (possiblyon two different objects) so that if one of them changes,the other changes too.
Data Templates, which convert non-visual data(ViewModel) into its visual representation (View).
Commands or Interactivity functionality (so calledbehavior) serve to pass the events from the Views to the
ViewModels. Bindings, Commands and Interactivity behaviors provide the
necessary plumbing for communications between the Viewand the ViewModel.
8/2/2019 WP7_tpa_6_binding_mvvm
14/24
Model View-Model Viewbasic rules
Try to have minimum code behind. View- supposed to have almost no code. Not even event handlers.
This does not mean absolute zero code is a must, what I mean to sayis that we should have minimum code behind.
An exception would be cases like where the logic ispure View
oriented(and is very specific to that view only) and has nothing to dowith ViewModel or Model or even other Views of same ViewModel.
Sometimes you have to use third party controls which are not MVVMcompliant. In such cases too, you end up having some code behind.
All Events or actions should be treated as Command.
ViewModel is the DataContext of View.
Design ViewModel and View independent of each other.
8/2/2019 WP7_tpa_6_binding_mvvm
15/24
Model View-Model Viewbasic rules
The Binding and C# Events are pointing from the ViewModelto the View even though, as stated above, the ViewModel is
not aware of the View.
The arrows on this diagram are pointing from an MVVM part
that causes a change to the part which receives the change. The Bindings are set within the View and even though the ViewModel
is not aware of the View, the changes to the ViewModel still
propagate to the View via the Bindings.
Event handlers on ViewModel's events should also be set within the
View's code behind, so that the View functionality will trigger achange when changes occur within the ViewModel.
8/2/2019 WP7_tpa_6_binding_mvvm
16/24
Model View-Model Viewcommands
Command object, which is the way to handle events fromView, derives from ICommandinterface which has two
important methods:
CanExecute method controls whether the corresponding control (e.g.
Button or MenuItem) that is bound to this command is enabled or
disabled
Execute method specifies the action to be taken once the Button or
MenuItem is clicked.
Commands have a shortcoming that they can only be
attached to a few visual controls that have Commandproperty, e.g. Button or MenuItem and they only fire on Click
events.
8/2/2019 WP7_tpa_6_binding_mvvm
17/24
Model View-Model Viewbehaviors
Behavior is much more generic in a sense that it allows totrigger corresponding methods on the ViewModel for almost
any event that occurred on almost any visual element within
the View.
Complicated UI interaction is moved away from code-behind and/or
ViewModel.
Behavior offers code reusability.
Behavior allows to abstract certain functionality from
implementation.
Behaviors are easy to use for UI Designer (Expression Blend)
8/2/2019 WP7_tpa_6_binding_mvvm
18/24
Model View-Model Viewbehaviors
8/2/2019 WP7_tpa_6_binding_mvvm
19/24
Model View-Model Viewbehaviors
Behaviors are invoked by a trigger DataStoreChangedTrigger - invoke an action based on a
modification to a data store
DataTrigger - invoke an action based on the value of a data-bound property.
EventTrigger - invoke an action based on an event such as amouse click, a page loading, or another interaction.
KeyTrigger - invoke an action when a combination of keys ispressed on the keyboard.
PropertyChangedTrigger - invoke an action based on amodification to an element or a data store property.
StoryboardCompletedTrigger - invoke an action after astoryboard has finished.
TimerTrigger - invoke an action based on a timer.
8/2/2019 WP7_tpa_6_binding_mvvm
20/24
Model View-Model Viewadvantages
The major advantage of the MVVM pattern is that it provides thebest separation of concerns.
Under MVVM, View is in charge of the visual representation while the non-visual ViewModel is in charge of all of the interactions with the rest of thesoftware including the Model, the Services (usually via the Model) and therest of the ViewModels.
Flexibility and Customization - Different Views can be used withthe same ViewModels allowing completely different visualrepresentations of the same functionality depending on whatdifferent customers want.
Re-use - Because of the separation of Visual and non-Visualfunctionality, both the Views and the ViewModels have higher
potential for re-use than if the Visual and non-Visual functionalitywere mixed, since e.g. a non-visual functionality usually would notbe able to make use of a functionality that contains a Visual part toit.
8/2/2019 WP7_tpa_6_binding_mvvm
21/24
Model View-Model Viewadvantages
Separation of the UI design and development - MVVMmakes it possible to separate the work of the developer andthe designer as clearly as possible:
at first the developer can produce an application with thecrudest possible GUI.
the designer, using designer tools will be able to modify theGUI (the Views) without touching any non-visual code.
Testing - Writing automated tests for a Visual application isnot easy. The View - ViewModel separation allows theViewModel to be unit tested without the view.
Since the ViewModel is in charge of the interactions with the rest of theapplication, such unit tests would cover the most important functionalitywhile the View tests will only have to contain testing of the visualfeatures, e.g. colors, animations, etc.
8/2/2019 WP7_tpa_6_binding_mvvm
22/24
Model View-Model Viewpitfalls
Dialog windowsPossible solutions
custom popup control bound to ViewModel
message to View requesting showing popup
8/2/2019 WP7_tpa_6_binding_mvvm
23/24
Model View-Model View
Useful MVVM Frameworks Simple MVVM Toolkit for Silverlight, WPF and Windows Phone
MVVM Light Toolkit
nRoute: Now, More Wholesome
Build Your Own MVVM Framework
http://simplemvvmtoolkit.codeplex.com/http://mvvmlight.codeplex.com/http://www.orktane.com/post/2010/04/13/nRoute-Now-More-Wholesome.aspxhttp://channel9.msdn.com/events/MIX/MIX10/EX15http://channel9.msdn.com/events/MIX/MIX10/EX15http://channel9.msdn.com/events/MIX/MIX10/EX15http://channel9.msdn.com/events/MIX/MIX10/EX15http://www.orktane.com/post/2010/04/13/nRoute-Now-More-Wholesome.aspxhttp://www.orktane.com/post/2010/04/13/nRoute-Now-More-Wholesome.aspxhttp://www.orktane.com/post/2010/04/13/nRoute-Now-More-Wholesome.aspxhttp://mvvmlight.codeplex.com/http://mvvmlight.codeplex.com/http://mvvmlight.codeplex.com/http://simplemvvmtoolkit.codeplex.com/http://simplemvvmtoolkit.codeplex.com/8/2/2019 WP7_tpa_6_binding_mvvm
24/24
Q & A
??