Silverlight 4 Course

1. Introduction to Silverlight

2. Layout

3. Input Handling

4. Applications, Resources, Deployment

5. Data Binding, View Model

6. Out of Browser, File Access, Printing

7. WCF RIA Services (4 Weeks )

Silverlight Week 5

Agenda 

1. Binding2. Data contexts3. Data Templates4. Binding to collections5. MVVM6. ClassProject

Message from Silverlight :

What is Data ?

What is Data ?

What is Data ?

• Database Table.• XML • In Memory Object• Collections• Web Service

Data in Silverlight

• Silverlight is client side technology. You do not connect directly to the database table.

• Using some sort of service you query and get the data.

• Data comes in as XML, JSON etc.• You convert it into some object or collection of

objects. Bind UI to the object property.

Data Binding

Data Binding• Data could be Database, In memory objects, XML.• Binding UI to object.• In Silverlight binding could be done from one element’s property to another

element’s property.• A communication channel opens between the 2.

Binding binding = new Binding();

binding.Source = person;

binding.Path = new PropertyPath(“Age”);

txtblock.SetBinding(TextBlock.TextProperty, binding);

What if several property of same source needs to be bound ?

Binding in Code Behind

• FrameworkElement’s SetBinding() : Any UI element derived from FrameworkElement. UI element is the target.

• BindingOperations.SetBinding() : Static method to support DependencyObject. Target specified as first parameter.

Binding in XAML

• Binding Expressions uses Markup Extensions.

<TextBox Text=“{Binding Path=Surname}” />

Text is the target property whereas Surname is the source property.

Which object’s surname property to use ? Determined by DataContext.

Data Contexts• All UIElements have a property called “DataContext”.• Property Value Inheritance helps us to propagate the DataContext

set on the Root Element. PVI is equivalent to Ambient Property in Windows Forms.

• Data Binding Mode specifies the communication mode.– One way (Silverlight Default)– 2 way (WPF Default)– One Time

• ChangeNotification is the mechanism used by Source Property.

INotifyChanged Interface.

Demo• Create a Person object with properties :

– Firstname (String)– Lastname (String)– Age (int)

• MainPage create a person– Person src = new Person { FirstName = “John”, LastName = “Doe”, Age =

25 };– Set data context in constructor : this.DataContext = src

• XAML : <TextBox Text=“{Binding Path=FirstName}” />• Modify the age. No effect. Explain binding mode.• Add a button to modify age. UI textbox is not updated. Why ? Explain INotify• Later implement INotifyPropertyChanged interface.

Clearing Binding

• BindingOperations.ClearBinding(txtblock, TextBlock.Textproperty)

• BindingOperations.ClearAllBinding(txtblock)

Data Template

• How to present data in a UI. • Used by ItemsControls like ListBox and

ContentControls like Buttons.• Data Templates are just XAML markup with

Binding expression.

Demo

• Data template Part1• Move the grid to <UserControl.Resources>• <DataTemplate x:Key=“myTemplate”>• Add ContentControl

• Binding to collection Part2• Change to List of persons• Use a ListBox.

Collections Binding

• INotifyCollectionChanged• ObservableCollection<T>

• Demo : Add a button and add new item to collection. UI not updated. Why ? \

• Change List to ObservableCollection.

MVVM

• What is it trying to solve ?– Often Code behind has validation logic, interaction

logic, application logic.– Tightly coupled which causes issues:

• Less maintainability• Less manageability• Testing issues

• Ex : ComboBox selected item.

Various Models

• MVC : Model View Controller

• MVP : Model View Presenter

• Presentation Model : Martin Fowler

• MVVM : Model View ViewModel (Specific to WPF and Silverlight)

MVVM• Model

– C# classes– Might be a Gateway to data : WCF, REST, WebClient

• View Model– C# Classes– Might provide more properties like Visibility based on state

(like admin)• View

– XAML– Code Behind.

Class Project

• XAML :Create a Square (rectangle with same size)• Bind the height to width.• XAML :Create a slider.• Bind slider value to height.• Add a Text : 1 –red, 2 –black, 3 –green• Use IValueConverter: Convert, ConvertBack.• <Rectangle background=“{Binding ElementName=“text”,

Path=“Text”, Converter={StaticResource myConverter}>• <User.Resources> <local:NumToBackgroundConverter

x:Key=“myConverter” />• Public class NumToBackgroundConverter : IValueConverter• Convert method : parse the int and retuen Brushes.Red, Green etc.