This document provides recommendations for best practices when developing Silverlight 3 applications using the Model-View-ViewModel (MVVM) pattern. It discusses using the MVVM pattern to separate application logic, data, and user interface. It also recommends specific practices like using an ObservableCollection for data binding, implementing INotifyPropertyChanged, and attaching view models to views to associate data and behavior. The document provides tips for styles and resources, data annotations, and performance optimizations in Silverlight development.

1. SMTC WenemRmnrnr XNXNXNNXNX SNS, EndndjHsmnwmd ndvbsn@infusion.com August 29, 2007 Silverlight 3 Best Practice Do’s and Don’ts

2. Stephen Kennedy (skennedy@infusion.com) Presenter

3. Design Patterns Development Optimizations Overview

4. Design patterns Silverlight 3

5. Model View Controller/Presenter Pattern Problem: Decoupling data display logic from the business logic that maintains and updates it Solution: MVC Pattern separates the modeling of the domain, presentation, and actions based on user input into three separate classes: Model: Manages behavior/data of the application domain responds to requests for information about its state (usually from View) responds to instructions to change its state (usually from Controller). View: Manages the display information Controller: Informs the Model to change its state by interpreting inputs from keyboard, mouse and external instructions.

6. Developed by Martin Fowler, and is an extension of MVP Again, the View is separated from its behavior and state A Presentation Model is introduced, which acts as an abstraction of the view – so the view is merely a rendering of the Presentation Model View has a reference to Presentation Model, but Presentation Model has no reference to view Presentation Model

7. MVP/MVC nice for web and thick client Good for ASP.NET,WinForms, WPF (as a start) Good for Silverlight as a start What you’re used to

8. Identical to Presentation Model, but engineered by John Gossman to utilize WPF Dependency Properties and Commands to bind UI to abstraction Ideal as it allows abstraction, called the ViewModel, to be tested Also allows for any UI to bind to ViewModel fields to show and modify the data XAML controls / Elements bind to properties in the ViewModel class Use Model-View-ViewModel Pattern

9. Model POCO – no Dependency Properties / Routed Events No UI knowledge - pure data Design Patterns: MVVM

10. View Model No knowledge of the view Exposes the model(s) / custom properties used in the view Use ObservableCollection<T> for collections of data Implement INotifyPropertyChanged for custom properties Should be able to act as a command line interface to the view No Dependency Properties Design Patterns: MVVM

11. View Binds to the ViewModel (DataContext) Use converters to bind visual elements to ViewModel / Model properties ie: Model’s Temperature  Colour Brush Events are hooked up through either code-behind or commanding Commanding better, but no OOB support in SL Silverlight Extensions project on CodePlex Custom Behaviors Composite Application Guidance/Library (Prism) Design Patterns: MVVM

12. View and ViewModel Binding ViewModel.cs App.xaml.cs ModelData md; public ViewModel() { md=new ModelData(); } public string Data { get{ return md.Data;} set{ md.Data = value;} } public App() { View view = new View(); view.DataContext= new ViewModel(); //… } View.xaml ... <TextBox Content=“{Binding Data}” ... /> ...

13. Can use “regular” property procedures in ViewModel If binding a collection to a DataGrid, etc., prefer the ObservableCollection<> (or non-generic equivalent) to sync updates back to the Model automatically MVVM Data Binding

14. MVVM Collection Item Binding The View should never bind to the data directly, but bind to a ViewModel If a collection of data is to be displayed in the View, the main ViewModel should expose an ObservableCollection of an additional ViewModel class that exposes properties, and thus, data Property ... Property ... Property ... Property ... Property ... Property ... public ObservableCollectionMyOC ...{ return new ObservableCollection<ViewModel2> ... } Property ... Property ... Property ... <DataGridItemsSource=“ {Binding MyOC}” .../> Property ... Property ... Property ... Property ... Property ... Property ... ViewModel2 The View ViewModel1

15. Issue: changing property values in ViewModel does not always update bound control in View Solution: have ViewModel implement INotifyPropertyChanged interface, and raise PropertyChanged event in each property Or better yet, create a base ViewModel class and have each ViewModel subclass it Property Binding

16. Attached Properties in XAML can also be used in lieu of missing Command Create Command, expose as property in ViewModel Create static class with Attached Property Add namespace to XAML screen Place Attached Property in desired control Commands and Attached Properties

17. Attached Property

18. ViewModel and XAML with Attached Property

19. The View knows about the ViewModel, but the ViewModel does not know about the View ViewModel is assigned to the DataContext of the View (Silverlight XAML) In xaml.cs codebehind for page In App.xaml.cs In XAML via Resource Other Associating ViewModel with View

20. Create ViewModel base class (implement INotifyPropertyChanged) Have all ViewModels subclass base Expose NO models to View directly Use Attached Properties as ‘workaround’ to lack of Commands in Silverlight controls Possibly Behaviors … Good practices …

21. Development Silverlight 3

22. Easy to get sloppy – name all controls/elements UI elements should have the same naming convention as your private class variables (that’s what they become) ie: <Button x:Name=“_submitButton” /> Prefix every resource with a “namespace” “Storyboards.FlashUserImage” “Brushes.ButtonBackground” “Templates.GiftsListBox” Development

24. [Range(1,100)]

25. [StringLength(15)]

26. [RegularExpresion(“^M.*”)]

27. [CustomValidation(typeof(MyValidator, “MyValidationMethod”))Can be applied at class or property level Data Annotations are your friend

29. Use a method name convention (use a constant)Data Annotations

31. RD_Colours.xaml

32. RD_Sizes.xaml

33. RD_Brushes.xaml

34. RD_Styles.xaml

35. RD_Templates.xaml

36. …Styles and Resources

37. Optimizations Silverlight 3

38. Use Visibility rather than Opacity to hide objects Use transparent control backgrounds sparingly Avoid long-running JavaScript tasks and more Performance Tips …

39. Never make the user wait and wonder Progress, progress, progress Minimize XAP size (this initial download) Make services prime, but remember Progress, progress, progress User interaction

40. Resizing Blending Drawing resultant pixels onscreen ALL can be done with GPU acceleration enabled In <object> tag <parm name=“enableGPUAcceleration” value=“true” /> Hardware optimization

41. Q&A Silverlight 3