Silverlight week5

  • View
    805

  • Download
    1

Embed Size (px)

Text of Silverlight week5

  • 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 elements property to another elements 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
FrameworkElements 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.

Text is the target property whereas Surname is the source property.
Which objects 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 specifiesthe 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 :
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

Add ContentControl
Binding to collection Part2
Change to List of persons
Use a ListBox.
17. Collections Binding
INotifyCollectionChanged
ObservableCollection
Demo : Add a button and add new item to collection. UI not updated. Why ?
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.


Public class NumToBackgroundConverter : IValueConverter
Convert method : parse the int and retuen Brushes.Red, Green etc.