Silverlight week5


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Silverlight week5

  1. 1. Silverlight 4 Course<br />Introduction to Silverlight <br />Layout <br />Input Handling <br />Applications, Resources, Deployment<br />Data Binding, View Model<br />Out of Browser, File Access, Printing<br />WCF RIA Services (4 Weeks )<br />
  2. 2. Silverlight Week 5<br />Agenda <br />Binding<br />Data contexts<br />Data Templates<br />Binding to collections<br />MVVM<br />ClassProject<br />
  3. 3. Message from Silverlight :<br />
  4. 4. What is Data ?<br />
  5. 5. What is Data ?<br />
  6. 6. What is Data ?<br />Database Table.<br />XML <br />In Memory Object<br />Collections<br />Web Service<br />
  7. 7. Data in Silverlight<br />Silverlight is client side technology. You do not connect directly to the database table.<br />Using some sort of service you query and get the data.<br />Data comes in as XML, JSON etc.<br />You convert it into some object or collection of objects. Bind UI to the object property.<br />
  8. 8. Data Binding<br />
  9. 9. Data Binding<br />Data could be Database, In memory objects, XML.<br />Binding UI to object.<br />In Silverlight binding could be done from one element’s property to another element’s property.<br />A communication channel opens between the 2.<br />Binding binding = new Binding();<br />binding.Source = person;<br />binding.Path = new PropertyPath(“Age”);<br />txtblock.SetBinding(TextBlock.TextProperty, binding);<br />What if several property of same source needs to be bound ?<br />
  10. 10. Binding in Code Behind<br />FrameworkElement’s SetBinding() : Any UI element derived from FrameworkElement. UI element is the target.<br />BindingOperations.SetBinding() : Static method to support DependencyObject. Target specified as first parameter.<br />
  11. 11. Binding in XAML<br />Binding Expressions uses Markup Extensions.<br /><TextBox Text=“{Binding Path=Surname}” /><br />Text is the target property whereas Surname is the source property.<br />Which object’s surname property to use ? Determined by DataContext.<br />
  12. 12. Data Contexts<br />All UIElements have a property called “DataContext”.<br />Property Value Inheritance helps us to propagate the DataContext set on the Root Element. PVI is equivalent to Ambient Property in Windows Forms.<br />Data Binding Mode specifies the communication mode.<br />One way (Silverlight Default)<br />2 way (WPF Default)<br /> One Time<br />ChangeNotification is the mechanism used by Source Property. INotifyChanged Interface.<br />
  13. 13. Demo<br />Create a Person object with properties :<br />Firstname (String)<br />Lastname (String)<br />Age (int)<br />MainPage create a person<br />Person src = new Person { FirstName = “John”, LastName = “Doe”, Age = 25 };<br /> Set data context in constructor : this.DataContext = src<br />XAML : <TextBox Text=“{Binding Path=FirstName}” /><br />Modify the age. No effect. Explain binding mode.<br />Add a button to modify age. UI textbox is not updated. Why ? Explain INotify<br />Later implement INotifyPropertyChanged interface.<br />
  14. 14. Clearing Binding<br />BindingOperations.ClearBinding(txtblock, TextBlock.Textproperty)<br />BindingOperations.ClearAllBinding(txtblock)<br />
  15. 15. Data Template<br />How to present data in a UI. <br />Used by ItemsControls like ListBox and ContentControls like Buttons.<br />Data Templates are just XAML markup with Binding expression.<br />
  16. 16. Demo<br />Data template Part1<br />Move the grid to <UserControl.Resources><br /><DataTemplate x:Key=“myTemplate”><br />Add ContentControl<br />Binding to collection Part2<br />Change to List of persons<br />Use a ListBox.<br />
  17. 17. Collections Binding<br />INotifyCollectionChanged<br />ObservableCollection<T><br />Demo : Add a button and add new item to collection. UI not updated. Why ? <br />Change List to ObservableCollection.<br />
  18. 18. MVVM<br />What is it trying to solve ?<br />Often Code behind has validation logic, interaction logic, application logic.<br />Tightly coupled which causes issues:<br />Less maintainability<br />Less manageability<br />Testing issues<br />Ex : ComboBox selected item.<br />
  19. 19. Various Models<br />MVC : Model View Controller<br />MVP : Model View Presenter<br />Presentation Model : Martin Fowler<br />MVVM : Model View ViewModel (Specific to WPF and Silverlight)<br />
  20. 20. MVVM<br />Model<br />C# classes<br />Might be a Gateway to data : WCF, REST, WebClient<br />View Model<br />C# Classes<br />Might provide more properties like Visibility based on state (like admin)<br />View<br />XAML<br />Code Behind.<br />
  21. 21. Class Project<br />XAML :Create a Square (rectangle with same size)<br />Bind the height to width.<br />XAML :Create a slider.<br />Bind slider value to height.<br />Add a Text : 1 –red, 2 –black, 3 –green<br />Use IValueConverter: Convert, ConvertBack.<br /><Rectangle background=“{Binding ElementName=“text”, Path=“Text”, Converter={StaticResource myConverter}><br /><User.Resources> <local:NumToBackgroundConverter x:Key=“myConverter” /><br />Public class NumToBackgroundConverter : IValueConverter<br />Convert method : parse the int and retuen Brushes.Red, Green etc.<br />