1. Silverlight 4 Course Introduction to Silverlight Layout Input Handling Applications, Resources, Deployment Data Binding, View Model Out of Browser, File Access, Printing WCF RIA Services (4 Weeks )

2. Silverlight Week 5 Agenda Binding Data contexts Data Templates Binding to collections MVVM ClassProject

3. Message from Silverlight :

4. What is Data ?

5. What is Data ?

6. What is Data ? Database Table. XML In Memory Object Collections Web Service

7. 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.

8. Data Binding

9. 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 ?

10. 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.

11. 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.

12. 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.

13. 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.

14. Clearing Binding BindingOperations.ClearBinding(txtblock, TextBlock.Textproperty) BindingOperations.ClearAllBinding(txtblock)

15. 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.

16. 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.

17. Collections Binding INotifyCollectionChanged ObservableCollection<T> Demo : Add a button and add new item to collection. UI not updated. Why ? br />Change List to ObservableCollection.

18. 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.

19. Various Models MVC : Model View Controller MVP : Model View Presenter Presentation Model : Martin Fowler MVVM : Model View ViewModel (Specific to WPF and Silverlight)

20. 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.

21. 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.