02_xaml_data_binding_basics.pdf

7/27/2019 02_XAML_Data_Binding_Basics.pdf

1/27

02 | Basics of View Models

Ben Rigahttp://about.me/ben.riga


2/27

Building Apps for Both Windows 8 and Windows Phone 8 Jump Start01 | Comparing Windows 8 and Windows Phone 8

02 | Basics of View Models

03 | MVVM ( (Model-View-ViewModel)

04 | Sharing Code

Course Topics


3/27

Data binding basicsData binding: under the hood

Dependency object, dependency property

View Model

INotifyPropertyChanged, INotifyCollectionChanged

Commands

Q&A

Agenda


4/27

Data Binding Basics


5/27

Writing the code to synchronize a data model with a vbe difficult to maintain and testCould use a mechanism to help with this task

Data binding lets you synchronize the data displayed with a data source

Data Binding Overview


6/27

Each data binding has three parts:

Binding source: an object with data that you want to present (this is the View Model)

Binding target: a DependencyProperty of a FrameworkElement

Binding object: synchronizes data between the source and target, possibly reformattingconverter

Data Binding Overview


7/27

Binding engine gets information from the Binding obje

Source and target objects

Direction of the data flow (Binding.Mode property)

Optionally, a value converter (Converter property)

- Instance of a class that implements IValueConverter

Data Binding Architecture

Binding Source(DependecyProperty /

INotifyPropertyChanged)

BindingObject

Data Updates(one-way)

Data Updates(two-way)

Data Updates(one-way)

Data Updates(two-way)


8/27

Two ways in XAML to define the source object for a da

binding:DataContext property

- Must bind to a type that implements INotifyPropertyChanged

- Sets the bindings for that element and all child elements

ItemsSource property of a List control

- Must bind to a type that implements INotifyCollectionChanged

ObservableCollection is a built-in class that implements this- Items contained by the collection must implement INotifyPropertyChanged

Data Binding


9/27

Data Binding:

Under the Hood


10/27

A DependencyProperty is a special type of propertyCan be data bound

Tracked by XAML Binding Engine

For data binding to work, the object with the dependency property must be a subclass DependencyObject

-FrameworkElement is a subclass ofDependencyObject, so all controls can parbinding

Dependency Property, Dependency


11/27

Converters let you bind a target and a source that aretypes

For example: suppose you want to show an element only if a bool variable is true

Provide a class that implements IValueConverter

- Implement Convert that converts from the source type to the target type

- Implement ConvertBackthat converts from the target type to the source type

- Implement these methods to create any mapping between two types.

Converters


12/27


13/27

More advanced property paths

Instead of just setting the source to a property of the data context object, you can chainproperties to dig into the object:

Use the StringFormat property to format text in data bThe property being bound should implement the IFormattable interface (DateTime in t

Other Binding Options


14/27

Demo 1: Data Bindi


15/27

A class that acts as a binding source is considered a VLoosely coupled to a View

- Avoid direct references to individual XAML elements

Exposes properties for binding

Implements INotifyPropertyChanged and raises the PropertyChanged event whenev

set

Include business logic to respond to user actions in the view

Makes sure that changes to data are persisted

- Tells a data service to save changes

View Model


16/27

View Model ExamplepublicclassItemView Model : INotifyPropertyChanged {

privatestring _name;publicstring Name{

get { return _name; }set {

if (value != _name){

_name = value;NotifyPropertyChanged("Name");

}}

}publiceventPropertyChangedEventHandler PropertyChanged;

privatevoid NotifyPropertyChanged(String propertyName){

PropertyChangedEventHandler handler = PropertyChanged;if (null != handler){

handler(this, newPropertyChangedEventArgs(propertyName)); }

}}


17/27

Binding source objects (View Models) that are part of or TwoWay binding must implement theINotifyPropertyChanged interfaceFire the PropertyChanged event whenever the value of a public property changes

The runtime framework subscribes to this event and uses it to update bound UI elemen

One time binding does not require this

INotifyPropertyChanged


18/27

Can also bind to listsTwo ways to bind collections of data:

Extend ObservableCollection

Implement IList and INotifyCollectionChanged

Items in the collection must implement INotifyPropertyChanged

In the ItemsPanel of the XAML list element, you are bound to the individual item of the

Data Binding with Lists


19/27

Let you expose a method like a property

Can attach commands to buttons (of any type) and mAutomatically executed by the system

Lets the view notify the code that some action has occ

For example, when the user clicks a button, the app could clear a canvas or refresh data

Implement the ICommand interfaceExecute: code that runs when the command is invoked

CanExecute: called to check if the command is enabled

CanExecuteChanged: raise this event when a command is enabled/disabled

Commands


20/27


21/27

Recap


22/27

Binding greatly reduces the amount of code required

synchronize your app data with the data presented in Use a view model to present data to the view and update the model as necessary

The XAML binding engine does most of the work for y

Recap


23/27

Use binding markup extensions to link properties of XA

elements to the sourceAll XAML controls are FrameworkElement , which inherits DependencyObject

Make sure to set the DataContext or the ItemsSourcewhen data binding

Can do this from code after loading your data

Implement the INotifyPropertyChanged interface in yobinding source object

Recap (cont.)


24/27

Use converters to bind different source and target typProperties in the binding property path can be chaineto dig into objects that are containers

Decide which binding Mode (one-time, one-way, two-best for each property

Recap (cont.)


25/27

Use commands to run some code when the user interan element, such as clicking a button.

No event handling needed, system automatically invokes the method

Can reuse commands to provide multiple ways to achieve the same thing in the UI

Recap (cont.)


26/27

Q&A


27/27

02_xaml_data_binding_basics.pdf

Documents