Using the MVVM Pattern in Silverlight Applications

By Microsoft Silverlight Team|December 1, 2010|Level 300 : Intermediate

Contents

• Overview
• Exercise 1: Creating a Service Agent Class
• Exercise 2: Creating a ViewModel Class
• Exercise 3: Handling Commands and Binding to a ViewModel
• Summary

Download Offline Kit

Overview

Estimated Time: 45 minutes
The Model-View-ViewModel (MVVM) pattern provides a flexible way to build Silverlight applications that promotes code re-use, simplifies maintenance and supports testing. The pattern consists of three different components including the Model (entities and code on the server), the View (the Silverlight screens) and the ViewModel (the glue between the Model and the View). An example of the how the Model, View and ViewModel components relate to each other is shown next:

In this lab exercise you'll learn how to migrate an existing Silverlight application that uses

Creating WP7 prototypes with Sketchflow

With the upcoming release of Windows Phone Mango, you can create prototypes for Phone apps with Sketchflow. For people not knowing Sketchflow : it allows you to create prototypes that look like they have been drawn. When you present a “normal” prototype to a customer you get conversations like this :

Nice protoype, how long before you can deliver us the final product ?

I estimate we can deliver within 4 months.

What ? You created this prototype in just 3 days, it looks like it’s almost finished. How can it possibly take 4 months for completing ?

A sketchflow prototype looks more “unfinished”. It’s not new, it has been around for WPF and silverlight, but you can now also get the projecttemplate for WP7 for using in Blend. Just go to http://wp7sketchflow.codeplex.com/, download and install. Beware : you can only use this thing if you have the full paid version of Blend. The one you get for free with the phone developers tool will not do.

OK. Let’s open up Blend and create a Windows Phone SketchFlow application :

Creating a Silverlight Custom Control

Introduction

This articles focuses on the process of creating a Custom Control in Silverlight 2. It describes the basics of what you need to build a styleable control with custom logic that can be used in Silverlight applications. The article shows a sample(part) of implementing a LinkLabel control that recognizes URIs in a given text and displays them as links instead of as plain text.

Overview

The control model in Silverlight 2 offers creating UserControls and Custom Controls. UserControls enable encapsulation of a specific logic. They are used in scenarios where you want to reuse XAML and/or logic in multiple places or build a sophisticated page with smaller chunks(the UserControls). However, in other scenarios you may need a custom logic to be built in the control and this control to allow designers customize easily its look. You need a way to modify the control visuals without having to modify the control logic. This is where the Custom Controls comes in handy. In Silverlight they derive from the Control class and specify a default style for the way they will look like.
To get started create a Silverlight Class Library project in Visual Studio. This will generate just a single .cs file. Lets take a sample implementation of a LinkLabel control.

 public class LinkLabel : Control

 {

 ...

 }

Ok, the first step is to define a default look for this control. A file called generic.xaml contains the UI of your custom controls. It should be placed in a "themes" directory inside your project. Add a new item of type XML File in your project in the "themes" directory and name it generic.xaml. By default when you add a new file the Build Action is set to Silverlight page. But the platform look for the generic.xaml as a Resource file. Therefore you need to change the default behavior:

1. Open the Properties window of the file.
2. Change the Build Action to Resource.
3. Clear the Custom Tool value.

In the generic.xaml add a ResourceDictionary element where you will put all the resources.

Creating Lookless Controls for WPF and Silverlight

This screencast is a continuation of a previous screencast entitled “Skins for WPF and Silverlight”. In this session we go beyond skinning built-in controls and learn what’s required to create our own skinnable (or ‘lookless’) controls.

This screencast assumes existing knowledge about styles and templates, so if you aren’t up to speed on those topics please consider watching the skinning screencast first.

The sample demonstrated in this screencast can be downloaded here.

Project Silk Drop 11

Project Silk Drop 11: "

The patterns & practices Web Guidance team released Drop 11 of Project Silk (6-14-2011). This drop includes work recommended by the advisory board and 3rd party code review of the JavaScript.

Code Updates

• Significantly reduced the coupling to the mstats global object. Widgets are no longer stored as members on mstats. Instead, widgets are either created in the bootstrapping mileagestats.js or in another managing widget.
  
• Added a utility function for mixing in helper methods that simplify the syntax for invoking public method on widgets (when used inside of another widget).
  
• Significantly reduced the number of hard-coded URLs. URLs are generally pulled from data- attributes.
  
• Corrected an issue with the way that the chart vehicle selection UI was constructed. Changes in jQuery 1.6.1 caused this to surface.
  
• Now correctly redirects to the Login page when a session timeouts and JSON request is made while using the Single Page Interface.

Chapters

We are providing the guidance chapters in Word document, .pdf, and .chm format. Providing the chapters in Word format makes it easier for the community to provide feedback by using the Word Track Changes feature. If you provide feedback on a chapter, you can upload your feedback to: Project Silk Issue Tracker.

The following chapters are ready for review:

• Client Data Management and Caching (new)


• Architecture (updated)


• jQuery UI Widgets (updated)


• Application Notifications (updated)


• Server-Side Implementation


• Security


• Unit Testing Web Applications


• Widget QuickStart (updated)


• How to: Check UIElement Properties with Coded UI Test


• How to: Create Automation Negative case with Coded UI Test


• How to: Create Web Client UI Test using Coded UI Test

The following chapters are currently being written or will be started soon:

• Introduction (in progress)


• Modularity (in progress)


• Navigation


• Communication

Video

We have also made a new video for Project Silk that includes a short tour through the countryside with stops for gas and parts. During parts of the video, the Mileage Stats UI displays as a HUD (heads up display). After this short but entertaining introduction a new tutorial video beings. This video is currently in production and will be released on Channel9 soon.

Close

We welcome and appreciate your feedback on the application and book content.

Have a great day,

Just a grain of sand on the worlds beaches.

10 Silverlight 5 Demos

Last week in Germany at DevConnections, I presented a session on 10 cool features in Silverlight 5. This presentation was a combination of demos that both I and Pete Brown had put together over the past few weeks. You can download the slide deck and the sample code right here.
The 10 topics I chose to demonstrate are:

I also presented a talk on MVVM, which uses the same BookShelf app demo I used at the Silverlight Firestarter. You can download the deck and demo for that from this link.
Note: I’m working on cleaning up my demos from my joint talk with Dan Wahlin on jQuery and KnockoutJS, which covered MVVM concepts.

n