Getting Started with Knockout.js

In the first of this series, we looked at the developer preview of Windows 8, mostly from an end-user perspective. While showing you the new version, along the way, I explained several concepts which are new in this upcoming version of Windows, such as tiles, Metro style apps, charms and many more. From this article onwards, I won’t be explaining these concepts, you can refer to the first part for an explanation (of course, when the concept wasn’t covered, we’ll look into it!).

More importantly, what will we be looking at in this part? In the first part, we saw that Metro style apps are built using the Windows Runtime (aka WinRT). One question that I had after watching the first sessions of the BUILD conference (www.buildwindows.com) was a very simple question: “What exactly is WinRT and how does it relate to .NET?”. On top of that, I wondered if I would have to learn a new language or be able to leverage my .NET/Silverlight knowledge. All valid questions that I reckon many people have today. In this (and the next) part of this series, I will dive into WinRT: we’ll start writing some code that will eventually lead us to writing our first Windows 8 Metro style app! Fasten your seatbelt; we are ready for take-off!

Hello World… sorry, WinRT

What exactly is Windows Runtime (WinRT)? Well, it can be described as a new programming model/framework that enables us to build Metro style apps using the language of our choice, be that a managed language (C# or VB.NET), C++ or JavaScript. It enables developers to build applications that heavily use functionality exposed by Windows, which was previously difficult to achieve. Below, you can once again see the Windows 8 diagram, shown at BUILD and discussed a lot since then. Note here that WinRT sits right on top of Windows as a thin layer, exposing functions of Windows. These functions can be used in Metro style apps from all languages. In this context, Microsoft speaks of a language projection, which makes it possible to use WinRT in a way that is native to the language. For .NET developers, using WinRT is very similar to writing .NET code. Concepts such as constructors, properties, async development and many more are exactly the same when writing Metro style apps based on WinRT. We’ll see that further in this article.

Note that XAML is the way to build up your UI when using either a managed language (C# or VB.NET) or C++. When choosing the JavaScript way, we can only use pure HTML/CSS, at this point, there’s no support for example to use something like Razor syntax.

WinRT exposes quite a lot of functions to Metro style apps. A lot of things that we are used to doing by writing some .NET code is now covered by WinRT. Things like IO, service access and even XAML itself has now become a part of WinRT. In quite a few places though, including in XAML, you won’t even notice that you aren’t writing .NET code (but again, more on this later in this articles). The following image shows the functions covered by WinRT (this image comes from slides shown at BUILD).

WinRT architecture

Take a look at the image below. This schema gives an overview of the architecture of WinRT; we explain the different parts next.

At the very base, we have Windows. Directly on top of Windows, we have the core building blocks of WinRT. As mentioned above, WinRT contains quite a few things we’ll discover later, such as XAML, pickers (FilePicker), IO and storage…

Windows Metadata

The Windows Metadata is depicted on the left in the picture above. Windows Metadata (aka WinMD) refers to metadata files, similar to metadata for assemblies we have in .NET (a self-describing assembly). In WinRT, WinMD is conceptually the same: it describes what a WinRT component can do. It’s different in that it’s a separate file (whereas in .NET, metadata is included in the assembly itself). WinMD files are present on every installation of Windows 8 and they form the base of IntelliSense when writing Metro style apps in Visual Studio.

To see the WinMD files, simply points your Windows Explorer to Windows –> System32 -> WinMetaData as shown below. Note that these *.winmd files only contain the metadata itself!

We can even open these files with ILDASM and browse the code inside. Below, I have opened the Windows.Storage.Pickers metadata file. We can see all the methods and much more supported by this component. As you can see, there’s a definite influence by .NET on the way WinRT was built.

The Windows namespace refers to the fact that all WinRT classes are under the Windows.* namespace.

Language projections

We have briefly touched already on the language projection. WinRT is written in native (C++) code. Being native, the WinRT APIs would normally have to be called using interop code (COM). Most developers don’t like to write COM code; luckily for us Microsoft understood this. They didn’t give us the native APIs to work with. No, instead, we get language projections. Basically such a projection enables us to use the native components in a way that’s natural and familiar for the language. Microsoft isn’t forcing us to learn a new language: they simply “project” WinRT in languages we already have and know today. We’ll see some code soon that proves this!

The Metro style apps we will write are built using WinRT components but using a managed language, C++ or JavaScript.

The runtime broker

Finally, the broker is responsible for checking if a Metro style app is declaring all its capabilities (such as accessing the Pictures library) and showing the user whether or not he/she permits this. We’ll see this broker further in this articles series again when we work with the webcam.

Being async

If you’ve watched some of the BUILD sessions online, you probably heard one of the speakers refer to the Windows 8 user experience being “Fast and Fluid”. Microsoft is clearly committed to performance with Windows 8. They want to user to have a responsive device, even on lower end devices. To achieve fast and fluid, we as developers need to break with a habit of the past: writing synchronous code and adopt the fact that we’ll have to focus on asynchronous code.

This “being async” is baked into the WinRT platform. Every call that takes longer than 50ms is by default now async. Previously in Silverlight, calls to a service were already asynchronous. That very concept is now applied on a much wider scale throughout Windows and WinRT. This results in writing async code when for example accessing the file system.

To anticipate on this, Microsoft introduced the “await” keyword in C#: this makes dealing with async calls in WinRT APIs much easier. Through the language projection, which makes WinRT feel familiar to the managed developer, we are able to use this keyword when writing Metro style apps. We’ll see in the code samples in the coming articles how this works.

What’s in WinRT

Now that we have a clearer understanding of WinRT, let’s take a look at what exactly there is available in WinRT. The following is a list of top-level namespaces in the WinRT API (developer preview):

Windows.ApplicationModel
Windows.Data
Windows.Devices
Windows.Foundation
Windows.Globalization
Windows.Graphics
Windows.Management
Windows.Media
Windows.Networking
Windows.Security
Windows.Storage
Windows.System
Windows.UI[.Xaml]
Windows.Web

A lot of things that were previously covered by .NET are now moved into WinRT. For these functionalities, you will be using WinRT APIs in your code. When writing XAML and you’re using a Button control, you are no longer using the System.Windows.Controls namespace and the Button class that’s part of it. Instead, you are using the Button class which is now living in the Windows.UI.Xaml namespace, courtesy of WinRT.

But what if you want to use something that’s part of .NET but isn’t covered in WinRT? Things like LINQ, threading… Aren’t they available anymore?

The answer is: probably yes. I say probably because of the following. Microsoft adds a so-called Windows 8 Tailored Profile of .NET. The following image tries to clarify this concept.

We have the huge .NET API. Silverlight’s API is a tailored profile. It’s basically a subset of .NET. The same goes for Windows Phone 7: it contains some APIs of the full .NET and some specific ones, not used in any other tailored profile.

For Windows 8, there’s also a tailored profile available.

In that tailored profile of Windows 8, the following APIs are available:

System.Collections
System.ComponentModel
System.Diagnostics
System.Dynamic
System.Globalization
System.IO
System.Linq
System.Net
System.Numerics
System.Reflection
System.Resources
System.Runtime
System.Security
System.ServiceModel
System.Text
System.Threading
System.Xml

Although the list is quite long, the tailored profile is in fact quite small. It’s even smaller currently than the Windows Phone one. As Metro-style apps are focused on the consumer side of things, the enterprise level stuff is not covered. There’s no Console support, ASP.NET integration, Entity Framework support… Keep this in mind when thinking of your first Metro-style app!

Summary

In this article, we’ve now deeply covered technical concepts surrounding the development of WinRT, setting the stage for writing Metro-style apps. And that’s exactly what we’ll be doing in the next articles of this series. Stay tuned for part 3!

About Gill Cleeren

Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP) and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina (http://www.ordina.be/). Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium – Switzerland - Sweden, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden, Telerik RoadShow UK… He’s also the author of many articles in various developer magazines and for SilverlightShow.net and he organizes the yearly Community Day event in Belgium. He also leads Visug (www.visug.be), the largest .NET user group in Belgium. Gill recently published his first book: “Silverlight 4 Data and Services Cookbook” (Packt Publishing). His second book, Silverlight 5 Data and Services Cookbook will be released early 2012. You can find his blog at www.snowball.be.

Twitter: @gillcleeren

Using the Live SDK in Windows 8 XAML/C# Metro Applications

editorial@silverlightshow.net (Michael Crump ) — Mon, 30 Jan 2012 03:59:34 GMT

Introduction

The Microsoft’s Live SDK (or commonly referred to as Live Connect), provides a set of controls and APIs that enables applications to integrate single sign-on (SSO) functionality using Windows Live ID. You can also use it to access data in SkyDrive, Hotmail, and Windows Live Messenger.

Don't miss...

The library supports multiple platforms, including Windows Phone 7 Mango and Windows 8 Metro Style applications using either C#, Visual Basic or JavaScript. In this article, we will build our first metro style application using the Live SDK and XAML/C#.

Download the Bits

Let’s begin by downloading the following items:

You will need to download the Windows 8 Developer Preview to follow along with this article. This will install Windows 8 along with the new Visual Studio 11 which is required to build Metro applications.
Download the Live SDK v5.0 or higher - The Live SDK provides a set of controls and APIs that enable applications to integrate single sign-on (SSO) using Windows Live ID and to access data in SkyDrive, Hotmail, and Windows Live Messenger.
Optional, but highly recommended - The Metro Style App Samples which provides various sample metro applications for future reference. It is licensed for public use, so feel free to use it in your own applications.
Optional, but recommended - Read the Windows 8 Developer Preview guide to start learning about the features/functionality coming in Windows 8.

Signing into Windows 8 Using your Windows Live ID

One of the most important things to learn before building your first application that uses the Live SDK is the various ways to sign into your Windows 8 machine.

You currently have two ways to sign into your Windows 8 machine and each way determines the prompts the users will receive when launching a application that uses the Live SDK.

A Local Account – which stores all of the data regarding your profile on the local machine.
- If you user is using this method, then they will get the prompt to sign in and to allow access.
A Windows Live ID – retrieves profile information directly from your Live ID and enables features such as roaming and easy sign-on to Microsoft services.
- If you user is using this method, then they will only get the prompt to allow access.

In this tutorial, we will be signing into Windows 8 using our Live ID.

If you have already setup a “Local Account” then you can switch very easily by going to Control Panel –> Users then clicking on “Switch to a Windows Live ID” as shown below.

You will then be prompted to enter your current password of the local account and log in using your Live ID username/password. If you don’t have one then you may sign up for one through this wizard.

Immediately following you should receive an email similar to the one below:

If you click on the link to confirm your identity then a web browser will pop open and you will be greeted with “Manage Security Info”. This screen will list mobile devices, email address and trusted PC linked to your account. As we can see below that I have three Windows 8 machines linked to my account.

You can also add a new trusted PC manually with the “Add New” link. To use this feature, you must access your account using Internet Explorer and have Windows Live Essentials installed.

Let’s Get Started

Now that we have the necessary tools to begin building a Metro Application using C#/XAML and we we have signed into Windows 8 using our Live ID, let’s begin.

In this sample application, we are going to retrieve the following information from the users profile:

Users First and Last Name
What gender they are and what region they live in
URL to their Live Profile

As well as add a contact to their address book.

Launch Visual Studio 11 Developer Preview and select Visual C# -> Windows Metro style –> Application. Give the project the name MyFirstLiveConnectApp and hit OK.

Adding the Live SDK References

In case you haven’t already, please download and install the Live SDK v5.0 before proceeding.

Once that is complete, we can add the references to our project by Right Clicking on References inside of Visual Studio 11 and selecting “Add Reference”. Next, you will need to select Windows –> Extension SDKs –> Live SDK then Add.

Registering the Application with Windows Live

Before we begin building this app, you need to register it with Windows Live. You can register your app by going to the application management site and following the instructions on the site.

The only item that you want to pay special attention to is the Package Name in Step 3 as you will copy and paste that into your Application’s Package.appxmanifest file. (A walk-through is included in that site).

If you don’t register your application and try to use Live services, then your user will be presented with the following error message.

Once this process is complete you can view your registered applications here. This page will contain all the API settings needed to use the Live SDK in your projects.

Understanding what is under the hood…

When we select the C#/XAML Application template, Visual Studio 11 provides us with basic application structure. Before we begin building our own, it makes sense to spend a few minutes examining the XAML pages included in the existing structure.

References – It is empty by default because Microsoft decided that all the WinRT assemblies are always referenced by default and they have no reason to display them. Any of your own referenced assemblies or third party references will be shown as in this case our Windows Live SDK is shown.
App.xaml is used by Metro applications (amongst other XAML technologies) to declare shared resources like brushes, various style objects etc. The code behind file of App.xaml is used to handle global application level events like OnLaunched and OnActivated.
MainPage.xaml contains the markup of what our user interface will look like once the application is executed. The default Metro MainPage.xaml file consists of a UserControl and a Grid.
Package.appxmanifest – Is basically an XML file, but if you double click it then you will notice four tab panels inside it (named: Application UI, Capabilities, Declarations and Packaging)

Back to Building a Simple User Interface

Here is a mock-up screen of what our app will look like:

As you can see we have 2 buttons:

Windows Live Sign-In – Provided by the Live SDK and is used to log the user into the app to retrieve Live Services information.
Create Contact – Just a regular button that will be used to create a contact in the users address book.

On the left hand side you can see information retrieved by the Live SDK including first and last name, gender, location and live profile URL.

Double click on your MainPage.xaml and replace the existing Grid with the code snippet provided below.

   1: <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">   2:     <Grid.ColumnDefinitions>   3:         <ColumnDefinition Width="251*"/>   4:         <ColumnDefinition Width="1116*"/>   5:     </Grid.ColumnDefinitions>   6:     <StackPanel Grid.ColumnSpan="2">   7:         <live:SignInButton Name="btnLogIn" Scopes="wl.signin wl.basic wl.contacts_create"/>   8:         <Button x:Name="btnCreateContact" Content="Create Contact" Click="btnCreateContact_Click" />   9:         <TextBlock Name="tbName" Width="600" Height="150" FontSize="32" TextWrapping="Wrap" />  10:         <TextBlock Name="tbGender"  Width="600" Height="150" FontSize="32" TextWrapping="Wrap" />  11:         <TextBlock Name="tbLiveProfile" Width="600" Height="150" FontSize="32" TextWrapping="Wrap" />  12:         <TextBlock Name="tbError" Text="Error Message" Width="600" Height="150" FontSize="32"/>  13:     </StackPanel>  14:    15: </Grid>

You will also want to make sure that your XML Namespaces for the Live SDK have been added to the page:

   1: xmlns:live="using:Microsoft.Live.Controls"

Note: You will get “Invalid Markup” with the XAML provided because we are still in the developer preview stage. It is ok to proceed.

The only thing to really pay attention to here is the Scopes listed in the SignInButton. As you see we have three scopes.

wl.signin - Single sign-in behavior. With single sign-in, users who are already signed in to Live Connect are also signed in to your website.
wl.basic - Read access to a user's basic profile info. Also enables read access to a user's list of contacts.
wl.contacts_create - Creation of new contacts in the user's address book.

The first two are core and the last is an extended scope. We need all three of these to complete the requirements listed in this sample application.

This will give us our user interface, now we will just need to wire up the event handlers which I am going to split up into two sections for learning purposes.

Coding Time – Basic User Information

Let’s go ahead and add in functionality to retrieve basic user information from the Live SDK.

First, add the proper namespaces and then the following code:

   1: using Microsoft.Live;   2: using Microsoft.Live.Controls;

   1: private LiveConnectClient liveClient;   2: private LiveConnectSession session;   3:     4: public MainPage()   5: {   6:     InitializeComponent();   7:     this.btnLogIn.SessionChanged += btnLogIn_OnSessionChanged;   8: }   9:    10: private void btnLogIn_OnSessionChanged(object sender, LiveConnectSessionChangedEventArgs e)  11: {  12:     if (e.Session != null && e.Status == LiveConnectSessionStatus.Connected)  13:     {  14:         this.liveClient = new LiveConnectClient(e.Session);  15:         session = e.Session;  16:         this.liveClient.GetCompleted += OnGetCompleted;  17:         this.liveClient.GetAsync("me", null);  18:     }  19:     else  20:     {  21:         this.liveClient = null;  22:     }  23: }  24:    25: private void OnGetCompleted(object sender, LiveOperationCompletedEventArgs e)  26: {             27:     if (e.Error == null)  28:     {  29:         dynamic result = e.Result;  30:         this.tbName.Text = "Hello, " + result.first_name + " " + result.last_name;  31:         this.tbGender.Text = "You are a " + result.gender + " that lives in " + result.locale + ".";  32:         this.tbLiveProfile.Text = "Your Live Profile can be found at: " + result.link;  33:     }  34:     else  35:     {  36:         this.tbError.Text = e.Error.ToString();  37:     }  38: }

The first thing that you will notice is that we are creating an event hander to handle the SessionChanged event. If we can determine that the session is valid then we create a new LiveConnectClient and pass the session to our LiveConnectSession. We finish up with adding an event handler on GetCompleted which will return the current users profile information and display them in our TextBlocks. Finally, we are outputting all errors to the tbError TextBlock.

Coding Time – Adding a new contact to the users Address Book

Let’s go ahead and add in functionality to add a new contact to the users address book from the Live SDK.

   1: private void btnCreateContact_Click(object sender, RoutedEventArgs e)   2: {   3:     LiveConnectClient createContact = new LiveConnectClient(session);   4:     var contact = new Dictionary<string, object>();   5:     contact.Add("first_name", "Michael");   6:     contact.Add("last_name", "Crump");   7:     createContact.PostCompleted +=   8:         new EventHandler<LiveOperationCompletedEventArgs>(CreateContactProperties_PostCompleted);   9:     createContact.PostAsync("me/contacts", contact);  10:    11:    12: }  13:    14: void CreateContactProperties_PostCompleted(object sender, LiveOperationCompletedEventArgs e)  15: {  16:     if (e.Error == null)  17:     {  18:         tbName.Text = "Contact" +  19:             e.Result["first_name"].ToString() + " " + e.Result["last_name"].ToString() +  20:             " created with ID " +  21:             e.Result["id"].ToString();  22:     }  23:     else  24:     {  25:         tbError.Text = "Error calling API: " + e.Error.ToString();  26:     }  27: }

In this sample, we are creating a new LiveConnectClient by passing into it the existing session. Once that is complete, we create a Dictionary and add the users first_name and last_name to the dictionary. Finally, we create a PostCompleted event handler which will return the textblock with a success or an error. The last call is PostAsync which send a POST request to the specified Uri as an asynchronous operation.

Ready for Liftoff

Go ahead and build the application and run it.

When you first hit the “Sign In” Button you will be presented with the following:

Note: After you accept this one time then you will not have to accept it again.

Notice that the application says it you allow access then it will view your profile and contact list. The application automatically knows which features it is using by the scopes defined earlier.

Select “Yes” and then click the “Sign In Button” located on the right hand side of your screen and you should see your Live profile information as long as you have filled it out in Windows Live.

Next, click on the Create Contact button and you should see the following:

You can now sign into your Windows Live account and select “Contacts” under “Hotmail” and see the contact that you just created.

Congratulations, you have now completed your first Metro application using XAML/C# that uses the Live SDK.

Conclusion

At this point, we have seen how you would create a Windows 8 Metro application using XAML/C# that retrieves and updates information from the Live SDK. Now that you are equipped with the basics of using the Live SDK, I encourage you to explore the Live SDK further as we have barely scratched the surface. I want to thank you for reading this article and if you ever have any questions feel free to contact me on the various sources listed below. I also wanted to thank SilverlightShow for giving me the opportunity to share this information with everyone.

You can follow Michael on Twitter at mbcrump or keep up with his blog by visiting michaelcrump.net.

Playing A Sound, Simplified

Fri, 27 Jan 2012 16:49:25 +0000

Bug fix: WPF4 project template for #MVVMLight V3

Tue, 24 Jan 2012 23:40:09 GMT

Ironically, my last release of MVVM Light V3 was about fixing bugs in templates and making them better. In the process however, seems that I introduced a regression bug in the WPF4 project templates. Yep shit happens.

How do I know if I have the bug?

Check the Programs and Features control panel, and look for MVVM Light. If the “Version” column shows 3.0.2.19, you have the bug. If it shows anything higher, you don’t. For instance, the new version with the bug correction is 3.0.3.19. Also, any version 4.*.*.* does not have this bug.

Alternatively, simply try to create a new WPF4 MVVM Light application in Studio. If you see the following warning, you have the bug.

Upgrading

To fix the bug, simply download V3.0.3.19 from Codeplex and install. You don’t need to uninstall the previous version.

What’s next?

I am working hard on V4 and have some nice improvements coming up. Many people have asked me when the “beta” will come out of MVVM Light, and the answer is “soon”. In the coming few days, I will publish a temporary release that corrects a few memory leaks, notably in the Messenger and in the RelayCommand. This will give expert users time to test and report issues. Then I still have a couple of fixes and I will release a release candidate. I won’t add any new feature after the RC, but will merely fix bugs if people find some. Once the RC is deemed stable, I will release V4 and take a deep breath!

And yes, there will be a V5

Happy coding,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Working with Prism 4 Part 3: Composite Command and Pub/Sub Events

editorial@silverlightshow.net (Brian Noyes ) — Tue, 24 Jan 2012 10:10:00 GMT

This article is also available in print (Word, PDF) and e-reader formats (MOBI, EPUB).

Download all formats, including source code for $0.99.

This is part 3 in the series Working with Prism 4.

Introduction

In the last article, I showed how to structure your Prism application to use the MVVM pattern and use DelegateCommands to communicate between the view and view model. Additionally, I showed how to pull some data in using WCF RIA Services and display it in the view, as well as using Prism Regions and the ability to add and activate different views in a region to accomplish simple navigation for the user (view switching).

More resources...

http://visualstudiomagazine.com/articles/2012/01/20/3-impacts-from-2011-and-what-they-mean-moving-forward-part-1.aspx

In this article, I’ll extend that sample application a little farther and show you how to leverage two other loosely coupled communication features of Prism 4: CompositeCommands and Prism CompositePresentationEvents (aka pub/sub events). The code presented in this article builds on what was the completed code from the last article.

You can download the complete code from the last article that acts as the starting point here. You can download the completed code for this article here.

Note: Now that Silverlight 5 has released, the code for this article uses an updated version of the Prism 4 code recompiled to Silverlight 5 as a target. That code can be downloaded from prism.codeplex.com and is included in the completed code sample for this article.

CompositeCommands

CompositeCommands are another implementation of the ICommand interface defined by Silverlight and WPF. There are several differences about the CompositeCommand implementation and the DelegateCommand implementation. The first is that the CompositeCommand is an aggregation of other commands – a list of ICommand references internally. It allows you to hook up multiple command targets to a single root command that itself can be hooked up to a command source such as a button or menu item. Figure 1 shows this relationship. The CompositeCommand can hold references to any ICommand object, but typically you will use it in conjunction with DelegateCommands. When the CompositeCommand.Execute method is invoked, it will invoke the Execute method on each of the child commands. When CompositeCommand.CanExecute is called to determine whether the command is enabled, it polls its child commands for their result from CanExecute.

Figure 1: CompositeCommands contain other commands

Child commands register themselves with the composite command and can also unregister if appropriate. In this way, it is very similar to a subscribe/unsubscribe of an event, but with the additional functionality of commands to enable and disable the commands based on custom logic.

Another thing different about CompositeCommands is that they can be hooked up to a source control ahead of time, before any child commands have registered. DelegateCommands have to be pointed to their target methods through a delegate at the point where they are constructed. As a result, CompositeCommands allow an extra layer of separation between the source (i.e. toolbar button or menu item) and the target (handling method) – decoupled in lifetime. Because they can target multiple child commands, they also work well for distributed logic such as a Save All command that needs to be dispatched to multiple open documents, each of which has their own handling logic in their view model.

You will see both of these aspects at work in the sample code for this article – separated hook up of the command, and multiple handlers for command execution.

Pub/Sub Events

Another form of loosely coupled communications offered by Prism are pub/sub events. Normal events in .NET are fairly tightly coupled – both the publisher and subscriber objects have to be alive at the same time, the subscriber needs explicit type information and a reference to the publisher to hook up their event handler, and once subscribed, the publisher maintains a reference back to the subscriber through the delegate.

Pub/sub events are designed to break that tight coupling. The idea is that you really want publishers and subscribers to not need either type information or coupled lifetimes. They should be able to come and go independently, and different types of subscribers and publishers should be able to participate in the same event scenario. The event is what is important, not the specific parties who raise or handle the events. To achieve this, you need a middleman or mediator between the publishers and subscribers. The Event Aggregator pattern is a means of achieving this. Prism provides an implementation of the Event Aggregator pattern that is easy to use and that provides several options including strong or weak references for subscribers, thread dispatching, and event filtering.

Figure 2 shows the basic architecture of using the EventAggregator service in Prism. Publishers and Subscribers make calls directly against the EventAggregator to obtain references to event class instances. The EventAggregator is really nothing more than a Registry for event types. Publishers then use those event classes to publish an event with a strongly typed payload and subscribers hook up a listener through a delegate to a method that will accept the payload and handle the event for that subscriber. The event classes are derived from CompositePresentationEvent and do not need any implementation themselves, the class declaration is really just a way to tie together a base class reference with the strongly typed payload through the generic type definition. The CompositePresentationEvent base class provides all the infrastructure to maintain the list of subscribers, dispatch the calls on the appropriate thread, maintain weak or strong references, and filter the calls if desired.

Figure 2: Event Aggregator Architecture

Step 1: Add the Prism Libraries and Recompile for Silverlight 5

The first step for this article is that I downloaded a recently added source code release of Prism 4 from the CodePlex site and added the projects to the solution, as well as changing their compilation target to Silverlight 5. This is because there were a few incompatibilities discovered in using the Silverlight 4 versions of the libraries with Silverlight 5. And I actually stumbled upon one of those incompatibilities in putting together the sample for this article.

Step 2: Modify the application to present multiple edit views

To demonstrate the use of CompositeCommands, I wanted to have a reasonably realistic scenario of where you might use them. As mentioned earlier, CompositeCommands let you separate the hook up of the invoker from the hookup of the receiver in terms of the Command pattern. They also let you have multiple handlers for a given command, to address a Save All kind of scenario, which is what I will be putting together in this article.

To do this, I need more than one thing open at a time to save. I added a TabControl to the MainPage shell view and made it a Prism Region so that multiple CustomerEditView instances could be opened in tabs there instead of swapping out the MainContent region view as was done in the last article.

   1: <sdk:TabControl prism:RegionManager.RegionName="SecondaryContent"

   2:                 Grid.Row="2">

   3:     <prism:TabControlRegionAdapter.ItemContainerStyle>

   4:         <Style TargetType="sdk:TabItem">

   5:             <Setter Property="HeaderTemplate">

   6:                 <Setter.Value>

   7:                     <DataTemplate>

   8:                         <StackPanel Orientation="Horizontal">

   9:                             <TextBlock VerticalAlignment="Center"

  10:                                         Margin="3"

  11:                                         Text="{Binding Title}" />

  12:                             <Button VerticalAlignment="Center"

  13:                                     Margin="3"

  14:                                     Content="X"

  15:                                     Command="{Binding CloseCommand}" />

  16:                         </StackPanel>

  17:                     </DataTemplate>

  18:                 </Setter.Value>

  19:             </Setter>

  20:         </Style>

  21:     </prism:TabControlRegionAdapter.ItemContainerStyle>

  22: </sdk:TabControl>

Note the attached property to indicate that this is a Prism Region as discussed in the last two articles, as well as a Style to modify the HeaderTemplate of the TabItems in the TabControl to contain a TextBlock and an X Button to be able to close them. This style gets attached through a custom attached property provided by Prism called TabControlRegionAdapter.ItemContainerStyle. This is needed because the TabControlRegionAdapter is the thing in the Prism toolkit that generates the TabItems as views are added to the region. Also note that the template expects the DataContext to have a Title property for the text in the tab header, as well as a CloseCommand for the button Command. Those will be present on the view models for the individual views which are set as the DataContext based on the MVVM pattern.

To populate the tabs, the EditCommand handling code in the CustomerListViewModel changed to the following:

   1: private void OnEditCustomer()

   2: {

   3:     IRegion secondaryContentRegion = RegionManager.Regions["SecondaryContent"];

   4:     bool alreadyExists = false;

   5:     foreach (var view in secondaryContentRegion.Views)

   6:     {

   7:         var custView = view as CustomerEditView;

   8:         var custViewModel = custView.DataContext as CustomerEditViewModel;

   9:         if (custViewModel.Customer == SelectedCustomer)

  10:         {

  11:             secondaryContentRegion.Activate(view);

  12:             alreadyExists = true;

  13:         }

  14:     }

  15:     if (!alreadyExists)

  16:     {

  17:         CustomerEditView editView = new CustomerEditView();

  18:         CustomerEditViewModel viewModel = new CustomerEditViewModel { Customer = SelectedCustomer };

  19:         editView.DataContext = viewModel;

  20:         secondaryContentRegion.Add(editView);

  21:         secondaryContentRegion.Activate(editView);

  22:     }

  23: }

This code is very similar to what was discussed in the last article – it determines if there is a view already being presented within the “SecondaryContent” region for the selected customer. If so, it activates it. If not, it adds one. The main difference here is that the code is now targeting the SecondaryContent region, which is the tab control, and it allows more than one view to be created at a time.

The structure of the CustomerEditView itself did not change at all, but the CustomerEditViewModel had to change quite a bit. First, it needed to have the Title and CloseCommand properties expected by the tab item headers.

   1: public string Title { get { return _Customer != null ? _Customer.CustomerID : "Empty"; } }

2:

   3: public DelegateCommand CloseCommand { get; private set; }

Second, the CloseCommand handling needs to simply remove its view from the region, not swap views as the SaveCommand handling did from the last article:

   1: private void OnClose()

   2: {

   3:     IRegion secondaryContentRegion = RegionManager.Regions["SecondaryContent"];

   4:     foreach (var view in secondaryContentRegion.Views)

   5:     {

   6:         if (view is CustomerEditView && ((FrameworkElement)view).DataContext == this)

   7:         {

   8:             secondaryContentRegion.Remove(view);

   9:             break;

  10:         }

  11:     }

  12: }

Third, it needed the SaveCommand logic to not swap views but to just manage the “saved” state of the view. In this case, for demo purposes, that meant just modifying the view model to support an IsDirty flag. That flag gets set when the customer is modified (one of its properties change). The flag gets cleared when the SaveCommand fires. Additionally, the SaveCommand was modified to have a CanExecute handler that checks that IsDirty flag. If the view’s state is not dirty, there is no reason to invoke the SaveCommand so its invoker should be disabled.

   1: Customer _Customer;

   2: bool _IsDirty = false;

3:

   4: public CustomerEditViewModel()

   5: {

   6:     SaveCommand = new DelegateCommand(OnSave, CanSave);

   7:     ...

   8: }

9:

  10: public DelegateCommand SaveCommand { get; private set; }

11:

  12: public Customer Customer

  13: {

  14:     get { return _Customer; }

  15:     set

  16:     {

  17:         if (_Customer != value)

  18:         {

  19:             if (_Customer != null) _Customer.PropertyChanged -= OnCustomerChanged;

  20:             _Customer = value;

  21:             if (_Customer != null) _Customer.PropertyChanged += OnCustomerChanged;

  22:             RaisePropertyChanged(() => Customer);

  23:         }

  24:     }

  25: }

26:

  27: public bool IsDirty

  28: {

  29:     get

  30:     {

  31:         return _IsDirty;

  32:     }

  33:     set

  34:     {

  35:         _IsDirty = value;

  36:         SaveCommand.RaiseCanExecuteChanged();

  37:     }

  38: }

39:

  40: private bool CanSave()

  41: {

  42:     return IsDirty;

  43: }

44:

  45: private void OnSave()

  46: {

  47:     IsDirty = false;

  48: }

49:

  50: private void OnCustomerChanged(object sender, PropertyChangedEventArgs e)

  51: {

  52:     IsDirty = true;

  53: }

Notice that the CanSave handler just returns the flag. But since the enablement of the command depends on that flag, that means whenever that flag changes, the command should raise the CanExecuteChanged event. The best way to do that is to encapsulate the call to the DelegateCommand.RaiseCanExecuteChanged method in the setter for the IsDirty property and use that property internally throughout the view model instead of the member variable.

At this point I have the setup to be able to edit multiple customer views at the same time in individual tabs. Next I want to be able to add a “Save All” command invoker at a shell level and have it invoke the SaveCommand on the individual open edit views as shown in Figure 3.

Figure 3: Multiple edit views active in the tab region

Step 3: Add a CompositeCommand for the Save All command

A common way to define a CompositeCommand is similar to how WPF defines the built-in routed commands – as a public static readonly singleton instance of the command. In order for the invoker to be in one module and the handlers to be in different modules, they all need to be able to get to that definition of that command to hook up to it. So you will need to have a common or shared assembly that all the parts of your solution can reference to hold shared types like CompositeCommands and Pub/Sub events.

The sample solution has a Silverlight Class Library project added with a Commands class to contain the CompositeCommand instances you want to define – in this case the SaveAllCommand.

   1: public class Commands

   2: {

   3:     public static readonly CompositeCommand SaveAllCommand = new CompositeCommand();

   4: }

Step 4: Hook up the CompositeCommand Invoker

The invoker is simply a button in the MainPage.xaml:

   1: <Button Content="Save All"

   2:         Command="{Binding SaveAllCommand, RelativeSource={RelativeSource AncestorType=UserControl}}" />

If you are using CompositeCommands in WPF, you can refer directly to the static instance with the {x:Static} markup extension. Because Silverlight does not have that markup extension in the framework, you will have to bind to a property exposed to your XAML. In this case to keep it simple, I expose that property from the code behind of the MainPage view itself and use a RelativeSource binding to get to the root element that corresponds to the code behind class. Then in the code behind I expose the static command variable via the property that the XAML is binding to. Alternatively I could have just hooked up the command in the code behind with a reference to the button.

   1: public ICommand SaveAllCommand { get { return Commands.SaveAllCommand; } }

At this point the invoker is ready to invoke the command, but the button will be disabled because the CompositeCommand, as a container for command instances, is empty. The default logic of CompositeCommand is to be disabled unless all of its child commands are enabled. If there are no child commands, it is disabled because there is nothing to invoke. If you find you want different logic, such as enabling the command if any one of its child commands is enabled, all you need to do is derive a class from CompositeCommand and override the CanExecute method.

Step 5: Hook up the child command instances

As mentioned earlier, CompositeCommand exposes a Register/Unregister API for adding and removing child commands. To add a child command, simply call Register, passing an ICommand reference. Because the CustomerEditViewModel already has a SaveCommand that I want invoked when Save All is invoked, I just need to pass a reference to that in the constructor for the view model:

   1: Commands.SaveAllCommand.RegisterCommand(SaveCommand);

Likewise, when the view is going away (in the CloseCommand handler), you should unregister the command, otherwise the CompositeCommand will keep it, and be indirection, your view model, alive.

   1: private void OnClose()

   2: {

   3:     IRegion secondaryContentRegion = RegionManager.Regions["SecondaryContent"];

   4:     foreach (var view in secondaryContentRegion.Views)

   5:     {

   6:         if (view is CustomerEditView && ((FrameworkElement)view).DataContext == this)

   7:         {

   8:             secondaryContentRegion.Remove(view);

   9:             Commands.SaveAllCommand.UnregisterCommand(SaveCommand);

  10:             break;

  11:         }

  12:     }

  13: }

At this point you should be able to run the application and open several edit views as shown in Figure 3. Initially all of the Save buttons in the edit views as well as the Save All button will be disabled because none of the views are dirty. Go make an edit to each one of the views, and you will see their individual Save button become enabled. With the default CanExecute logic of the CompositeCommand, not until all of the child commands becomes enabled is the CompositeCommand itself enabled. So at the point where you have each of the child views Save enabled through an edit, the Save All button will become enabled. Clicking it invokes the SaveCommand handler in each instance of the CustomerEditViewModel, setting its IsDirty flag to false and raising the CanExecuteChanged handler for that command, which the CompositeCommand will monitor to refresh its own command enabled state.

Step 6: Add an Orders Module

A common usage of pub/sub events is to communicate between loosely coupled module components, particularly from one view model to another, especially if those view models are defined in separate modules. To demonstrate this, I want to add the capability to display the last 10 products ordered by a customer in a side panel whenever a customer is selected. I want this functionality to be decoupled from the customer listing and editing capabilities in the Core module, possibly developed by a separate team or added as a separate pluggable feature of the application.

To do this, I added a new Orders module to the solution following the procedures outlined in the first article for defining a Prism module:

Add a Silverlight Application project
Delete MainPage.xaml and App.xaml
Set the Startup Object in the project settings to Not Set.
Add Prism references, setting the Copy Local property on the references to false so that you don’t get multiple copies of the Prism libraries loaded when the module loads.
Defined an OrdersModule class with a ModuleExport attribute and an implementation of the IModule interface.
Added the Orders module to the Silverlight hosting settings of the Web project so that it is available for download by the module manager in Prism.
Added module information to the ModuleCatalog.xaml in the shell project.

Additionally, since now both the Core module and the Orders module will need to use WCF RIA Services to retrieve data from the back end, it makes sense to move the client WCF RIA Services code out to a shared library so that there is just one definition of the entity types and the DomainContext that lets the client code talk to the server. As a result, I also did the following in the solution:

Removed the RIA Services link from all the client projects.
Added a NorthwindRIAClientLibrary Silverlight Class Library project with the RIA Services link in the project properties set to the hosting web project where the domain services live.
Added a reference to NorthwindRIAClientLibrary to each of the projects, with them all set to Copy Local = false except the reference in the shell application.

Step 7: Add another region for the view to plug into

In MainPage.xaml in the shell application, I added another region named SidePanel to the right of the listing of customers for the order summary to plug into.

   1: <Grid Grid.Row="1">

   2:     <Grid.ColumnDefinitions>

   3:         <ColumnDefinition Width="*" />

   4:         <ColumnDefinition Width="Auto" />

   5:     </Grid.ColumnDefinitions>

   6:     <ContentControl prism:RegionManager.RegionName="MainContent"

   7:                     Grid.Column="0"

   8:                     Margin="5" />

   9:     <ContentControl prism:RegionManager.RegionName="SidePanel"

  10:                     Grid.Column="1"

  11:                     Margin="5" />

  12: </Grid>

Step 8: Add a View and ViewModel to present the order summary

The view simply contains a DataGrid with three columns: Order date, product name, and quantity. The view model uses WCF RIA Services to retrieve the order information for a given customer and populate a collection of OrderItem data structures to populate the DataGrid with the three columns.

   1: public class OrdersViewModel : INotifyPropertyChanged

   2: {

   3:     CustomersDomainContext _Context;

   4:     public OrdersViewModel()

   5:     {

   6:         if (!DesignerProperties.IsInDesignTool)

   7:         {

   8:             _Context = new CustomersDomainContext();

   9:         }

  10:     }

11:

  12:     ObservableCollection<OrderItem> _Orders = new ObservableCollection<OrderItem>();

  13:     public ObservableCollection<OrderItem> Orders

  14:     {

  15:         get { return _Orders; }

  16:         set

  17:         {

  18:             if (_Orders != value)

  19:             {

  20:                 _Orders = value;

  21:                 PropertyChanged(this, new PropertyChangedEventArgs("Orders"));

  22:             }

  23:         }

  24:     }

25:

  26:     public void OnCustomerSelected(Customer cust)

  27:     {

  28:         Orders = new ObservableCollection<OrderItem>();

  29:         if (_Context == null || cust == null)

  30:         {

  31:             return;

  32:         }

33:

  34:         EntityQuery<Order_Detail> detailQuery = _Context.GetOrder_DetailsQuery();

  35:         _Context.Load(detailQuery.Where(

  36:             det => det.Order.Customer.CustomerID == cust.CustomerID).OrderByDescending(

  37:             det => det.Order.OrderDate).Take(10), OnDetailsLoaded, null);

38:

  39:     }

40:

  41:     private void OnDetailsLoaded(LoadOperation<Order_Detail> loadOp)

  42:     {

  43:         var details = loadOp.Entities;

  44:         if (details != null)

  45:         {

  46:             var detailsList = details.ToList();

  47:             detailsList.ForEach(det => Orders.Add(

  48:                 new OrderItem

  49:                 {

  50:                     ProductName = det.Product.ProductName,

  51:                     Quantity = det.Quantity,

  52:                     OrderDate = det.Order.OrderDate.Value

  53:                 }));

  54:         }

  55:     }

  56: }

Now the only thing left to do is call the OnCustomerSelected method whenever a Customer is selected in the main listing. But that code lives in a totally separate module that you are trying to keep decoupled. Prism events to the rescue.

Step 9: Add a Prism Event

When working with Prism events, the first thing to do is to declare the event type. You do this by deriving a type from CompositePresentationEvent as described earlier, and indicating through the generic type argument what the payload type will be:

   1: public class CustomerSelectedEvent : CompositePresentationEvent<Customer> { }

Like the CompositeCommand, this type will need to be referenced by both sides of the communication, even though those two sides need to be decoupled from each other. So this is another one of those types you will want to declare in a shared library that any modules in the solution can reference.

Step 10: Hook up the subscriber

To hook up a subscriber, the subscribing code first needs access to the EventAggregator service in Prism. This is a singleton service like the RegionManager that you can simply obtain by using dependency injection and importing it through the container. Add the following code to the OrdersViewModel:

   1: public OrdersViewModel()

   2: {

   3:     if (!DesignerProperties.IsInDesignTool)

   4:     {

   5:         CompositionInitializer.SatisfyImports(this);

   6:         EventAggregator.GetEvent<CustomerSelectedEvent>().Subscribe(OnCustomerSelected);

   7:         _Context = new CustomersDomainContext();

   8:     }

   9: }

10:

  11: [Import]

  12: public IEventAggregator EventAggregator { get; set; }

Because the view model will be constructed in the XAML of the view, the container will not be involved in its construction. To get the container to satisfy the imports in the class, which in this case includes the event aggregator, the CompositionInitializer class can be used. It is put in a guard condition as discussed in a previous article so that the designer does not break since it should not execute that code in the designer.

After the SatisfyImports call, the Import property will be set by the container. So the next line of code can then use that IEventAggregator reference to subscribe. That involves calling the GetEvent<T>() method to get a reference to the event, then calling subscribe on the returned event, which can be done in a single line of code as shown. The Subscribe method just takes an Action<T> delegate, where T is the payload type defined by the event class. The OnCustomerSelected method was shown earlier.

By default, Prism events maintain weak references to the subscribing class method. That means that if all other references to the object go away, the event reference will not keep it alive. This solves a lot of memory leak issues where you either forget or it is difficult to know where in the code to do the Unsubscribe call. If you want the event subscription to keep the object alive, there is an overload to the Subscribe method with a keepSubscriberReferenceAlive bool parameter.

Additionally, by default the event publication will happen synchronously using the publisher’s thread. If you want control over what thread is used to call the target method pointed to by the Subscribe call, you can use another overload that takes a ThreadOption with three choices: use the Publisher’s thread (the default), use the UI thread, or use a background thread from the thread pool.

Finally, there is an overload that also allows you to pass a Predicate<T> delegate for filtering purposes. This allows you to pass a lambda expression or point to a method that returns a boolean. The method or lambda will be passed the payload object of the event. It can use that to decide whether to return true or false. True means to call the subscription method, false means don’t.

Step 11: Publish the event

To publish a Prism event, it is just as simple as subscribing. you first need a reference to the EventAggregator service, which you get through dependency injection as shown earlier. Then you publish at the appropriate point in your code calling the Publish method on the event returned from the same GetEvent<T>() method shown earlier:

   1: EventAggregator.GetEvent<CustomerSelectedEvent>().Publish(_SelectedCustomer);

Summary

In this article, you saw how to define multiple modules that can communicate with each other through a combination of CompositeCommands and Prism events. CompositeCommands let you have handlers registered or unregistered in a loosely coupled fashion, and allows you to have multiple handlers (child commands) that will be used by the CompositeCommand. Prism events are for situations that are not necessarily an action->reaction kind of set up where enablement and disablement is needed. You simply define the event type with its strongly typed payload and then subscribe or publish by obtaining the event reference through the EventAggregator. Both of these mechanisms give you a really powerful combination for having loosely coupled communications between composite parts of your application.

You can download the finished code from this article here.

About the Author

Brian Noyes is Chief Architect of IDesign, a Microsoft Regional Director, and Silverlight MVP. He is a frequent top rated speaker at conferences worldwide including Microsoft TechEd, DevConnections, VSLive!, DevTeach, and others. Brian worked directly on the Prism team with Microsoft patterns and practices and co-authored the book Developers Guide to Microsoft Prism 4. He is also the author of Developing Applications with Windows Workflow Foundation, Smart Client Deployment with ClickOnce, and Data Binding in Windows Forms 2.0. Brian got started programming as a hobby while flying F-14 Tomcats in the U.S. Navy, later turning his passion for code into his current career. You can contact Brian through his blog at http://briannoyes.net/ or on Twitter @briannoyes.

Yet Another Podcast #57–Kendo UI

Mon, 23 Jan 2012 18:49:57 +0000

Microsoft's Impact on Kinect, Silverlight and Community in 2011

Sun, 22 Jan 2012 12:54:33 GMT

A lot changed in 2011 … in fact you could say it was the beginning of what I think is a massive shift in technology on multiple levels. This week in Visual Studio Magazine I open a mini series of some of the changes that made a big impact in 2011. Check it out.

Saving Telerik PersistenceFramework data to a string

Sun, 22 Jan 2012 02:03:27 GMT

In the project I'm involved with, we've been saving column arrangement and column width data for quite a while. I had a request to give the users a way to select which columns to display and it just seemed natural to include the display order with that data.

Recently I've been tasked with saving the filtering and sorting information as well. We're using the Telerik RadGrid, so I went to their site to find out how to do that.

Saving all sorts of Grid-related data to Isolated Storage was really easy as I'll show first. Saving that data to the database was a bit more involved. I'm not going to really fire off to SQL in this post, but I'm going to go as far as saving the data to a global string variable, and read it back.

Live Silverlight sample on the page, appropriate snippets of code discussed, and a download of the app at the end.

Read On

Share Status and Link on Socials in Windows Phone

noreply@blogger.com (Vikram Pendse) — Sat, 21 Jan 2012 13:43:00 +0000

Hope you all doing good.Sorry for the great delay here,I am almost working for all 7 days in week and that too on SQL Server – SSIS which is totally Alien to me but now I have good hands-on (In future you might get to see few post on that as well) for a critical project in my company. Due to this I couldn’t meet you here.

Today finally I got sometime to spend here and on Windows Phone and Silverlight, So I thought I can share something quickly with you before I get to other big topics.Our today’s topic is small but very unique and useful. Today I am going to talk about 2 set of Tasks and how to use them effectively available with new Windows Phone SDK as ShareStatusTask and ShareLinkTask which comes under Microsoft.Phone.Tasks Namespace.So lets start with it.

So all we need is a simple Textbox and Button like this :

XAML Code :

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBox x:Name="txtStatus" Height="100" />
<Button x:Name="btnShare" Height="100" Width="200" Margin="0,358,0,149" Click="btnShare_Click">Share</Button>
</Grid>

Namespace :

using Microsoft.Phone.Tasks;

C# Code :

private void btnShare_Click(object sender, RoutedEventArgs e)
{
ShareStatusTask mySocialTasks = new ShareStatusTask();

mySocialTasks.Status = txtStatus.Text.ToString() + System.DateTime.Now.ToString();

mySocialTasks.Show();
}

Above code is simple, We have a ShareStatusTask which comes with Property Status like this in ShareStatusTask which is Inherited from ShareTaskBase whose Show() method Causes the sharing dialog to be displayed to the user.

public string Status { get; set; }

public void Show();

So we are passing our/user defined Status message from Textbox txtStatus and appending DateTime with it (You can append anything or customize as per your need), Once you click on Share you will get Share Dialog like this :

Sorry for bit low screenshot, but you can see the list of Socials available on your device as

Windows Live
Facebook
Twitter
LinkedIn

If something new comes up tomorrow might get added to list, So all you need to do is pick the Socials and go ahead and share. Please note that this does not work on Windows Phone Emulator so you need to port this on actual Windows Phone Device.Also note that availability of Socials on your phone depends on your configuration and choice to have.So Don’t waste your time in emulator since it will not give any output or will not give any response.

On similar lines, we can implement ShareLinkTask Class like this :

private void btnShare_Click(object sender, RoutedEventArgs e)
{
ShareLinkTask mySocialLinks = new ShareLinkTask();

          mySocialLinks.Title = "Explore .NET with Vikram Pendse";
          mySocialLinks.LinkUri = new Uri("http://pendsevikram.blogspot.com", UriKind.Absolute);
          mySocialLinks.Message = txtStatus.Text.ToString() + System.DateTime.Now.ToString();

mySocialLinks.Show();
}

Choose “Windows Phone Device” and hit F5, you can see in Output window how it ports to Device and confirm the same like this it got displayed in my VS Output Window : (Observe lines in Bold)

------ Deploy started: Project: Demo_ShareStatus_Task, Configuration: Debug Any CPU ------
Deploying D:\Silverlight_On_Mobile\Demo_ShareStatus_Task\Demo_ShareStatus_Task\Bin\Debug\Demo_ShareStatus_Task.xap...
Connecting to Windows Phone Device...
The application is already installed on the device. Checking if an incremental deployment is possible...
Doing incremental deployment...
Updating information related to modified files...
Deployment of D:\Silverlight_On_Mobile\Demo_ShareStatus_Task\Demo_ShareStatus_Task\Bin\Debug\Demo_ShareStatus_Task.xap succeeded.
========== Deploy: 1 succeeded, 0 failed, 0 skipped ==========

Now your app is ready to test on your WP Device, But make note of 2 things before you deploy :

Phone is ON and at Home Screen is visible and not pin locked
Zune instance is up and running

Now start from App list like this : (Demo_ShareStatus Icon)

Type your Message :

Share Link and Select Social Networks like this :

Finally you can see this happening in real on your respective Social Networks, Like in my case this got posted on my Facebook,Twitter and LinkedIn in one shot and at same time at all place like this :

Facebook :

Twitter :

LinkedIn :

So this is how you can share Status or Link in very short piece of Code by making use of ShareStatusTask and ShareLinkTask given by Windows Phone Development Environment. Now how to make use of these tasks in your app,I leave this for you to decide,Let me know if you need any help using this and also let me know your feedback.I hope you will enjoy this small post after a long time here. Now since I am bit relax from work schedule so I will be back soon with some more interesting posts on Windows Phone, WinRT and Silverlight soon.So keep visiting this place now.

Vikram.

MVVM on the Full Stack

Fri, 20 Jan 2012 01:21:00 GMT

Long ago, in a galaxy far far away I met with Jon Galloway and Jesse Liberty to brainstorm on some MVVM ideas. I had forgotten about this video recording, and I guess they did too. But now, many months later they dug it up and you can now check it out at Channel 9 on their show, The Full Stack.

Full Stack Resumes–MVVM Design

Thu, 19 Jan 2012 14:15:29 +0000

New Videos Uploaded

Wed, 18 Jan 2012 17:50:10 +0000

Windows Phone 7.5 - Using advanced tiles API

Wed, 18 Jan 2012 15:43:37 GMT

by Andrea Boschin

There is not any doubt, the first thing you meet when you use Windows Phone are the tiles. These are the large squares on the home screen that identifies some applications and they are also a distinguishable character that make your Windows Phone unique.

As you know for sure, the tiles can be attached or detached from the home screen and some particular software can take advantage of double size tiles. While this is not a feature available to developers, in OS7.5, the tiles gained new features and a new set of APIs that you can use to enrich your applications. As an example you are now able to update your tiles from inside the application and you can use double faced tiles to improve information to the user. In this article I would like to explore these new features and show how to take advantage of them, while porting your software to the new operating system.

Accessing and changing your tile(s)

Once your application is running the user can have pinned its tile on the home screen. If this happened, you can have access to a bunch of tile's properties you can change at every time while the application is running, but please take note that it implies that the tile exists. Obviously, none of these APIs can work if your application is not pinned.

The root of your work is the ShellTile class that gives you access to a collection of ActiveTiles. At the very first place in this collection there is a structure that represents the main tile of your application. Reading the previous paragraph, you can expect this collection is empty when you application has not been pinned, but it is not true. The collection always contains at least one element, and you can update it every time also if the application's tile is not in the home screen. This does not cause a visible change but if the user choose to pin the application at a later time its tile will reflect these changes. The ShellTile class returned by this collection contains an "Update" method that is useful to change the tile's content:

   1: StandardTileData data = new StandardTileData

   2: {

   3:     Title = "My tile!",

   4:     Count = 10,

   5:     BackgroundImage = new Uri("/Background.png", UriKind.RelativeOrAbsolute),

   6:     BackTitle = "This is the back",

   7:     BackContent = "Hallo!",

   8:     BackBackgroundImage = new Uri("/Background.png", UriKind.RelativeOrAbsolute)

   9: };

10:

  11: ShellTile.ActiveTiles.First().Update(data);

The properties of the StandardTileData class reflect the parts of the tile and are divided in two categories: Front and Back. So, we have a "Title" property that reflects the title of the tile on the front side and the "BackTitle" that has the same meaning for the back side. This led to the consideration that in OS 7.5, tiles can have two sides available. It suffice you set the value of one of the "Back" properties and the tile automatically activates the back side on a random schedule.

Stop SOPA and PIPA

Wed, 18 Jan 2012 06:10:25 GMT

Please do not allow SOPA, PIPA, or any forms of Internet censorship or regulation to get through Congress.

Over the past several years I've noticed a trend in our government where we've shifted away from laws protecting citizens from corporations and government to laws protecting corporations and government from citizens. This is coming at the cost of our liberty and pursuit of happiness.

By preventing SOPA, PIPA, or other Internet censorship/regulation, you can help reverse this trend.

Thank you,
Jeff Handley

I am submitting this text to my senate and house representatives, and I’m also making all pages on this blog redirect a PSA page until 1/19/2012 as part of my effort to stop SOPA and PIPA.

Calling Navigate From The View Model

Tue, 17 Jan 2012 16:04:01 +0000

Windows Phone 7.5: Using sockets

editorial@silverlightshow.net (Andrea Boschin ) — Mon, 16 Jan 2012 17:10:00 GMT

Also if the technical specifications of Windows Phone 7.0 stated that it is compatible with Silverlight 3.0, this only means that every feature you can use in the phone is available on the desktop but not viceversa. Sockets are a clear demonstration of this sentence. While they are perfectly available on Silverlight 3.0, they are locked down in the phone for the, so called, "security purposes". Curiously if you watch at the codebase of Silverlight for Windows Phone 7.0 you see that, the Socket class exists but it is declared "internal".

Don't miss...

Download the source code

The new OS 7.5 have made Sockets available to developers, opening the way to a wide series of applications that uses this low-level communication way. Sockets are for sure difficult from the programming side, but they offer a connected/disconnected, fast and reliable way of exchange data that is unreplaceable for many purposes.

What sockets can do (and what they can't)

Sockets are something that we use every day. Also if we are not aware of this, they are at the very base of each network protocol, comprised HTTP, SMTP, PO3, and so on. Their purpose is to create a communication channel between two boundaries where they can send and receive something that usually is a binary message. There are two ways to create a Socket connection. The TCP and the UDP. Since TCP is an always connected protocol that is tailored to exchange continuous streams, UDP is mostly made to exchange fast and short packets of information - called datagrams - while the boundaries aren't continuously connected. To make a practical example, HTTP is based on the TCP protocol where the client and the server establish a connected channel and they both send and receive on this channel until the communication ends. On the other side, DNS is mostly UDP based because the client sends a request datagram and the server answers with another datagram but there is not a real channel established between the two boundaries. Do not underestimate UDP since it is often very effective. Infact a number of streaming protocols are based on it.

While Silverlight only supports TCP, Windows Phone 7.5 also supports UDP Sockets. I'm always really amazed about the confusion of team's choices, but to me it is really not understandable the reason that leads to diverge the sockets capabilities in this matter. But so it is. So, while in Silverlight for desktop we can only use TCP and a limited set of ports, if application is not fully trusted, with Windows Phone 7.5 we have the very full set of knifes to work with.

No matter you are using a TCP or UDP connection, a communication is ruled by the same process and by the same structures. Once you have choose the endpoint to connect to, in terms of ip address and port, the process of communications is the following:

Create the Socket class
Connect the socket
Send and receive data
Shutdown the connection

The correct sequence of operations at point 3 is determined by the network protocol you are implementing. As an example if you are placing an HTTP call, first of all you send the request and the receive the response, but there are many cases where you can simply start to receive a continuous stream because the protocol continuously broadcast packets.

All the phases of the socket connection are ruled by at least an instance of SockerAsyncEventArgs. This class contains the reference to the remote endpoint, the operation in progress/completed, the data that is sent to or received by the peer. In a simple connection you will have only a single instance but, for performance purposes (e.g. in a multithreaded environment), you can have a pool of instances to use for the various operations.

Implementing a simple UDP protocol (NTP)

For the sake of the article I will show now how to implement a simple protocol. The NTP protocol I will show, is very basic, just because I do not want to spend most of the time explaining the protocol itself. NTP stands for Network Time Protocol and despite the very simple datagram you have to exchange over an UDP socket, the RFC is really complex because of the server implementation that have to ensure redundancy and precision across multiple sources.

To make an NTP request you have to do the following:

Connect to a NTP server on port 123
Prepare a datagram of 48 zeroed bytes with the first byte set to 0x1b
Send the datagram over UDP
Receive the same datagram filled with time information
Close the socket
Decode and use the result

The returned bytes represents a DateTime and I do not enter in the format of the response. If you are interested simply watch at the decoding method in my example. The first thing to do is to create a NtpClient class. This class will represent a single server and is initialized with the remote endpoint:

   1: public class NtpClient   2: {   3:     private Socket Socket { get; set; }   4:     private SocketAsyncEventArgs Args { get; set; }   5:     6:     public NtpClient(EndPoint endPoint)   7:     {   8:         this.Args = new SocketAsyncEventArgs   9:         {  10:             RemoteEndPoint = endPoint  11:         };  12:    13:         this.Args.Completed += new EventHandler<SocketAsyncEventArgs>(Operation_Completed);  14:     }  15:    16:     private void Operation_Completed(object sender, SocketAsyncEventArgs e)  17:     {  18:     }  19: }

In this first part I create an instance of the SocketAsyncEventArgs and initialize it with the RemoteEndPoint. This instance is shared by all the network calls so it is defined as a private member property. The code also attach the Completed event of this instance. Every time I will perform an action on the socket, using this instance, the Completed event is raised and the LastOperation property will be set with a value representing the action I did.

The GetNetworkTimeAsync method initializes the Socket class and initiates the connection. Under the hoods, the meaning of "ConnectAsync" is different between TCP and UDP but it has to be made for both the protocols. Here I am using an UDP connection so the values in the ctor indicate ProtocolType.Udp and a SocketType.Dgram. If I would use a TCP channel I should use SocketType.Stream and ProtocolType.Tcp.

   1: public void GetNetworkTimeAsync()   2: {   3:     this.Socket = new Socket(AddressFamily.InterNetwork, SocketType.Dgram, ProtocolType.Udp);   4:     this.Socket.ConnectAsync(this.Args);   5: }

From this point, the lifetime of the class is governed by the Operation_Completed event. Every time I perform an action this method collects the result. So when I call connect the method receives the result, but the same happen when I call SendAsync and ReveiceAsync. Inside the Operation_Completed I create a chain of operation, always calling the following action as the result of another.

   1: private void Operation_Completed(object sender, SocketAsyncEventArgs e)   2: {   3:     if (e.SocketError == SocketError.Success)   4:     {   5:         switch (e.LastOperation)   6:         {   7:             case SocketAsyncOperation.Connect:   8:                 this.SendRequest();   9:                 break;  10:             case SocketAsyncOperation.Send:  11:                 this.ReceiveResponse();  12:                 break;  13:             case SocketAsyncOperation.Receive:  14:                 this.ReadAndClose();  15:                 break;  16:         }  17:     }  18:     else  19:         this.OnError(e.SocketError);  20: }

The chain indicates that following the Connect I call SendRequest then ReceiveResponse and finally ReadAndClose. These decisions are wrapped from an if construct that handles the socket errors. Only when e.SocketError equals Success the chain continues. The SendRequest method creates the datagram and sends it over the channel:

   1: private void SendRequest()   2: {   3:     byte[] ntpData = new byte[48];   4:     Array.Clear(ntpData, 0, ntpData.Length);   5:     ntpData[0] = 0x1b;   6:     7:     this.Args.SetBuffer(ntpData, 0, ntpData.Length);   8:     this.Socket.SendAsync(this.Args);   9: }

As you can see the 48 bytes array is cleared and the first byte is set to 0x1b then the entire buffer is assigned to the SocketAsyncEventArgs using the SetBuffer method. Finally it is passed to the SendAsync method so it is sent to the connected peer. The ReceiveResponse method instead, does not change the SocketAsyncEventArgs but simply calls the ReceiveAsyncMethod. The purpose of this method is not receiving bytes but putting the socket in receive mode so when a packet arrives it is received.

   1: private void ReceiveResponse()   2: {   3:     this.Socket.ReceiveAsync(this.Args);   4: }

When the packet arrives, it is written inside the buffer prepared into the SocketAsyncEventArgs and I receive this data in the Operation_Completed method when LastOperation is Receive. This meand that between ReadAsync and Operation_Completed it may pass a long time depending on how fast is the answer from the server.

   1: private void ReadAndClose()   2: {   3:     byte[] ntpData = this.Args.Buffer;   4:     5:     const byte offsetTransmitTime = 40;   6:     ulong intpart = 0;   7:     ulong fractpart = 0;   8:     9:     for (int i = 0; i <= 3; i++)  10:         intpart = 256 * intpart + ntpData[offsetTransmitTime + i];  11:    12:     for (int i = 4; i <= 7; i++)  13:         fractpart = 256 * fractpart + ntpData[offsetTransmitTime + i];  14:    15:     ulong milliseconds = (intpart * 1000 + (fractpart * 1000) / 0x100000000L);  16:    17:     TimeSpan timeSpan = TimeSpan.FromTicks((long)milliseconds * TimeSpan.TicksPerMillisecond);  18:    19:     DateTime dateTime = new DateTime(1900, 1, 1);  20:     dateTime += timeSpan;  21:    22:     DateTime networkDateTime = dateTime.ToLocalTime();  23:    24:     this.OnCompleted(networkDateTime);  25:    26:     this.Socket.Shutdown(SocketShutdown.Both);  27:     this.Socket.Close();  28:     this.Socket = null;  29: }

The ReadAndClose method receive the buffer and decode its content according with the NTP protocol specifications. Finally it calls ShutDown and Close to terminate the connection. After this the Socket instance is cleared because on the next request I have to create it again.

Using the NtpClient

Once the NtpClient class has been created it is time to use it in a Windows Phone application. Using this class is straightforward. You create the client instance and then call the GetNetworkTimeAsync every time you need to request the datetime. The class exposes two events Completed and Error that are raised accordin with the result of the request:

   1: public partial class MainPage : PhoneApplicationPage   2: {   3:     public NtpClient Client { get; set; }   4:     5:     public MainPage()   6:     {   7:         InitializeComponent();   8:     9:         this.Client = new NtpClient(new DnsEndPoint("0.pool.ntp.org", 123));  10:         this.Client.Completed += new EventHandler<NtpQueryCompletedEventArgs>(Client_Completed);  11:         this.Client.Error += new EventHandler<NtpQueryErrorEventArgs>(Client_Error);  12:     }  13:    14:     private void Button_Click(object sender, RoutedEventArgs e)  15:     {  16:         this.Client.GetNetworkTimeAsync();  17:     }  18:    19:     private void Client_Completed(object sender, NtpQueryCompletedEventArgs e)  20:     {  21:         this.Result.Text = e.Result.ToString(CultureInfo.CurrentCulture);  22:     }  23:    24:     private void Client_Error(object sender, NtpQueryErrorEventArgs e)  25:     {  26:         this.Result.Text = e.Error.ToString();  27:     }  28: }

The NtpClient class does not gracefully handles a double connection request but simply throw away the preceding destroying the socket before creating another one. This is for sure an improvement you can do by yourself.

The socket are a great opportunity for doing beautiful applications. An example of the power of sockets is my Silver VNC Client for Windows Phone that is available on marketplace The VNC client uses a TCP channel to connect to a VNC server and remotely view the desktop of a computer. I hope you enjoy the free edition.

Windows 8 and the future of XAML: Part 1: An overview of the Windows 8 platform

Thu, 12 Jan 2012 17:02:00 GMT

by Gill Cleeren

Introduction to the series

Welcome to this first part of a whole series on Windows 8 articles, which I’ll be writing over the coming weeks and months. It’s my goal in this series to introduce you to what we know at this point about Windows 8 and how we as (XAML) developers will need to adapt to the new platform.

Since you’re probably a XAML developer like I am, we are going to see things from a XAML point-of-view. In some of the upcoming articles, I’m going to describe you how you can leverage what you already know in XAML when Windows 8 will be ready. I’m also going to spend time looking at how you can convert existing Silverlight applications to Windows 8 Metro apps, so that they follow the rules of the OS. We will also be spending time of course on digging into the developer framework making the development on Windows 8 easy: Windows Runtime or shorter, WinRT. Finally, the series will close with a step-by-step guide on building a complete Windows 8 Metro-style application.

Now in this first part, we’ll focus on Windows 8 itself and the relation to Metro-style apps. We won’t be focusing on the development part yet; I just want to make sure that everyone is on board with the new OS itself as well as being able to place the terms Metro, Metro apps, WinRT etc.

I hope you join me on this trip through the Windows platform of the future.

Small note: in this articles, I try to refer to specific versions as little as possible, since I want the information to stay valid as much as humanly possible when Windows 8 will RTM. Therefore, you won’t find download links in these articles. Doing a small search will get you the downloads you need!

Part 1: An overview of the Windows 8 platform

To be honest, I’m writing this very article in the morning of January 1st, 2012… yes indeed, New Year’s Day 2012. And come to think of it, I couldn’t have chosen a better moment - at the beginning of a new year - to write about one of the biggest things awaiting us in that new year: the launch of a new version of the world’s most widely used operating, Windows 8. (Note that at the time of writing of this article, no announcements have been made by Microsoft on any launch date of the OS, but everyone assumes that we’ll see the OS in its final form on our machines sometime in 2012…). As mentioned, in this first article, I will take you through the most important concepts as well as show you some nice improvements.

Windows Client Developer Roundup 086 for 1/11/2012

Pete Brown — Thu, 12 Jan 2012 01:02:35 GMT

The Windows Client Developer Roundup aggregates information ofinterest to Windows Client Developers, including WinRT XAML, WPF, Silverlight, VisualC++, XNA, Expression Blend, Surface, Windows7, WindowsPhone, Visual Studio, WCF RIA Services andmore. Sometimes I even include a little jQuery and HTML5. If youhave something interesting you've done or have run across, or youblog regularly on the topics included here, please send me the URLand brief description via the contactlink.

Note that I've started breaking the Netduino, Electronics,Robotics, Synthesizer and similar content into a new roundup seriescalled the Maker GeekRoundup.

Shout-Outs

Give us your feedback on Visual Studio 11 etc. and receive agift! (Visual Studio Blog)

Windows 8 and WinRT/Metro General

Windows 8 - First Apps Contest (Dave Isbitski)
When Metro design falls off the tracks (Kelly Sommers)
SharpGIS | Make your Windows 8 Video App use the PlayTo feature(Morten Nielsen)

XAML Technologies (Silverlight, WPF, WinRT Metro XAML)

"Physamajig" for Windows 8 (Andy Beaulieu)
Building an Augmented Reality XAML control (MortenNielsen)

WinJS / JavaScript and HTML Applications for Windows Metro

Setting up your first use of the Animation library in WinJS(Adam Kinney)
No Alert in WinJS! Use console or MessageDialog instead (AdamKinney)

Direct X Technologies (DirectX, XNA, WinRT DirectX, General GPUand Game Programming)

Getting started with Metro style DirectX (Bob TacoIndustries)
XNA 4.0 Shader Programming #1-Intro to HLSL, Ambient light(digitalerr0r)
XNA 4.0 Shader Programming #2-Diffuse light (digitalerr0r)
XNA 4.0 Shader Programming #3-Specular light(digitalerr0r)

C++ and Native Development

Compiler Security Enhancements in Visual Studio 11 (SDLTeam)

Visual Studio and .NET General

Visual Studio 11 Platform Tooling Advances (Soma)
- Good DirectX content in this one as well
ManagedMsiExec sample app shows how to use the Windows InstallerAPI from managed code (David Anson)

NUI (Kinect, Surface, More)

Microsoft Kinect coming to Windows on February 1st, up forpre-order now! (KinectHacks)
Kinect Apps - ensuring Kinect Runtime is installed (RobRelyea)
Examples of depth API improvements coming in v1 (RobRelyea)
Kinect + 3D = Fusion4D (Greg Duncan)
Connecting your Netduino to your Kinect (Greg Duncan)
Kinect Fundamentals #4: Implementing Skeletal Tracking |digitalerr0r (digitalerr0r)
Kinect & HTML5 using WebSockets and Canvas (VangosPterneas)

Off-Topic Fun

PoorlyDrawn Lines - When It's Cold (for all the ADD types)
xkcd: Game AIs (xkcd)
Benoit Mandelbrot: Master of seduction (SMBC)
- and Saturday Morning Breakfast Cereal
- and Saturday Morning Breakfast Cereal
Grammar!(SMBC)
Lego Skeleton inside Mini Figure (for the purists)(MoistProduction)

jsFiddle is Well Worth 3 Minutes

Wed, 11 Jan 2012 03:10:14 GMT

If you do anything new today, take 3 minutes to get to know jsFiddle. Why? Because if you do any web development then you’ll benefit from using it. Why 3 minutes? Because that’s all it takes to to grok what it does, how it works, and to write your first “fiddle”. If you have more than 3 minutes, I encourage you to read my short post on jsFiddle in Papa’s Perspective.

Here is a quick sample:

Wow, I actually couldn’t write JavaScript, what I wrote smelled…

Tue, 10 Jan 2012 21:47:38 +0100

Alright, I’m not really a JavaScript developer, but do they even exists? I think there probably are a few JavaScript developers in this world, but most of the developers that I know of are developing for the Web. Developing for the Web in it’s widest sense. Most of the time there’s a server technology like ASP.NET, ASP.NET MVC, PHP or something else. A lot of times people actually feel like they are a WHATEVER-SERVER-TECHNOLOGY developer. I felt the same.

But lately the client-side technologies become more and more important. Yes most web developers know a little bit of HTML, and if we’re lucky there’s some knowledge on CSS as well. Yeah we also write JavaScript. uh actually we write jQuery script. Yes we are lucky to have a library like jQuery, but in the end most of don’t know much about JavaScript at all. Yeah we write functions, sometimes. But that’s about it, we don’t write, maintainable, easy to read JavaScript code. Our JavaScript smells.

And if we want to make use of the full HTML5 stack either for web or for example in a Windows 8 Metro application, our code needs to be maintainable. I can assure you, it’s not going to be 10 lines of JavaScript for a JavaScript Metro application.

To == or to ===?

I know C# so I’m using the double equals to check if left and right are equal. WRONG! I really need to admit I didn’t know I was wrong until a few months ago. So chances are some of you, my readers, don’t know it either. To quote Douglas Crockford’s book on JavaScript:

JavaScript has two sets of equality operators: === and !==, and their evil twins == and !=. The good ones work the way you would expect. If the two operands are of the same type and have the same value, then === produces true and !== produces false. The evil twins do the right thing when the operands are of the same type, but if they are of different types, they attempt to coerce the values. the rules by which they do that are complicated and unmemorable.

So from now on I will be using triple-equals instead of double-equals.

Of course there’s a lot more in The Good Parts book, I can recommend you buying it.

Object Oriented Programming uh Closures

Most of the JavaScript code I write are just functions, and functions might call other functions, some anonymous some named. The end result is either a large amount of functions, are just a couple of functions with more than 100 lines of code.

Is this maintainable? Hell no!

So why don’t I write code in JavaScript like I do in C#? Uh is that possible at all? I recall everybody telling me JavaScript is not an object oriented language. I still have to agree JavaScript doesn’t have all of the object oriented language characteristics to call it a fully object oriented language. But still.

JavaScript objects can be created in different ways, but you’ll have to know a little bit more about some of the JavaScript language features to be able to get things working like you expect.

Some things were completely new to me like Closures: JavaScript Closures for Dummies

Take some time to get to know the above JavaScript features.

With the above concepts you can learn a little bit about JavaScript patterns, which help you when you want to write your own JavaScript library.

Really interesting articles that can help, but if you need more, you should definitely take a look at the pluralsight course for Structuring JavaScript Code.

PS. Don’t feel hurt, there are exceptions to what I write here. Actually if there weren’t good JavaScript devs out there the rest of the world, like me, couldn’t learn from their expertise.

Threading Considerations for Binding and Change Notification in Silverlight 5

Pete Brown — Tue, 10 Jan 2012 16:48:00 GMT

A reader of my Silverlight 5 book recently reached out tome about threading and why I create some objects on the UI threadin the examples. We discussed some of the reasons, but I felt thiswould be a good topic to share with everyone. In fact, this is onearea where it would have been fun to go into great detail in mybook, but there simply wasn't the space. Threading and cross-threadexceptions can be a bit of a mystery to new Silverlight and WPFdevelopers.

Background

The user interface in Silverlight runs on a thread commonlyknown as the UI Thread. Any code you create in the code-behind, andany code it calls all the way down the chain, unless it explicitlycreates another thread, runs on this same UI thread. It's not atall uncommon to see Silverlight and WPF applications which neverexplicitly create a second thread, but do make calls to otherservices which create background threads for processing.

There are many other examples, but networking is one place wherethe Silverlight .NET Framework explicitly creates (or uses)different threads. Not all calls return on the UI thread.

Threads other than the UI thread are not allowed toaccess or manipulate UI objects. If they attempt to do so,the runtime throws an Invalid Cross-Thread Access exception. Itlooks like this:

But wait! I wasn't accessing any UI objects from my code. Whatgives?

It's not always obvious that you're interacting with UI objectson the UI thread, though. Here's the stack trace from thisparticular exception:

{System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation. --->
  System.UnauthorizedAccessException: Invalid cross-thread access.
   at MS.Internal.XcpImports.CheckThread()
   at MS.Internal.XcpImports.GetValue(IManagedPeerBase managedPeer, DependencyProperty property)
   at System.Windows.DependencyObject.GetOldValue(DependencyProperty property, EffectiveValueEntry& oldEntry)
   at System.Windows.DependencyObject.UpdateEffectiveValue(DependencyProperty property, EffectiveValueEntry oldEntry, EffectiveValueEntry& newEntry, ValueOperation operation)
   at System.Windows.DependencyObject.RefreshExpression(DependencyProperty dp)
   at System.Windows.Data.BindingExpression.SendDataToTarget()
   at System.Windows.Data.BindingExpression.SourcePropertyChanged(PropertyPathListener sender, PropertyPathChangedEventArgs args)
   at System.Windows.PropertyPathListener.ReconnectPath()
   at System.Windows.Data.Debugging.BindingBreakPoint.<>c__DisplayClass4.<BreakOnSharedType>b__3()
   --- End of inner exception stack trace ---
   at System.RuntimeMethodHandle.InvokeMethod(Object target, Object[] arguments, Signature sig, Boolean constructor)
   at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture, Boolean skipVisibilityChecks)
   at System.Delegate.DynamicInvokeImpl(Object[] args)
   at System.Delegate.DynamicInvoke(Object[] args)
   at MainPagexaml.BindingOperation(Object BindingState, Int32 , Action )}

This stack trace was generated by trying to raise aPropertyChangedNotification when I manipulated a model object froma background thread. So, it was obvious that I was workingwith an object on the background thread, but it wasn't obvious thatI'd get a cross-thread exception (well it was in this case, as Icontrived the example). If you consider a larger application whereyou have division of ownership for different pieces, a client-sidedeveloper may simply work with your viewmodel, but not realizeyou're farming some work out to another thread.

I wrote a blog post back in 2010 ( Essential Silverlight and WPF Skills: The UI Thread, Dispatchers,Background Workers and Async Network Programming) explainingsome of the ways to work with threads and dispatching. I didn'thave SynchronizationContext in there at the time, but it'ssomething I tend to use a lot these days.

Let's take a look at a few of the common scenarios and how itworks with threading.

Common Scenarios

All of these scenarios make use of a simple Customer class witha single property:

namespace SilverlightThreadingExample.Model
{
    public class Customer : Observable
    {
        private string _firstName;
        public string FirstName
        {
            get { return _firstName; }
            set { _firstName = value; NotifyPropertyChanged("FirstName"); }
        }
    }
}

The customer is observable that is, it notifies anylisteners when properties change. While not necessary, Iencapsulated the observable code in this base class. You could,instead, put the implementation in a partial class if you wanted tomake sure your model object's signature from your ORM or whateverremains the same as it was on the server.

using System.ComponentModel;

namespace SilverlightThreadingExample
{
    public class Observable : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

This is actually a pretty typical approach to handlingINotifyPropertyChanged. There are even more robust versions outthere which use lambdas and reflection to help avoid passing instrings, but they ultimately come down to raising thePropertyChanged event. Many of them also fail to work properly incross-thread situations.

I expose the Customer class and a collection of customers from aViewModel class.

namespace SilverlightThreadingExample.ViewModel
{
    public class CustomerEntryViewModel : Observable
    {
        private Customer _currentCustomer;
        public Customer CurrentCustomer
        {
            get { return _currentCustomer; }
            set { _currentCustomer = value; NotifyPropertyChanged("CurrentCustomer"); }
        }

        private ObservableCollection<Customer> _customers = new ObservableCollection<Customer>();
        public ObservableCollection<Customer> Customers
        {
            get { return _customers; }
        }

        public void LoadCustomersOnSameThread()
        {
            LoadDummyData();
        }

        private void LoadDummyData()
        {
            _customers.Add(new Customer() { FirstName = "Pete" });
            _customers.Add(new Customer() { FirstName = "Jon" });
            _customers.Add(new Customer() { FirstName = "Tim" });
            _customers.Add(new Customer() { FirstName = "Scott" });
            _customers.Add(new Customer() { FirstName = "Andy" });
            _customers.Add(new Customer() { FirstName = "Blaine" });
            _customers.Add(new Customer() { FirstName = "Jesse" });
            _customers.Add(new Customer() { FirstName = "Rey" });

            _currentCustomer = _customers[0];
        }

    }
}

Finally, the UI is bound to those classes. The DataContext forthe UI (which will be set in code-behind) is the ViewModel.

<UserControl x:Class="SilverlightThreadingExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="400" d:DesignWidth="600">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid Width="500">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="250" />
            </Grid.ColumnDefinitions>

            <ListBox x:Name="CustomerList"
                     Grid.Column="0" Margin="10"
                     ItemsSource="{Binding Customers}"
                     SelectedItem="{Binding CurrentCustomer, Mode=TwoWay}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FirstName}" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

            <StackPanel Grid.Column="1">
                <TextBox x:Name="FirstNameField" Margin="10"
                         DataContext="{Binding CurrentCustomer}"
                         Text="{Binding FirstName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

                <Button x:Name="AddCustomer"
                        Content="Add Customer from UI Thread"
                        Height="30" Margin="5"
                        Click="AddCustomer_Click" />
                <Button x:Name="AddCustomerSecond"
                        Content="Add Customer from Second Thread"
                        Height="30" Margin="5"
                        Click="AddCustomerSecond_Click" />
                <Button x:Name="ChangeNameFromSecondThread"
                        Content="Change Name from Second Thread"
                        Height="30" Margin="5"
                        Click="ChangeNameFromSecondThread_Click" />
            </StackPanel>

        </Grid>
   
    </Grid>
</UserControl>

The code-behind looks like this

using System.Windows;
using System.Windows.Controls;
using SilverlightThreadingExample.ViewModel;
using System.Threading;
using SilverlightThreadingExample.Model;

namespace SilverlightThreadingExample
{
    public partial class MainPage : UserControl
    {
        CustomerEntryViewModel _vm;

        public MainPage()
        {
            InitializeComponent();

            CreateViewModelOnUIThread();
        }


        private void CreateViewModelOnUIThread()
        {
            _vm = new CustomerEntryViewModel();

            _vm.LoadCustomersOnSameThread();

            DataContext = _vm;
        }


        private void AddCustomer_Click(object sender, RoutedEventArgs e)
        {
        }


        private void AddCustomerSecond_Click(object sender, RoutedEventArgs e)
        {
        }


        private void ChangeNameFromSecondThread_Click(object sender, RoutedEventArgs e)
        {
        }


    }
}

The methods are named to keep the context clear in this example.I wouldn't expect you to name your VM instantiation/locator method"CreateViewModelOnUIThread", for example.

Now let's look at those scenarios.

Changing a property value from a background thread

Often in an application, you have a class which is used in UIbinding (an entity/model object) but still need to modify aproperty from code. Sometimes, you need to do that from abackground thread. For example, you make a network call to get anupdated price for an item. You will get a cross-thread access errorwhen the class raises change notification events from that propertysetter. If the class is truly POCO (Plan Old CLR Object) anddoesn't do any change notification or other event raising, you'llbe fine. If, however, change notification is involved, you'll getthe cross-thread exception.

Assuming the same Customer and Observable classes defined above,and the same XAML UI, the following code in the code-behind willthrow that exception.

private void ChangeNameFromSecondThread_Click(object sender, RoutedEventArgs e)
{
    Thread t = new Thread((o) =>
        {
            _vm.CurrentCustomer.FirstName = "UpdatedFromSecondThread";
        });

    t.Start();
}

The exception doesn't happen when you set the property value;that's perfectly acceptable. It happens here, at the highlightedline:

protected void NotifyPropertyChanged(string propertyName)
{
    if (PropertyChanged != null)
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}

So, what are the options for working around this? Let's considertwo common approaches.

Approach 1

The first approach is to do the whole property change from theUI thread. To do this, simply wrap the property set code with acall to the dispatcher. You can use either the Dispatcher object,or if you keep a copy of the SynchronizationContext around, usethat.

Here's some example code which implements this. The code looks abit silly because I'm forcing a background thread. However, pretendthat the background thread is a given and you need to work from it(again, the callback from a network call or something.)

private void ChangeNameFromSecondThread_Click(object sender, RoutedEventArgs e)
{
    Thread t = new Thread((o) =>
    {
        Deployment.Current.Dispatcher.BeginInvoke(() =>
            {
                _vm.CurrentCustomer.FirstName = "UpdatedFromSecondThread";
            });
    });

    t.Start();
}

This approach works well, but requires the calling code tohandle all the dispatching. If you have a number of properties tochange in different bits of code, it gets a bit cumbersome. Let'slook at another approach.

Approach 2

The real problem is the property change notification, so the thesecond approach is to dispatch just the change notification to theUI thread.

You can put this code into the Observable base class in order toavoid repeating it throughout all your classes.

// Code-behind
// ----------------------------------------------


// this version throws an exception if the Observable base class isn't doing thread checking
private void ChangeNameFromSecondThread_Click(object sender, RoutedEventArgs e)
{
    Thread t = new Thread((o) =>
        {
            _vm.CurrentCustomer.FirstName = "UpdatedFromSecondThread";
        });

    t.Start();
}


// Observable
// ----------------------------------------------


using System.ComponentModel;
using System.Windows;

namespace SilverlightThreadingExample
{
    public class Observable : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                if (Deployment.Current.Dispatcher.CheckAccess())
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
                else
                {
                    Deployment.Current.Dispatcher.BeginInvoke(() =>
                    {
                        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                    });
                }
            }
        }
    }
}

Note how I first check to see if we have access to the UI threadusing the CheckAccess call. If we do, there's no reason to incurthe overhead and delay of a dispatcher call. However, if we arerunning on the background thread, then the call is dispatched tothe UI thread. In either case, we avoid the errors cause bycross-thread property change notification.

Next up: Collections

Populating an ObservableCollection from a networking returncall

A more robust Observable base class like this won't help withcollection change notification (WPF 4.5 has a great solution forthat using BindingOperations.EnableCollectionSynchronization, butunfortunately Silverlight does not).

Most applications make networking calls to get information fromsome resource on an intranet or out on the web. In Silverlight (andWPF), it's common practice to populate an ObservableCollection withthe results from those calls. The ObservableCollection class isnice because it implements INotifyCollectionChanged and raises anevent whenever items are added to or deleted from the collection,or when the collection is cleared. It's this notification thatenables the various items controls and grids in the UI to stay insync with the items in the collection.

This version is very similar to what we saw with individualproperties earlier. That's because, it's really the same problem:we're trying to notify the binding system across threads.

private void AddCustomerSecond_Click(object sender, RoutedEventArgs e)
{
    Thread t = new Thread((o) =>
    {
        var cust = new Customer() { FirstName = "AddedFromSecondThread" };
        _vm.Customers.Add(cust);
    });

    t.Start();
}

Note that the problem exists regardless of where you actuallycreate the customer. For example, this code will also fail:

private void AddCustomerSecond_Click(object sender, RoutedEventArgs e)
{
    var cust = new Customer() { FirstName = "AddedFromSecondThread" };

    Thread t = new Thread((o) =>
    {
        _vm.Customers.Add(cust);
    });

    t.Start();
}

The reason is, again, it's not the object access that is causingthe cross-thread exception, it's the collection changednotification that's full of hate here.

So, how do you get around this? Unless you want to create yourown ObservableCollection type class for Silverlight, you'll need todispatch all collection add calls. Luckily, you'll typically havefewer of these scattered throughout the application, so it's notquite so onerous.

The code to implement this is just another easy call to thedispatcher (or SynchronizationContext, if you prefer).

private void AddCustomerSecond_Click(object sender, RoutedEventArgs e)
{
    // you can create customer on any thread
    var cust = new Customer() { FirstName = "AddedFromSecondThread" };

    Thread t = new Thread((o) =>
        {

            // dispatch to UI thread to add it to the collection. You can't
            // access the observable collection x-thread
            Deployment.Current.Dispatcher.BeginInvoke(() =>
                {
                    _vm.Customers.Add(cust);
                });
        });

    t.Start();
}

If you're going to run from an unknown state, be sure to callCheckAccess to see if you really need to do the dispatching. Inthis case, I know I'm always going to be on a background thread, soI don't bother.

Summary

The intent here was to show a few of the common threadingpitfalls in Silverlight (and WPF) applications, specifically in thecontext of change notification. In most code, it's easy to tellwhen you're accessing objects cross-thread, but change notificationis a somewhat behind the scenes operation, so it's not alwaysobvious.

For property change notification, the solutions were:

Dispatch the entire property change operation to the UIthread
Update the NotifyPropertyChanged code to check to see whichthread it's running on, and then dispatch the event asappropriate

Either way works, but I prefer the update to theNotifyPropertyChanged method.

For collection change notifications in Silverlight, thesolutions are:

Create (or find) an implementation of ObservableCollectionwhich does the cross-thread checking. The reason this isn'tbuilt-in is change notification happens often, and dispatching eachand every change notification can be a real performance drain.That's also why WPF has a separate and optimized solution. You'dneed to enable batching to avoid the overhead of hundreds ofdispatch calls.
Dispatch the entire collection update when you're running on abackground thread.

In contrast to the property change notifications, for collectionchange, I prefer to dispatch the entire call. If you're adding 1object or 100, you'll still get only one dispatch call, soperformance is better.

The Task Parallel Library in WPF, and the subset of it inSilverlight also offer some alternative approaches to handlingcross-thread work. Similarly, the async and await keywords in .NET4.5 and Windows 8 XAML can also come into play. More on those inthe future.

Silverlight Reporting Open Source Printing/Reports Example Updated for Silverlight 5

Pete Brown — Mon, 09 Jan 2012 20:44:30 GMT

I recently posted an updated version of Silverlight reporting oncodeplex. Here's the overview.

This project, a unofficial project by Pete Brown of Microsoft,provides a a very basic framework for building simple, short,multi-page reports using Silverlight 5.

The intent is not to be an all-encompassing reporting solution,or a solution for large reports. Instead, this is a set of code youcan build upon to create short (2-5 page) reports from yourSilverlight applications.

Currently the sample consists of the full source code of asimple report writer. It includes:

automatic pagination
support for line items of varying height
total page count
templating
page headers and footers
report footer with support for calculated fields
events to allow hooking into printing at various stages

Latest Release

Version information changed to use semantic versioning. Thisvesion is numbered: 1.0.0-alpha.3

Now targets Silverlight 5
Added ability to specify postscript (vector) printing. Theselected driver must support PostScript or this setting will haveno effect.
Fixed issue with not being able to re-print the report. (andfixed leaky event handlers)
Added null check on templates

This is still alpha, and is a minor project. Expect bugs. Reportthem when you do. Offer fixes if you can :)

Get the latest release here.

Windows Phone 7.5 - Using advanced tiles API

editorial@silverlightshow.net (Andrea Boschin ) — Mon, 09 Jan 2012 15:43:00 GMT

Don't miss...

Accessing and changing your tile(s)

   1: StandardTileData data = new StandardTileData   2: {   3:     Title = "My tile!",   4:     Count = 10,   5:     BackgroundImage = new Uri("/Background.png", UriKind.RelativeOrAbsolute),   6:     BackTitle = "This is the back",   7:     BackContent = "Hallo!",   8:     BackBackgroundImage = new Uri("/Background.png", UriKind.RelativeOrAbsolute)   9: };  10:    11: ShellTile.ActiveTiles.First().Update(data);

Tiles have also a background image, usually of the size of 173x173 pixels, that fills the entire square. The image must reside in the project as a resource and we can refer to it with a relative uri that starts at the root of the project. So "/Background.png" refers to the standard image, usually created by visual studio in the default project. Of course you can set different images for each side of the tile.

If you generate images on the fly, while the application is running, you can also use isolated storage to peek up images to show in the tiles. For this purpose you have to generate images in the standard path "/Shared/ShellContent", and then use the "isostore:" prefix when you refer to it in the tile's uri. Here is an extended example that shows this tecnique with a generated background image. The image contains a simple gradient as shown on the left side.

   1: private const string TilePath = "/Shared/ShellContent/tile.jpg";   2:     3: void MainPage_Loaded(object sender, RoutedEventArgs e)   4: {   5:     WriteableBitmap bmap = new WriteableBitmap(173, 173);   6:     7:     for (byte x = 0; x < 173; x++)   8:         for (byte y = 0; y < 173; y++)   9:             bmap.Pixels[y * 173 + x] = (0xff << 24) | (x << 16) | y;  10:    11:     using (IsolatedStorageFile file = IsolatedStorageFile.GetUserStoreForApplication())  12:     {  13:         if (file.FileExists(TilePath))  14:             file.DeleteFile(TilePath);  15:    16:         using (IsolatedStorageFileStream stream = file.CreateFile(TilePath))  17:             bmap.SaveJpeg(stream, 173, 173, 0, 100);  18:     }  19: }  20:    21: private void bCheckTiles_Click(object sender, RoutedEventArgs e)  22: {  23:     StandardTileData data = new StandardTileData  24:     {  25:         Title = "andrea",  26:         Count = 10,  27:         BackTitle = "This is the back",  28:         BackContent = "Hallo!",  29:         BackBackgroundImage = new Uri("isostore:/Shared/ShellContent/tile.jpg", UriKind.RelativeOrAbsolute)  30:     };  31:    32:     ShellTile.ActiveTiles.First().Update(data);  33: }

Finally you probably noticed an asimmetry in front and back properties. While front properties have a "Count" value, the background can specify a "BackContent". The "Count" property is made to specify a number to show on the right-top corner. This may be useful to applications that can check for email messages and so on. The BackContent instead, is used to fill the main content of the tile background. The tile figure on the left side show the word "Hallo!" in the place where content is displayed.

Schedule tile updates

Once you configured your application's tile, your next need is probably to change the tile's content to notify the user about a service you are monitoring. This usually means use a time-based schedule that is able to check on a server if there is something to notify. Since OS 7.0, Windows Phone has a ShellTileSchedule. It was very limited because you was only able to update the background image, using a remote Uri to call on a scheduled basis. In OS 7.5 this has not changed a lot. The only thing we get added is the capability of also update secondary tiles (I will speak about secondary tiles in a few). You can connect the ShellTileSchedule to an arbitrary tile using the ActiveTiles collections as shown here:

   1: ShellTileSchedule schedule = new ShellTileSchedule(ShellTile.ActiveTiles.First())   2: {   3:     Interval = UpdateInterval.EveryHour,    4:     MaxUpdateCount = 0,    5:     Recurrence = UpdateRecurrence.Interval,    6:     StartTime = DateTime.Now,   7:     RemoteImageUri = new Uri("http://xamlplayground.org/wp7updates/tile.jpg")   8: };   9:    10: schedule.Start();

The ShellTileSchedule constructor accept a reference to a ShellTile in the collection so you can schedule multiple updates, one for each tile of your application.

As I shown in the example of the previous article about background agents, Windows Phone 7.5 gives an additional opportunity to schedule tile updates. You are able to use a ScheduledAgent and from inside the agent you are able to access the ActiveTiles collection and update almost every property you think useful to notify the user, with the sole limitation of a fixed schedule of 30 minutes. In the Panoramio example I showed how to access GPS position and retrieve a random image from Panoramio to update the application tile with a local image. Please check out the previous article for a detailed explanation.

Using secondary tiles

A great new opportunity with Windows Phone 7.5, is the ability of configure more than a tile, to pin to the home screen. These tiles can work as shortcuts for services exposed by your applications. To make a practical example, you can think at secondary tiles to expose different locations for a weather channel or to have a shortcut to airplanes flights and so on. The sole limit is your fantasy.

A secondary tile is simply created using the static Create method only on user input. This means your application cannot create tiles automatically, but only when the user explicitly ask it, interacting with the application interface. To create the tile you have to fill a StandardTileData class and pass it to the method. As a result the application exits and the user is brought to the tile position in the home screen. This also means that you can only create a secondary tile for each session because, the process close the application every time. Here is the code to create the tile:

   1: private void PinToStart(string address)   2: {   3:     Server server = Repository.GetServer(address);   4:     5:     if (server != null)   6:     {   7:         ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault(   8:             t => t.NavigationUri.ToString().EndsWith("server=" + address));   9:    10:         if (tile == null)  11:         {  12:             string destFileName = CopyImageToShellContent(address);  13:    14:             StandardTileData newTile = new StandardTileData  15:             {  16:                 Title = server.Name,  17:                 Count = 0,  18:                 BackgroundImage = new Uri("Background.png", UriKind.Relative),  19:                 BackTitle = server.Name,  20:                 BackBackgroundImage = new Uri(destFileName, UriKind.Absolute),  21:                 BackContent = AppStrings.Title  22:             };  23:    24:             ShellTile.Create(new Uri("/Pages/VNCPanorama.xaml?server=" + address, UriKind.Relative), newTile);  25:         }  26:     }  27: }

This sample, taken directly from the next release of my Silver VNC client for Windows Phone 7, shows how to create the tile. The important thing to note is the uri you have to pass to the Create method. This uri (called NavigationUri) is the one called when the user hits the pinned tile. It indicates the page inside your application that will be used as landing page for the request and can have multiple query string parameters to let the application decide how to answer to the request. Thanks to these parameters you can have multiple tiles that connect to the application with different actions. Inside the page that receive the user request you can parse the query string to evaluate the action to perform:

   1: protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)   2: {   3:     this.txtName.Text = string.Empty;   4:     this.txtAddress.Text = string.Empty;   5:     this.Load();   6:     this.EvaluateFromPinnedTile(e);   7:     base.OnNavigatedTo(e);   8: }   9:    10: private void EvaluateFromPinnedTile(NavigationEventArgs e)  11: {  12:     if (e.NavigationMode == System.Windows.Navigation.NavigationMode.New)  13:     {  14:         Match match = Regex.Match(e.Uri.ToString(), ".*?server=(?<address>.*)");  15:    16:         if (match.Success)  17:         {  18:             string address = match.Groups["address"].Value;  19:    20:             Server server = Repository.GetServer(address);  21:    22:             if (server != null)  23:                 this.Connect(server);  24:             else  25:                 MessageBox.Show(string.Format(AppStrings.Message_UnknownServer, address));  26:         }  27:     }  28: }

Into the OnNavigated method I call the EvaluateFromPinnedTile method that is responsible to check if the navigation occur because the user hit the pinned tile. In the method I check the NavigationMode property, that is always set to "New" when it is raised from a secondary tile and the use a regular expression to effectively check the incoming uri and retrieve the address. If the call is validated then I retrieve the Server information, from the local database, and then I call the Connect method to start the VNC connection.

To be double sure to not have exceptions I also check that the server exists on the database. Also if I delete the tile when the server is deleted from the database, this check is more defensive. Here is the deletion code:

   1: private void TryUnpinFromStart(string address)   2: {   3:     ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault(t => t.NavigationUri.ToString().EndsWith("server=" + address));   4:     5:     if (tile != null)   6:     {   7:         tile.Delete();   8:     }   9: }

While programming secondary tiles, you must be cautious because the user can always remove the pinned tile from the home screen, without the application get any warn about it. So please always be careful about what you get and always try to be in sync between secondary tiles and application data.

Tile your apps.

Tiles are probably the most distinctive feature you have in Windows Phone 7. As it happen for every hard decision you can only love or hate them. I meet lot of people that take tiles as an example of the wrong of the Windows Phone and lot of other people that think in the opposite way. My think is that for common people tiles are a great opportunity of access all the capabilities of the phone without have to deal with complicated interfaces. Only hit and pin, is the only thing you need. From the developer side, use tiles correctly gives you an additional gear to make you applications more flexible and effective. However, my think is that tiles are great; given I love the simplicity, they are one of the best features of my favorite phone.

How to cancel (overwrite) a successful Marketplace update submission?

Sat, 07 Jan 2012 22:41:17 +0100

It was a day after I submitted an update to one of my apps to the marketplace where I found out about a bug. This was a functional bug which didn’t affect Marketplace testing. I already knew that I couldn’t cancel a running submission, so I already learned the Hard Way to never Auto Publish, but do a Manual Publish after successful testing.

Tip: Do a Manual Publish after successful testing. This makes sure you are in control!

Alright, what happened to me recently is that I made a small code change that causes problems a Background Task for about 50% of the time. I didn’t find this during initial testing. A small case of using the less than sign instead of the greater than sign. I found out about this bug after I submitted the app to the marketplace. So I waited until the submission was successful (or failed).

The Marketplace team successfully tested my application and I was in control (see tip). What can I do?

Publish the application: I obviously don’t want this, there’s a bug in the app.
Edit catalog details: Doesn’t help me either.
Edit product details: That should help…

So I went for “Edit product details”, but sadly that didn’t work, because it helped me to Step 2 and not Step 1 where I could upload a new Application Package.

Alright, time for some hacking I would say. It might be risky, so use it at your own risk.

1. Start with the Edit catalog details url, copy the applicationId and the parentApplicationInstanceId.

2. Replace the applicationId and the parentApplicationInstanceId in the following url.

https://windowsphone.create.msdn.com/AppSubmission#/PageUpload&mode=Update&applicationId=00000000-0000-0000-0000-000000000000&parentApplicationInstanceId=00000000-0000-0000-0000-000000000000

3. Then follow that link. But do nothing else.

4. Go back to the original page where the “Edit product details” didn’t go to step 1, but to step 2. In my situation it did suddenly go to step 1 and I was able to upload a new Application Package.

I’m now waiting again for the Marketplace testing. I hope this will help some people who have a similar problem.

"Physamajig" for Windows 8

andy@andybeaulieu.com — Fri, 06 Jan 2012 18:24:00 GMT

UPDATE 1/16/11: Physamajig has been selected as a finalist in the Windows 8 First Apps Contest!

I am not one to shy away from programming contests. So with the announcement of the Windows 8 First Apps Contest, I wanted to try and do something fun and at the same time refine my Physics Helper XAML project.

What I came up with is "Physamajig" - a Metro style app that allows you to interactively create physics simulations in Windows 8!

Physamajig is similar to a WP7 app I created called "Paint to Life" - but it takes things much further by including many new tools, joints, physics properties, file options, and more! And I have to say that the Windows 8 Metro version of this app looks much more slick than the WP7 version.

The app comes with several sample creations pre-installed, and one of the next features I am working on is a web service so that users can share their creations online.

There are definitely some gotchas with working with the Developer Preview bits for Windows 8, but for such an early release it is quite productive really. I found the Community Forums quite helpful when I hit issues, if nothing else to know that I was not alone :)

If you're building any apps for the Windows 8 Contest, I'd be happy to know more about them - please share!

Discussing the Microsoft Client Landscape on DotNetRocks

Thu, 05 Jan 2012 17:50:49 GMT

A few weeks ago I had a great time talking with Carl and Richard about the client development landscape. We chatted about everything from XAML, to Windows Phone, Windows 8, to Silverlight, to HTML5, to JavaScript, to KnockoutJS, to and JsRender. That discussion ended up being on this week’s DotNetRocks episode #730.

I’m finding that the client landscape is an extremely interesting area with a lot of exciting new activity. Between hardware solutions and some great technologies running on them, it’s a great time to dive into them and see what floats, and more importantly, get inspired to create. This is one of the reasons I decided to start writing a new column in MSDN Magazine (soon to be formally announced) on the client landscape and where I can explore an array of client tech.

You can check out the entire lively discussion on DotNetRocks with Carl, Richard and me right here.

3 Challenges for Windows Phone

Thu, 05 Jan 2012 00:18:43 GMT

I like my Windows Phone. The UI is awesome and I’m itching to get the Lumia 900 when it comes out. The iPhone interface feels a bit dated to me. But the lack of good apps is killing me right now. I have faith in the Windows Phone team though that 2012 will be a big year and they’ll continue to rise.

Here is an article I wrote for VS Magazine that states what I deem as the 3 challenges WP faces today. The key is to forget the developers who write code for it and go talk to users … real people. Most hardly know what it is. Sigh. http://visualstudiomagazine.com/articles/2012/01/01/microsoft-phone-challenges.aspx

Yet Another Podcast #56–Jeff Blankenburg: Evangelist

Wed, 04 Jan 2012 15:45:04 +0000

Windows 8 and the future of XAML: Part 1: An overview of the Windows 8 platform

editorial@silverlightshow.net (Gill Cleeren ) — Tue, 03 Jan 2012 23:59:00 GMT

Is there a specific Win 8 topic you need covered in this series?
Check out the currently planned TOC for the whole series, and feel free to suggest more topics for inclusion.

Introduction to the series

Don't miss...

I hope you join me on this trip through the Windows platform of the future.

Small note: in this articles, I try to refer to specific versions as little as possible, since I want the information to stay valid as much as humanly possible when Windows 8 will RTM. Therefore, you won’t find download links in these articles. Doing a small search will get you the downloads you need!

Part 1: An overview of the Windows 8 platform

Let’s BUILD… and all the panic

At Mix in the spring of 2011, Microsoft said that they were planning to hold a conference in September where they would show off Windows 8, mainly for developers. While many assumed this was going to be a new edition of PDC, Microsoft named the conference BUILD (www.buildwindows.com). In the months between Mix and Build, some early footage of Windows 8 was shown (http://www.youtube.com/watch?v=p92QfWOw88I), where we saw for the first time the Windows 8 Metro interface. This and next videos sparked a lot of rumors, announcing the death of Silverlight and XAML: some had totally misunderstood the context of the story and thought that HTML5 and JavaScript was going to become the only way of building applications for Windows 8.

Nothing however could be further from the truth. When Microsoft showed Windows 8 at Build, it became clear that the HTML5/JavaScript combination was one way of building apps, but certainly not the only one. Managed developers who build their apps in .NET are going to be doing more or less the same when building apps for Windows 8, based on the same languages (C#, VB). Take a look at the next image, which I took from a slide deck from Build.

As you can see, there’s basically two ways of building applications for Windows 8. The part on the right (Desktop Apps) is the same thing as we are doing today. This includes WinForms, ASP.NET, C++, WPF, Silverlight etc applications. Nothing is really changing here, apart from the fact that .NET is being updated to 4.5. This means new features to for example WPF. We aren’t going to focus on that a lot in this series, since as mentioned, not much new is to be discovered, things are staying the same.

The big change is the left part, Metro style apps, which is essentially a new type of applications and a new way of building apps. HTML5/JavaScript is one way of building these apps; however, the combination XAML/C# (or XAML/VB) is going to be the way that most managed developers today are going to select. Note that below XAML/C#, a new layer is added, WinRT (aka Windows Runtime). In one sentence, WinRT will allow us to leverage the power of Windows to build Metro style apps using the language of our choice, be it C#, VB, C++ or JavaScript. Much more on WinRT in the next articles!

BUILD hardware and software announcements

At Build, Microsoft added another type of platform that they are targeting. Previously, we could develop applications for the web/browser or for the desktop. Web applications are traditionally built using ASP.NET/ASP.NET MVC or Silverlight. Optionally, a client-side library such as jQuery can be used here as well. When targeting the desktop, WPF or also Silverlight were viable solutions.

Microsoft is now adding something in between here: they are now focusing on tablet devices as well. These devices as well as the software running on them is optimized for touch-based input. However, we’ll see that Metro applications should also be able to be controlled using the mouse and keyboard. In the image below, we can see Steven Sinofsky at the BUILD keynote with a touch-based tablet device, running Windows 8. Note Windows 8 running on regular PCs and notebooks as well: it’s not ONLY for tablet devices.

To build Metro-apps today, Microsoft announced an Express edition of Visual Studio 11. At the point of writing, this is the only way of building Metro apps (vice-versa: being an Express edition, this version only supports building Metro apps; we can’t use it to build for example WPF applications). We will be using this version extensively in the upcoming articles.

A new edition of the full-blown version of Visual Studio was also announced: this version supports .NET 4.5 and allows us to build any kind of application, including Silverlight 4 and 5. This version doesn’t require Windows 8 and can run on Windows 7 therefore as well.

I’ve now referred to “Metro-style apps” several times already, although it may not be 100% clear what exactly is meant with the term “Metro-style apps”. To make this perfectly clear, let’s open Windows 8!

Exploring Windows 8 and Metro-style apps

Upon starting a Windows 8 installation for the first time, you arrive in the following environment. This is the Metro environment where Metro-style apps live.

The rectangles we see here are “tiles” (we don’t say icons anymore). When tapping (or clicking if using a mouse) on one of them, we are launching the application behind it. Most tiles you can see in the above screenshot link to Metro-style apps: applications that run in this environment itself.

But wait, what’s this icon, sorry, tile at the bottom left?

When opening this Desktop tile, we are brought to the traditional Desktop environment.

In this desktop mode, regular applications such as Office, WinZip, Google Chrome etc will run as they do now on Windows 7. Also, all the applications we wrote in .NET (or will write in .NET 4.5), will run here with nothing really different than before.

So, with Windows 8, we can say that we have 2 environments where applications can run: in the desktop mode and in the Metro environment. No application can run in both environments. It’s not possible for a desktop application to run in the Metro environment. It’s also not possible for a Metro application (built with WinRT as we’ll see in further articles) to run in the desktop environment. There’s a clean separation between the two.

Another way of thinking of this is the following. Although technically not correct, we can think of the Metro environment as a shell on top of the desktop mode which can in turn run Metro applications.

The Metro environment is tightly linked to the desktop mode. In the current version, there’s no Start menu anymore in the desktop mode. When clicking on the Windows Orb button in the left button corner, we’re taken back to the Metro environment. So, one could say that the Metro environment is also an extended Start menu which is now capable of running applications. However, I don’t really support thinking of the Metro environment in this way.

Let’s now look at some typical Metro-style applications.

Typical Metro-style apps

With the default installation, some (small) Metro-style applications, created by Microsoft, are installed by default. Let’s open for example the News app, shown below.

Note that this is a full-screen screenshot, I haven’t cut off anything. Several things are strikingly different from traditional applications. For one thing, they are filling the screen by default. Content is important, not the chrome of the application. The application shows no menus or toolbars by default; it’s kept very simple and easy to use. The interface itself is also optimized for touch, but can be controlled with the mouse as well.

When opening one of the titles, some details are shown about the post, as shown below.

Again, no toolbars and a very neat and clean interface, optimized for touch.

But how can we now go back to the overview screen? If you’re using a touch-based device, simply swipe in from the top of the screen. If using a mouse, simply right-click. Both actions will result in a so-called Application Bar to be shown at the bottom of the screen. Using the only button in this bar, we can navigate back. The application bar is customizable and we’ll see how to do so in later articles. Readers with a WP7 background will immediately recognize the application bar as well.

Let’s open another application, the Memories application, shown below.

This application as well is a beautiful example of the Metro style being used. When opening an album, we get the details.

And we can edit content using the Application Bar as well.

Internet Explorer in Metro

If you’ve taken a good look at the Metro environment screenshot, you may have noticed that there’s a tile for Internet Explorer there as well. Indeed, there’s a Metro version of IE available, again with the same characteristics as other Metro apps. This version of IE is optimized for the content so it’s not cluttered with tabs and toolbars.

This version however doesn’t support plug-ins, so it’s not possible to run Silverlight (or Flash) applications in this browser. To do so (and in line with what we said earlier), we need to go to the full browser in the desktop mode. There, a Silverlight application can run perfectly.

It’s possible from the Metro IE to jump to the regular version, using the following button. This effectively means that if you arrive on a Silverlight site in the Metro version of IE, you can switch to the full version on the fly.

The Metro control panel

Another nice example of the touch interface in Windows 8 Metro is the control panel.

As can be seen from the screenshot below, the interface of this Metro control panel is optimized to be used using your fingers as input device. The control panel inside the Metro environment is specific to settings that influence the Metro environment itself. The regular control panel lives inside the Desktop mode and it gives us access to the regular settings, just like in Windows 7.

More on the desktop mode

With all the novelties being added, one might get the idea that the desktop mode isn’t being changed at all. Well, luckily that isn’t true: there are some major improvements being done in the “regular” Windows environment as well.

One area that’s getting an overhaul is the Windows Explorer itself. A ribbon is being added, known to millions of Office users already. Microsoft added some new actions directly to the ribbon. In the screenshot below, you can see the explorer ribbon.

Just like in Office, the ribbon is context-sensitive: depending on your action or selection within the explorer window, one or more tabs might appear. In the screenshot below, you can see what happens if I select a picture.

The next screenshot shows what happens if we select a hard drive.

Another item that got an overhaul is the Task Manager. Below you can see a screenshot of the new Task Manager. Notice that it’s as if some Metro-sauce has been added over the old version of the Task Manager!

Take a look at the Processes tab. Notice anything in particular here?

The Metro-apps are shown in this list as well. However, they are in a suspended state. Again, for the WP7 developers, this may seem familiar with the application lifecycle we have in WP7. Indeed, in the Metro environment, applications can remain in memory without getting access to CPU cycles. In this case, they are in the suspended state. We’ll see more about the lifecycle of Metro applications later in this series as well!

Where will I be working?

A question I’ve received quite a few times while presenting about Windows 8 is “Will I be working in the Desktop Mode or in the Metro environment mostly”. Like so many things in life, the answer is here again: “It depends”.

At this point, I reckon that if you’re working on a regular machine and you’re doing your daily job (be that working as a developer, writing in Word, making Excel sheets…), you’ll default to the Desktop Mode. If however, you’re working on a tablet, the Metro environment will suite your needs better.

The answer to this question is however a difficult one, certainly at the time of writing where we don’t have a public beta yet. Therefore, this remains a “to be continued”!

Summary

In this first article, I’ve given you an overview of Windows 8, explaining you how Windows 8 contains 2 modes and shown you what exactly Metro applications are. This is just the tip of the iceberg (in fact, I think it’s even less!).

In the following article, we’ll start our exploration of the Windows Runtime so stay tuned!

Amazon Kindle Fire: Return to sender

Tue, 03 Jan 2012 18:10:39 GMT

I wanted to believe, I really did. It has been over a month since my first impressions of the Amazon Kindle Fire. Over the holidays, I processed a return for my Kindle Fire. When the Fire was announced I was intrigued and excited as I thought that Amazon had the real potential to make a great product and the customer base to capitalize on that potential. For me, it just didn’t live up to the hype. I’ll stress that last sentence…this is my opinion based on my experiences/desires. As with anything in life, your mileage may vary.

So what went wrong?

I used the Fire a lot. I watched videos on it daily (my evening ritual of getting caught up on TV) via Netflix and Hulu apps. I rented about 10 movies via Amazon on the device. For video, it was great. For everything else, it was pretty much frustrating for me. I’ve been able to isolate it to a few areas: apps, user experience, prejudice.

Apps

I downloaded the free daily app from the Amazon Android store daily…and ended up with a device full of sub-standard products mostly. The Hulu app really was the only 3rd party one that I felt was designed for the Fire and did most things well. Even then it had quirks, but mostly it was fine. Netflix’s app is horrible, lagging, confusing and not enjoyable to use before you get to the playing content. Most other apps just weren’t doing anything for me.

The lack of a Mail solution *provided by the device* for my mail configuration led to a decreased usage in the device to me. The responsiveness in the games that I acquired was just not there as well. Overall I felt the only “app” I was using was video playback. Everything else wasn’t cutting it…even the Kindle reading app was just too bright for me for long periods of reading.

User Experience

Large area of failure here for me. Here’s my list of areas that lacked polish and just failed:

Hardware home button – I’m realizing how important this really is. My kids couldn’t figure out how to get back to the ‘start’ screen. On the iPad, they know immediately.
Software ‘home bar’ (not sure what to call it) sometimes appeared, sometimes didn’t.
Touch responsiveness – I felt like I had to do gestures multiple times to get it to respond. The first update was said to fix some of this, but it didn’t do anything noticeable for my use.
Touch feedback – I know this seems odd, but there were times I couldn’t tell if I had actually completed a touch interaction…visual state changes didn’t happen, etc.
Orientation changing – general inconsistency here in what was supported or not within the own set of experiences delivered by the Fire. But the transition from one orientation to another was jarring, like a snap rather than a smooth transition.
Apps experience – no consistency. I’m not looking for lets-make-every-app-the-same consistency, but as a user there was know real reliability in controls usage, visuals, responsiveness, action expectations, etc. This is the good/bad of the Android platform – ultimate freedom but at the price of confusion and quality sometimes.
Application lifetime – the management of the state of an application was horrible for an end-user. The parts of Android really showed through here. I would occasionally get “not responding” windows in an application or when trying to start one. These types of things do not pass the mother-in-law sniff test for me.

These were some of the things that continually frustrated me. There were other nits, but not always in my face.

Prejudice

Aside from any technical reasons the biggest factor for my return is prejudice. Don’t get me wrong, I love Amazon. I’m a Prime member, and only get my purchased digital media from them (i.e., video rentals and MP3). They have great service offerings and catalog of goods. These are all the reasons I thought they could execute well out-of-the-gate with the Fire.

However, I also have an iPad.

Make no mistake about it: if you use an iPad for the same amount of time you use a Kindle Fire, you will likely share the same experience that the iPad just is an all-around better product currently. Now the media (and users like myself) are the ones drawing the comparisons of the Fire to an iPad. Amazon itself hasn’t done any comparisons side-by-side or even remotely close. They have never marketed (to my knowledge) the Fire as an iPad competitor. But that doesn’t matter…because consumers rule the world and we have already drawn that conclusion. Bottom line is that if you are making a touch device I can travel with that has media and a store where I can get application and content – you’re competing with the iPad.

Since I already am an iPad user I could not erase the experience that I have with my iPad when using the Fire. All my user experience annoyances around touch are because it is just better on the iPad. If I didn’t have an iPad, maybe my perception would be hugely different. But since I have one, my prejudice is set and the comparison bar as well.

Holiday gift taste test

When I arrived to the in-laws for the holidays they mentioned they were getting my wife’s ~80yr old (*very* active) grandmother a Kindle Fire because that is what she wanted. I shirked a bit (and probably commented too much) at the idea and told them I didn’t think this was a good idea. GG (as we call her since she has 12 great-grandchildren) is not technically savvy and has never had anything remotely considered “new tech” in her life. I knew that it would fall on me to be the resident Nick Burns and trainer for the holiday week. And the time did come where I had to do that. It went something like this *before* we started configuring her Fire…

Me: GG, why do you want a Fire?
GG: I want to get ‘with the times’ and this seems to be a hot item.
Me: Do you have an Amazon account or have ever bought anything on Amazon?
GG: No, never. Can’t I put books on it?
Me: Yes, but where do you plan on getting those books?
GG: Can’t I get them anywhere?
Me: No, you’ll be buying them through Amazon.

NOTE: I didn’t want to explain that technically you could put other publications on there as I knew that would be an action never accomplished.

GG: You mean I can’t get something from Barnes and Noble and put it on my Fire?
Me: No. But why would you, Amazon has a massive content library.
GG: Well, that seems monopolistic. What about movies?
Me: Yep, you can get movies, but through Amazon.
Me: Most of the time anything you put on there you will be buying from Amazon

This point seemed to have been lost on GG when desiring this device. Regardless we proceeded with the setup. Now since the device was purchased from the mother-in-law, when powered on it was attached to her account and we had to set up a new account for GG. This was going to be fun, I thought.

The first step was to create an Amazon account since she didn’t have one. The first screen on the Fire to do this asks for 4 simple bits of information: email, username, password, password confirmation. This was the first introduction GG had to a software keyboard and it did not go well. The first mistake made was to “press” the keyboard and I had to educate that click, press, push are no longer useful but rather tap, swipe, tap+hold are the new ways she needed to think. This took some training as she continually hit wrong keys, held the key too long which produced duplicates, etc. I am not sure if it was her bifocals or what but GG was continually ‘off by 1’ on the keyboard and we had many times to The password field was the hardest because it obfuscated the letter after typing it, providing minimal visual time to see if what was typed was correct. Now I timed this exercise myself so I could see how long this really took. With no exaggeration the time to complete this screen was about 30 minutes. The password/re-enter password took up most of that time. The next screen was address information…to which I offered to enter this data for her :-). After that was credit card data.

GG: Why do they need my credit card?
Me: How do you plan on buying anything, money order?

In seriousness, this pointed to a generational gap of this concept of stored account information for one-click purchasing that is available on things like Amazon, Apple, anywhere.

We moved on to a review of the Fire and notable me mentioning that the user guide itself was a Kindle book. This did not please GG as she was used to a manual. Since she is a Scrabble lover and other folks in the house were playing Words with Friends, we downloaded that app, set her up an account, and taught her how to play that. Again, the touch interaction here was painful to watch.

My bottom line for sharing this anecdote is that I don’t think the Fire is an every-generation device. Contrast that to the iPad, where I think she would have had a much better on-boarding experience. I left GG alone for the day with her device and the next day she shared her frustration that things didn’t seem to work and it was hard to use the touch keyboard and understand what to do. Now I can easily (and will) chalk this up to a generational thing and a first-time ‘device’ user in GG. However, it pointed to a fact to me that the Fire is only for a class of folks who are familiar with computers in a more-than-one-time-usage manner.

Summary

I will stress that again, for me, the Kindle Fire was a bust. I still faithfully have my own Kindle reader which I will still hail as the ultimate in reading devices (and think that is what GG should exchange her Fire for). The Fire, in current form, however is a bust in my opinion. I think Amazon *can* get this right if they put some muscle behind it and tighten up the Android edges that show and concentrate a little more on experience refinement. I absolutely loved the size of the device (hoping Apple takes note) and think that in a few versions they might get it right.

But for now, the Kindle Fire has been returned…and with a great customer service policy, my money fully refunded, satisfaction guaranteed.

tags: kindle, kindle fire, fire, amazon, ipad, ipod, apple

This work is licensed under a Creative Commons Attribution By license.

Vibrating the phone

Tue, 03 Jan 2012 17:31:15 +0000

Moving UIElements around in Metro

Tue, 03 Jan 2012 00:36:35 GMT

I'm playing with some code for the First Apps Contest, and since I had to dig some of this out, I thought maybe others might be interested. Was just thinking that ratting through documentation and trying to make stuff work is very reminiscent of WPF/E back in... holy crap... December 2006... doesn't seem like 5 years ago!

Where to start

I figured the easiest thing to do would be to put a circle on the screen and move it around. This has *got* to be easier than drag/drop, right?

Well yes it is, but as with most things you gotta figure out where to poke it to make it work, and of course I got involved in other stuff so I made it a bit tougher than I needed. I called this "Application3", and it's like the last one except I'm not doing a snap pane on this one.

Read on...

New MVVM Light templates with bug fixes

Mon, 02 Jan 2012 20:13:28 GMT

The current version of MVVM Light had a couple of issues in the project templates. The most annoying one was causing a problem when creating new projects: The GUIDs used to uniquely identify the project were in fact not re-generated properly every time, and we ended up with the same GUID in every new project. The symptoms are the following: If you side-load an MVVM Light application, and then side-load another one, you will see that the first one is overwritten. Note however that this is only an issue when side-loading applications: The GUIDs are properly re-generated and overwritten by Microsoft during the app approval process.

This was not really an issue with WPF and Silverlight applications (which is why the bug was never found until now), however the Windows Phone uses these GUIDs to check if the application is already installed on the Windows Phone device or not.

I also took this occasion to update the templates with some information in the AssemblyInfo.cs, so that should make it even easier to fill the assembly information.

I just published a new MSI that corrects the issue. You can install the new MSI on top of the existing one. As usual, there is an MSI for MVVM Light V3 and one for MVVM Light V4 beta.

Fixing the issue in existing applications

If you encounter this issue in existing application, you can use the following steps to correct it. Note that I recommend you to follow these steps for every MVVM Light application.

Start the GUID generator installed with Visual Studio (open the Start menu and type GUID to find it).
In the GUID generator, select the Registry Format.
Press the New GUID button and then the Copy button.

Open the CSPROJ file in Notepad (or any text editor).
Locate the <ProjectGuid> attribute.
Select its content and paste the GUID you previously copied.

For Windows Phone projects only, in addition:

In the GUID generator, press the New GUID button and then the Copy button.
Open the file WMAppManifest.xml (in the Properties folder).
Find the ProductID attribute and replace its content with the GUID you previously copied.

Projects exposed to COM

Some project also have a GUID in the AssemblyInfo.cs. Open this file in Visual Studio or in Notepad and check if you can see a GUID there. If there is one, copy a new GUID from the GUID generator and replace the old one with the one you just copied. Be careful to remove the opening ‘{‘ and closing ‘}’.

That’s it

Apologies for this bug, and thanks to everyone who reported it and helped make MVVM Light better.

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Binding Formatting

Thu, 29 Dec 2011 17:48:15 +0000

One Month in... and things change...

Tue, 27 Dec 2011 20:16:42 GMT

One month in...

Well, it's been a month on the new site now.

I guess at first I thought everyone would just start following the new feed and the traffic would magically appear at WDN, but I still saw a lot of folks hitting GWB, presumably looking for good Silverlight links.

So I announced my postings at GWB to not leave anyone out of the loop.

And now I find that's annoyed some people... sorry about that!

I can't see cross-posting the posts completely, so you'll just have to go to the new site to see them I guess.

SilverlightCream.com is still up and still growing with every post. The aggregation there can be searched as always and if you have a driving desire to submit there vs submitting to WindowsDevNews, I'm still getting those emails.

When I blog, I am posting links to @SilverlightNews in addition to @WindowsDevNews, at least for now.

I am also still blogging all the links I was blogging before, the difference is now I'm also blogging other stuff as well.

The only real thing *YOU* need to change is the Feed location.

I'm not giving up this blog, I will announce new things as I go, and the history is here to be viewed.

As everyone is aware, some things have changed, and that causes other changes.

Stay in the 'Light!

Windows Dev News for December 26, 2011 - 2 - #0017

Tue, 27 Dec 2011 03:28:54 GMT

My latest post is up... check it out at WindowsDevNews

Windows Dev News for December 26, 2011 - #0016

Mon, 26 Dec 2011 17:15:02 GMT

My latest post is up... check it out at WindowsDevNews

Windows Dev News for December 24, 2011 - #0015

Sat, 24 Dec 2011 21:23:51 GMT

My latest post is up... check it out at WindowsDevNews

SilverlightShow Top 5 for December 12 - 18, 2011

Fri, 23 Dec 2011 05:09:29 GMT

Check out the Top Five most popular news at SilverlightShow for December 12 - 18 , 2011

Knockout 2.0.0 is Available

Thu, 22 Dec 2011 14:38:36 GMT

Knockout 2.0.0 was released last night to the web! You might have been tinkering with the 1.3.0 RC recently, but it has been renamed to 2.0.0. Steve lists a few reasons why he went this route and I fully support the decision to jump to a new major version number. If you look inside to see what he added and changed for KO v2.0.0 you will see a pretty dramatic and powerful set of improvements.

I have to thank Steve for creating and keeping up with the community requests for KO. He has been especially helpful to me in creating my upcoming series in MSDN Magazine on Knockout and my Pluralsight course, both of which should be out starting in February and are updated for KO 2, so please keep an eye out for them!

First let’s cover the important links, then let’s hit some of the best new features.

Links that have been fully updated for Knockout 2.0.0 are the builds on GitHub, the tutorials , and the documentation and live examples . And of course, Steve’s post that summarizes everything you need to know. Many community folks contributed to this release and some even wrote documentation.

Here are my top 5 features in KO 2:

(I linked to Steve’s JSFiddle examples for many of these. Just click on the keywords below to see examples.)

1. Control of flow bindings

This is where you can use built in bindings for if, ifnot, foreach, and with inside of elements or even containerless tags … more on that in a moment. (I linked directly to Steve’s examples on JSFiddle). Excellent new feature that I use every day.

<ul data-bind="foreach: products">
    <li>
        <strong data-bind="text: name"></strong>
        <em data-bind="if: manufacturer">
            &mdash; made by <span data-bind="text: manufacturer.company"></span>
        </em>
    </li>
</ul>

2. Containerless control of flow

Another killer feature. Sometimes you may need to control the flow of your bindings or templates. Knockout 2.0.0 adds the ability to use HTML comments to wrap control of flow bindings. I really love this feature as it helps me clean up my HTML and avoid having an element for no reason other than control of flow (which I had to do occasionally with KO 1.2)

<!-- ko foreach: customers -->
   <div data-bind="text: companyName"></div>
<!-- /ko -->

3. Parent binding contexts

Can anyone say ancestor relative source bindings? Yeah, you XAML folks know what I mean. KO 2v2 makes it easy to navigate from inside of a template where the data context is one thing, and reference a data context higher up in the hierarchy. This is really important when you are inside of a template and you need to reference a different data context (like for a combobox). You can reference the root context ($root), get an array of parent contexts ($parents), get the immediately preceding parent context ($parent) too. This is one of those features that you don’t think about often, but when you need it … you REALLY need it. Otherwise, you write some funky workaround code.

4. Event handlers now receive the model as the first Parameter

This is pretty self explanatory … now when you bind to an event handler Knockout will automatically pass the model for the current data context to the handler. This makes it much simpler to write handlers that must operate on the current context (like remove, check selected, etc.) What’s even better here is that you don’t have to tell it to pass the context … it just does it under the covers and it keeps your HTML clean.

<button data-bind="click: $parent.removeProduct">Delete</button>

Breaking Change: Note that in previous version the event handler received the DOM event object as the first parameter. In KO v2, the event handler receives the model as the first parameter, and the DOM event object as the second parameter. You will need to change any KO code that uses the DOM event object to account for it as the second parameter.

// KO v1.2
myViewModel.myEventHandler = function(evt)

// KO v2
myViewModel.myEventHandler = function(data, evt)

5. jQuery style event handlers

Some folks don’t like putting the click handlers in their HTML bindings. So another new feature is to use jQuery style handlers for events handlers. This is straightforward to set up, but the added value here is from the ko.dataFor and ko.contextFor helper functions. Simply put, instead of passing the model into the handler, the handler itself can refer back to the context for the operation, or the data for (the model) the operation.

$(".prods").on("click", ".del", function() {
    viewModel.removeProduct(ko.dataFor(this));
});

6. Native Templates

OK, so this is really my top 6 favorite new features in Knockout, but it’s a really good one. Knockout 2.0.0 adds support for native templates. What’s that? It means that you no longer have to take a dependency on jQuery templates nor any other external JavaScript templating library. You can check out the examples here for native templates, I highly recommend it!

If you want to continue using jQuery templates, you can do so. However KO 2 drops support for some of the older versions of jQuery templates. I won’t bore you with the details of how, because frankly, if you are using KO I think recommend moving to native templates and jQuery templates is no longer being actively developed.

What Else?

One other change that I almost missed my first time through it all is that there is a new function ko.computed. Actually, this is not a new function, it’s a new name for dependentObservable. Both names refer to the same function internally in KO, but the “new” way is to call them using ko.computed.

Windows Dev News for December 21, 2011 - #0014

Thu, 22 Dec 2011 05:22:15 GMT

My latest post is up... check it out at WindowsDevNews

DecryptR Part 2

Wed, 21 Dec 2011 15:37:03 +0000

Updates to the Windows Phone docs

Tue, 20 Dec 2011 18:10:47 GMT

We recently made a refresh of the Windows Phone documentation and samples. We've updated several samples:

Background Agent
Background Transfer Service
Quick Card
Search Extensibility

We also added the following new sample that shows how to use types in the NetworkInformation namespace to get the network status of the device, mobile network and other information.

Network and Device Information

To get the latest samples go to the Code Samples page on MSDN.

In addition, we made fixes to several docs, some based on your feedback on UserVoice. For example, we added links to the camera sample from the camera docs. Please keep your feedback coming and we'll keep updating and making changes!

Book Review: Windows Phone 7 Silverlight Cookbook

editorial@silverlightshow.net (Matt Lacey ) — Tue, 20 Dec 2011 12:15:00 GMT

This review is for the book 'Windows Phone 7 Silverlight Cookbook', and has been submitted by a member of the Windows Phone 7 User Group - a user group supported by SilverlightShow.

We support user groups with books, swag, events promotion, free event passes and others. Contact us to get support for your user group.

Interested in this book? Get it for free by tweeting our next webinar Leveraging Windows Azure for the Windows Phone Developer using tag #webinarsilverlightshow. Three of you will get a free ebook copy provided by Packt Publishing. Tweet this webinar now!

This book is another in the ever growing number offering an introduction to Windows Phone development. This one takes a slightly different approach to others I’ve read by opting for a “cookbook” style where it aims to provide a collection of “recipes” which the reader can apply to their apps.

The book starts out well by encouraging developers to work with Expression Blend (which is something most developers would benefit from) and begins with helping the reader understand the available controls before showing how to create simple animations and behaviours.

Unfortunately that’s where things start to go downhill as it follows the traditional pattern of introducing a selection of features and functionality and then providing an example of how to use it.

The authors assume a level of experience in the reader but unfortunately don’t make it clear what this is. The preface states that the book is aimed at both the hobbyist and the professional developer. As the latter I don’t feel it gave me enough information on the idiosyncrasies of applying the techniques, the book describes, to my work. I also fear that for the former they don’t go far enough to help the beginner understand when each feature should be used or when and what alternatives may be appropriate.

With 2 authors and 3 technical reviewers I was also disappointed to see a number of errors in the content. This included author notes which haven’t been completed (“Insert references to...”) as well as information which is factually incorrect. (“The emulator doesn’t support multi-touch.” – It does, you can just only use it if the machine running the emulator supports it,)

The biggest disappointment I had with this book though was due to the comparison it draws with a cook book. When I look at a traditional cook book (one for preparing and cooking food) what attracts me is the dishes I can create from following the instructions therein. There are no recipes of that sort in this book. It’s more a collection of techniques. It’s also the pictures which particularly tempt me in a food based cookbook. Unfortunately the screenshots of the apps that are in the book aren’t particularly appealing and ignore lots of the simplest design guidelines and best practices.

The book’s subtitles claim it includes "Quick answers to common problems" and "All the recipes you need to start creating apps and making money".
I think it fails in both respects.
There are lots of common problems which the book completely ignores. Presumably because these aren’t easy to demonstrate or tied to a specific control or feature.

While the book does provide some help with creating apps, it doesn’t help the inexperienced or uneducated developer create apps which are better than what’s already available, or even identify what a higher quality app would look like. It also doesn’t mention anything which would help developers make money from their apps. There are already too many people creating apps who simply assume that if they build it sales (and money) will come. Except for a very small few this is simply not the case. I would expect a responsibly authored book providing guidance in this area to do a better job of explaining what someone entering the marketplace might expect and how to give themselves the best possible odds of creating something that will meet the needs of the user and the aims of the creator.

If you're new to developing for Windows Phone 7 then there are definitely lots of things that you can learn from this book. If you have some experience then it may provide a few introductory pointers to a more design focused approached to your app creation. Beyond that, however, there are many other books which will better help developers understand what can be done on Windows Phone and also how to do it.

Disclaimer. I was given a free PDF copy of this book for review purposes.

Windows Dev News for December 19, 2011 - #0013

Tue, 20 Dec 2011 04:29:58 GMT

My latest post is up... check it out at WindowsDevNews

Silverlight Show: 10 Laps around Silverlight 5 (Part 10 of 10)

Mon, 19 Dec 2011 19:26:00 GMT

In this article, a discussion about several new features that did not fit in any of the above categories. We will discuss In-Browser HTML, PostScript and Tasks for TPL. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

Included, the Roadmap for the series below as you may want to visit other sections as you learn Silverlight 5. I picked the following features as I thought that you may find them useful in your day-to-day work. If you want a specific topic covered then please leave it in the comments below.

In-Browser HTML

In Silverlight 4, we could use the WebBrowser control only in an “Out-of-Browser” application. This has changed in Silverlight 5 as we can now use the WebBrowser control in the browser (IE). It will however require that you make a few changes to your system. Let’s get started:

1) Update the registry – Locate the following keys:

If you running on a 32 bit machine,

HKEY_LOCAL_MACHINE\Software\Microsoft\Silverlight\

and if you are running on a 64-bit machine,

HKEY_LOCAL_MACHINE\Software\Wow6432Node\Microsoft\Silverlight\

change the UpdateConsentMode from a 0 to 1.

2) Sign the XAP File - Right click on the Silverlight application and go to properties. Choose Signing and check the checkbox Sign the .XAP file. Now click on the button Create Test Certificate. Enter any password that you want and hit the OK button. Now click on the More Details button.

Click on the Install Certificate button. Clicking on the button brings up the Certificate Import wizard. Click on the Next button and choose Place all certificates in the following store. Click on the Browse button. This will show you a Certificate Store. Choose Trusted Publisher and finish the wizard. Now repeat the same step to install this certificate in Trusted Root Certification Authorities.

3) Enable Out-of-Browser and Require elevated trust when running in-browser. Right click on the Silverlight application and go to properties. Place a checkmark in Enable Out-of-Browser and Require elevated trust when running in-browser.

Now let’s switch over to the MainPage.xaml and replace the Grid with the following code:

Muted audio even when the playback rate is set to a supported audio playback rate

Mon, 19 Dec 2011 18:28:00 GMT

Silverlight 5 supports multiple playback rates. When the playback rate is set to a rate that does not support audio playback, audio will be muted. If playback is reset back to 1 or to any value that supports audio playback after multiple rates that don’t support audio/pitch correction playback, the audio could still be muted.

To work around this issue, you can reset the volume when the playback rate is changed. The following code demonstrates one way to reset the volume.

void ME_RateChanged(object sender, RateChangedRoutedEventArgs e)

{

// For playback rates that support audio playback, Enforce audio playback by resetting the MediaElement Volume property

//to unmute audio after multiple playbackRate changes.

if (e.NewRate <= 2 && e.NewRate >= 0.5)

{

ME.Volume = ME.Volume;

}

-Nitya.

Merry Christmas! It’s my off-site backup.

Mon, 19 Dec 2011 08:26:29 GMT

Almost 4 years ago, I moved my family from Cincinnati, Ohio to Redmond, Washington so that I could join Microsoft. Since we have two young children, and a small family, the move has been really hard on the grandparents. But as our first Christmas out here approached, I came up with an idea that I’ve been repeating each year since. Last night, I tweeted about this idea and the tweet went a bit viral, with hundreds of retweets (thanks largely to Scott Hanselman, I’m sure).

Every year I give the grandparents DVDs with all of our digital pictures from the year. To them it's a gift. To me it's off-site backup.
— Jeff Handley (@JeffHandley) December 18, 2011

Like many families, we take thousands of digital photos and we store them on an HP MediaSmart HomeServer. Every year for the last 4 years, I sit down the weekend before Christmas, copy all of the year’s pictures from the HomeServer to my PC, organize them into folders of 4GB, burn them to DVD, and then send them to the grandparents as my Christmas gift to them. What they don’t know (until now anyway), is that the gesture isn’t completely selfless. As succinctly expressed in my tweet, those disks are my off-site backup of our family photos. And we’re talking 2300 miles off-site, so I consider myself pretty well covered.

Here are a few details for my process, in case you decide to pick up this routine too:

Organize the photos into folders with the year, subfolders with the year-month, then subfolders again with year-month-day, and file names that have date-time stamps. (I store these on our HomeServer).
When copying the folders in preparation for the year’s disks, always include December from the previous year, so that photos from the previous Christmas are included in the set.
Split the photos into groups of ~4GB, and burn the groups to disks. This year I had 7 DVDs.
Deliver the disks to the grandparents, and ideally copy the photos to their PC and add them to the screensaver.

My wife and I have agreed many times that in the case of a disaster, our family photos are what we’d miss the most. Having all of our photos archived at the grandparents’ offers us a bit of reassurance that we’ll never lose them. And you cannot imagine how much joy the grandparents get when they watch the photo slideshow. We’ve spent several hours sitting together watching the screensaver.

In the days of Angry Birds, this is what I call killing two stones with one bird. Merry Christmas!

Technorati Tags: HomeServer,Family Photos,Backup

SkyDrive usage through Live SDK on Windows Phone

editorial@silverlightshow.net (Samidip Basu ) — Mon, 19 Dec 2011 07:34:25 GMT

This article is also available in print (Word, PDF) and e-reader formats (MOBI, EPUB).

Download all formats, including source code for $0.99.

Guess how many people use Live Services? 500 million plus! And when our applications connect to the same services, they start feeling right at home with what our users are already used to. Microsoft recently opened the Live Connect APIs, along with some SDKs for 3rd party applications on desktop/web/mobile platforms to leverage the cloud offerings from Live Services.

Don't miss...

In this short article, we take a look at how we could get started using the Live Connect API from our Windows Phone applications and interact with SkyDrive storage through the new Live SDK.

Download Source Code

[Please note that unlike other Demo solutions, you simply cannot hit F5 to run it. For obvious reasons, I have had to strip out references to my personal SkyDrive; so you would have to get yourself a client ID & make a one-word change before running the solution. Steps explained below.]

Introduction

The new Live APIs expose information around the following .. more information @ Live Connect Developer Guide:

SkyDrive -- This is for working with files & media; we can read/write against the user's SkyDrive files/folders/albums. SkyDrive offers the perfect cloud storage for Windows Phone applications to push persistence to the user's SkyDrive or to act as back-up storage.
Hotmail -- These sets of APIs expose the users contacts & calendars for read/writes.
Messenger -- These APIs are for use in instant messaging. We can read user's current status & communicate with user's buddies.
Windows Live ID -- This acts as a sort of Access Control Service that we could use to authenticate users & access their Live profile information.

The Live Connect APIs use standard protocols such as HTTP, OAuth 2.0, JSON and XMPP to make it easy working with them across multiple platforms. To leverage the APIs, we primarily use Representational State Transfer (REST) requests which return information in JSON.

While any of the above classes of APIs may be useful from a Windows Phone application, in this article we shall focus on the SkyDrive APIs, which arguably would be the most commonly used. No longer would developers need to spin up storage in cloud to augment their solutions; we can simply leverage the user's SkyDrive which has the additional benefit of user's accessibility & familiarity.

Getting Started

So, let's start integrating the Live Connect SDK into our Windows Phone application:

While the standard technologies of HTTP/REST/JSon make it easy to work with in any platform, there is some additional help in the form of wrapper SDKs for Windows Phone & Windows 8. Let's grab the Windows Phone Live SDK first.
Next, to have Live Connect recognize requests from our Windows Phone App, we need an unique identifier, called the Client ID. So, let's head over to the Live Connect App Management site & create a new application to interact with Live Services.
The new application will be registered with a Client ID, along with a Client Secret & Redirect Domain (that you type in). The two latter ones are not strictly needed for Windows Phone integration. The end result should be something like this:

Live Connect is a combination of several services allowing access to different categories of information. These are organized into what's called Scopes, and explicit declaration & user permission is required for our App to access the categorized information; as a good practice, we should never ask for more than what our App actually needs. For more information, please see Scopes & Permissions.
Users need to signed in with their Live Credentials & provide consent to utilize their SkyDrive, before we can leverage Live Connect APIs to manipulate files/folders in SkyDrive. While there are several ways to achieve this, in the XAML/C# world of Windows Phone, the easiest is to utilize the built-in Sign-in control in the SDK. Before you use it, make sure to Add Reference to these two libraries:

Next,, if you're in the XAML Designer view & you don't see the Sign-in control in your Toolbox, here's how to add it. The obvious benefit of using the Sign-In control is that we do not need to write the low-level HTTP RESTful GET calls to authenticate & authorize our user; the log-on UI comes up automatically & the client classes hang on to the access tokens passed back from the sign-in control for utilization in future requests.

The Demo App

So, let's write a simple Windows Phone application that allows the user to sign in & see/insert files in one's SkyDrive storage. Here's some XAML on our MainPage.xaml to show the sign-in control. Watch the use of scopes to declare what we want access to:

   1: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">   2:      <StackPanel Orientation="Vertical" >   3:          <TextBlock Text="Please sign-in and allow access to your SkyDrive!" Margin="20" TextWrapping="Wrap" Width="450" FontSize="30"/>   4:          <live:SignInButton Name="btnSignin" ClientId="Your_Client_ID" Scopes="wl.signin wl.basic wl.skydrive wl.skydrive_update"    5:                         RedirectUri="Your_Redirect_URI" Branding="Windows" TextType="SignIn" SessionChanged="btnSignin_SessionChanged"    6:                         HorizontalAlignment="Center" VerticalAlignment="Top" />   7:          <TextBlock x:Name="txtLoginResult" HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="30" Style="{StaticResource PhoneTextAccentStyle}"/>   8:          <TextBlock x:Name="txtWelcome" HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="30" Style="{StaticResource PhoneTextAccentStyle}"/>   9:          <Button x:Name="btnShowContent" Content="Show File Content" Width="300" Margin="30" Visibility="Collapsed"  10:                  Click="btnShowContent_Click"/>  11:          <Button x:Name="btnAddFile" Content="Add File" Width="300" Margin="30, -20,30,30" Visibility="Collapsed"  12:                  Click="btnAddFile_Click"/>  13:      </StackPanel>  14:  </Grid>

The resultant UI before the user signs in as as follows. Also, on first usage of the sign-in button, the user will be prompted to sign-on to Windows Live and provide one-time OAuth access to our application, as demonstrated below:

And here's some C# code to handle sign-on attempts. We use the wl.signin to log the user in & wl.basic to greet the user after reading some basic identifying information:

   1: private void btnSignin_SessionChanged(object sender, LiveConnectSessionChangedEventArgs e)   2: {              3:     if (e.Status == LiveConnectSessionStatus.Connected)   4:     {   5:         client = new LiveConnectClient(e.Session);   6:         App.Current.LiveSession = e.Session;   7:         this.txtLoginResult.Text = "Signed in.";   8:         this.txtWelcome.Visibility = System.Windows.Visibility.Visible;   9:         this.btnShowContent.Visibility = System.Windows.Visibility.Visible;  10:         this.btnAddFile.Visibility = System.Windows.Visibility.Visible;  11:    12:         client.GetCompleted += new EventHandler<LiveOperationCompletedEventArgs>(OnGetCompleted);  13:         client.GetAsync("me", null);  14:     }  15:     else  16:     {  17:         this.txtLoginResult.Text = "Not signed in.";  18:         this.txtWelcome.Visibility = System.Windows.Visibility.Collapsed;  19:         client = null;  20:     }             21: }  22:    23: void OnGetCompleted(object sender, LiveOperationCompletedEventArgs e)  24: {  25:     if (e.Error == null)  26:     {  27:         if (e.Result.ContainsKey("first_name") &&  28:             e.Result.ContainsKey("last_name"))  29:         {  30:             if (e.Result["first_name"] != null &&  31:                 e.Result["last_name"] != null)  32:             {  33:                 this.txtWelcome.Text =  34:                     "Hello, " +  35:                     e.Result["first_name"].ToString() + " " +  36:                     e.Result["last_name"].ToString() + "!";  37:             }  38:         }  39:         else  40:         {  41:             txtWelcome.Text = "Hello, signed-in user!";  42:         }  43:     }  44:     else  45:     {  46:         txtWelcome.Text = "Error calling API: " +  47:             e.Error.ToString();  48:     }  49: }

Did you notice a couple of fun things? Once connected, we store the instance of the LiveConnectClient as a property on our App object; this allows for reuse throughout the application. Also, the RESTful Live APIs support several shortcuts that include “me” to indicate the current user. And here's the UI we are shooting for, after sign-on:

SkyDrive Files

Now that we have permission to user’s Live Services, let’s dig into SkyDrive. Most of us are used to storing documents & media on SkyDrive, and have the content show up in our Windows Phone, or folders kept in sync between multiple PCs/Macs through Live Mesh. With programmatic access to SkyDrive, we have access to a lot of operations, such as:

Create/Read/Update/Delete Folders
Do the same with Albums, a special folder to handle media efficiently
Traversing Directories
Upload/Download Files
Read/Update file/folder properties
Move/copy files/folders etc.

For much more information & details, please see SkyDrive Developer Center. For our Demo application, let us do the simple operations of reading files/folders from user’s SkyDrive root & adding files to it. Here’s how we fetch & list all content from the root directory on user’s SkyDrive:

   1: public class SkyDriveContent   2: {   3:  public string Name { get; set; }   4:  public string Description { get; set; }   5: }   6:     7: // Code in Phone Page.   8: List<SkyDriveContent> ContentList = new List<SkyDriveContent>();   9:    10: private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)  11: {  12:     LiveConnectClient client = new LiveConnectClient(App.Current.LiveSession);  13:     client.GetCompleted += new EventHandler<LiveOperationCompletedEventArgs>(clientDataFetch_GetCompleted);  14:     client.GetAsync("/me/skydrive/files");  15: }  16:    17: void clientDataFetch_GetCompleted(object sender, LiveOperationCompletedEventArgs e)  18: {  19:     if (e.Error == null)  20:     {  21:         List<object> data = (List<object>)e.Result["data"];  22:         foreach (IDictionary<string, object> content in data)  23:         {                     24:             SkyDriveContent skyContent = new SkyDriveContent();  25:             skyContent.Name = (string)content["name"];  26:             ContentList.Add(skyContent);                     27:         }  28:    29:         this.contentList.ItemsSource = ContentList;  30:     }  31: }

And, here’s the resulting UI that we bind the results to, simply showing the content names from SkyDrive root:

Did you notice how we used “me/skydrive/files” to fetch all content from user’s SkyDrive root? Every folder/album in SkyDrive has a unique ID, visible when we inspect the folder properties. From this point on, we can easily dive into any folder & traverse the user’s SkyDrive by making requests with Folder_ID/files or Album_ID/files. Having fun?

Now, how about putting files in user’s SkyDrive? Sure, we can .. here’s some simple UI & code to add a file to the root of the user’s SkyDrive directory:

   1: private void btnSave_Click(object sender, EventArgs e)   2: {   3:     string fileName = this.fileName.Text.Trim();   4:     byte[] byteArray = Encoding.Unicode.GetBytes(this.fileContent.Text.Trim());   5:     MemoryStream fileStream = new MemoryStream(byteArray);   6:        7:     LiveConnectClient uploadClient = new LiveConnectClient(App.Current.LiveSession);   8:     uploadClient.UploadCompleted += new EventHandler<LiveOperationCompletedEventArgs>(uploadClient_UploadCompleted);   9:     uploadClient.UploadAsync("me/skydrive", fileName, fileStream );  10: }  11:    12: void uploadClient_UploadCompleted(object sender, LiveOperationCompletedEventArgs e)  13: {  14:     if (e.Error == null)  15:     {  16:         Dispatcher.BeginInvoke(() =>  17:         {  18:             MessageBox.Show("Voila, Saved to the SkyDrive :)", "All Done!", MessageBoxButton.OK);                      19:         });  20:     }  21:    22:     this.NavigationService.GoBack();  23: }

So, what did we see? A simple upload location indicator of “me/skydrive” puts the file at the root directory. You can certainly put it in any folder of your choice, as long as you know the ID of the folder. For confirmation, surely authenticate yourself & check if the file addition did work on your SkyDrive. Did for our case :

Conclusion & Caveats

With great power, comes great responsibility! Let us not undermine the end-user’s faith in SkyDrive.
More specific details about SkyDrive File/Folder APIs can be found HERE.
Watch the BUILD session recording on Live Connect HERE.
SkyDrive is a fantastic reliable alternative to augment storage for our Windows Phone applications, and user’s immediately see the file/folders we add in their SkyDrive. More importantly, Office sync on Windows Phone, and the dedicated SkyDrive apps on Windows Phone, iPhone & iPad immediately make the files available to the user. The story gets even better with built-in support in Windows 8, but I digress
Needless to say, SkyDrive access requires network connectivity. So, this should not possibly be our primary means of storage on Windows Phones.

Summary

In this article, we talked about how to leverage the new Live Connect APIs, in particular, the Live SDK in our Windows Phone applications. We saw the usage of the Sign-in control to ask for user’s authentication & seeking permission to use specific resources through the Live API. SkyDrive access is now handy, with full support to traverse, read & manipulate content in user’s SkyDrive directories. So, what are you waiting for? Look up some documentation & enable SkyDrive access from your Windows Phone application, resulting in happy users & happier you!

I would appreciate any comments or concerns or how things could be done better. Thanks for reading & happy coding.

Cheers SilverlightShow!

About the Author

Samidip Basu (@samidip) is a technologist & gadget-lover working as a Manager & Solutions Lead for Sogeti USA out of the Columbus Unit. With a strong developer background in Microsoft technology stack, he now spends much of his time in spreading the word to discover the full potential of the Windows Phone platform & cloud-backed mobile solutions in general. He passionately runs the Central Ohio Windows Phone User Group (http://cowpug.org), labors in M3 Conf (http://m3conf.com/) organization and can be found with at-least a couple of hobbyist projects at any time. His spare times call for travel and culinary adventures with the wife. Find out more at http://samidipbasu.com.

Windows Dev News for December 18, 2011 - #0012

Mon, 19 Dec 2011 04:01:17 GMT

My latest post is up... check it out at WindowsDevNews

MVVM Light installers and Nuget (including Silverlight 5) #mvvmlight

Sun, 18 Dec 2011 21:10:12 GMT

I just pushed two big updates to MVVM Light setup components.

MSI installers with Silverlight 5 support

The MSI installers are available on Codeplex. The current version supports Silverlight 3, Silverlight 4, Silverlight 5 (new), WPF 3.5 SP1, WPF 4, Windows Phone 7.0 and Windows Phone 7.1. The installer for V3 is available, as well as the one for V4 beta.

NuGet support including Silverlight 5

I also pushed a new version of the NuGet packages which includes Silverlight 5. To install MVVM Light into an existing application with the help of the NuGet package manager in Visual Studio, check the instructions.

If you look for “mvvmlight” on NuGet, you will find four packages:

MVVM Light: The whole package, libraries + ViewModelLocator + MainViewModel. Installing this also modifies App.xaml to install the ViewModelLocator. This package is for V3 of MVVM Light!
MVVM Light libraries only: Installs only the DLLs and references them. This package is for V3 of MVVM Light!
MVVM Light [Preview]: This is the whole package too, but for V4 beta.
MVVM Light libraries only [Preview]: Just the DLLs, for V4 beta.

Update on V4’s availability

One of the most annoying issues in V3 is a memory leak that can appear in the Messenger component in certain circumstances. I will post details in due time, but there is indeed a risk that an instance is not garbage collected if it is registered with the Messenger with a non-static method, and if the developer omits to unregister the instance before deleting it.

Because of the promise of a “weak” registration, I really want to solve this issue. Currently, I am able to completely solve it in WPF, and to solve it in most cases in Silverlight (including Windows Phone). There is still one special case in Silverlight where a memory leak may remain, and I am currently working on handling this. I am not sure that there is a solution for this last scenario, but there are other alternatives that it is not a blocking issue anymore.

Once this fix is fully tested, I still have a few things I would like to add in V4. However I am also aware that we have been in beta (and alpha) for quite some time already, and it is very possible that I procrastinate some of these features into V5.

Happy coding!
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Don't forget about the databinding features of Silverlight 4 that you get with Mango!

Fri, 16 Dec 2011 23:55:00 GMT

If you are a Windows Phone developer, there are some properties offered on the Binding object in SIlverlight 4, which is supported by Mango. Thse properties were not offered in Silverlight 3/Windows Phone OS 7.0. The SL4 binding properties make setting up control bindings much easier and help you avoid using a value converter in many cases.

You can set a StringFormat value on the binding to format your string in many common formats such as currency, date, time, etc . For example, if you want the string to be formatted like currency, your binding would look like this:

Text="{Binding StringFormat=C}"

The docs for StringFormat could use some work (don't worry--I've filed a bug and they should get fixed for the next update), but meanwhile look at the following topics for more information about what your format strings should look like:

Standard Format Strings

Date Format Strings

You can also set the FallbackValue property that is used when the binding can't return a value. In other words, this value will display in the UI when the binding doesn't resolve.

Text="{Binding Name, FallbackValue=No Value}"

And finally set the TargetNullValue to display a value when the underlying source value is null or nothing.

Text="{Binding Name, TargetNullValue=n/a}"

All of these properties will show in Intellisense and speed development for you.

Enjoy!

--Cheryl

The problem of the Windows Phone 7 ApplicationBar and not (yet) updated Bindings

Fri, 16 Dec 2011 19:00:00 +0100

As a MVVM enthusiast I’m trying to use MVVM as much as possible, but not for things that are almost impossible to do with MVVM. But simple things, like a TextBox Text property is always bound to a ViewModel’s property. That’s something that works very well…until you start having ApplicationBar buttons and menu items.

A lot of people already know that the ApplicationBar is something special, it’s not just a control like other stuff in your application. When clicking a button on the ApplicationBar the Binding is not yet updated. This is basically because the focus which is on the TextBox for example won’t be changed when clicking ApplicationBar buttons. This is different compared to normal buttons that you put somewhere on your page.

The Solution?

I’ve read different solutions on the web. For example, force focus on a different control by calling the Focus method on a Control. While this is working, I found a technically nicer solution. By getting the Binding of the current focused control and updating that binding.

I wrote a small helper class that implements this Binding updating.

public static class ApplicationBarHelper{    public static void UpdateBindingOnFocussedControl()    {        object focusedElement = FocusManager.GetFocusedElement();        if (focusedElement != null && focusedElement is TextBox)        {            var binding = (focusedElement as TextBox).GetBindingExpression(TextBox.TextProperty);            if (binding != null)                binding.UpdateSource();        }    } }

The first thing you do in the Event handlers for the ApplicationBar Click events is call.

ApplicationBarHelper.UpdateBindingOnFocussedControl();

What about the BindableApplicationBar?

A lot of use MVVM enthusiasts are using the BindableApplicationBar that’s part of the Phone7.Fx library. Can we use this in combination with the BindableApplicationBar? Yes we can, actually the best way would be to have this integrated with the BindableApplicationBar itself. I have just downloaded the source and manipulated two methods in two classes.

public class BindableApplicationBarIconButton : FrameworkElement, IApplicationBarIconButton{    // Other code that hasn't been changed in this class.    void ApplicationBarIconButtonClick(object sender, EventArgs e)    {        ApplicationBarHelper.UpdateBindingOnFocussedControl();        if (Command != null && CommandParameter != null)            Command.Execute(CommandParameter);        else if (Command != null)            Command.Execute(CommandParameterValue);        if (Click != null)            Click(this, e);    }}public class BindableApplicationBarMenuItem : FrameworkElement, IApplicationBarMenuItem{    // Other code that hasn't been changed in this class.    private void ApplicationBarMenuItemClick(object sender, EventArgs e)    {        ApplicationBarHelper.UpdateBindingOnFocussedControl();        if (Command != null && CommandParameter != null)            Command.Execute(CommandParameter);        else if (Command != null)            Command.Execute(CommandParameterValue);        if (Click != null)            Click(this, e);    }}

Slides and Code from my VSLive Silverlight 5, REST, WCF Web API, MVC talk

Pete Brown — Thu, 15 Dec 2011 21:13:05 GMT

This talk was an adaptation of two chapters from Silverlight 5in Action. I started with a brief explanation of REST, and thenexplained the solution we were going to build during the session.The idea was to show how you can use REST in place of the heavierSoap approach in many cases, and make your services accessible tofar more clients.

I also showed how to share model objects between variousimplementations of .NET, using linked files and conditionalcompilation.

Without watching the session or reading the chapters, the sourceand slides are only somewhat useful as you miss the interim steps.So, if you happen to be at an event where I deliver this again(I've submitted it to several upcoming 2012 events), great. Ifnot…buymy Silverlight 5 book ;)

In addition to what's covered in my book, I also showed how to create a basic Razor Helper to loadSilverlight in the page. You can learn more at the linked blogpost.
The WCF Web API may be found at the WCF CodePlexSite.
You can learn (a lot) more about ASP.NET MVC at our ASP.NET CommunitySite.
Of course, you can get all the Silverlight 5 bits at our SilverlightCommunity Site.

Everything else is attached to this blog post. The zip file isaround 7mb.

Feel free to present this at your own internal or public events.I only ask that you not submit this as a session at VSLive, TechEd,DevConnections or other large events where I may be planning topresent. When in doubt, ask.

New Silverlight Show articles: Windows 8 XAML Metro Apps with OData

Thu, 15 Dec 2011 17:33:00 GMT

Silverlight Show has two new articles that provide some really interesting info about building Windows 8 XAML Metro Apps with OData written by Samidip Basu (@samidip).

WCF RIA Services V1.0 SP2 Released

Tue, 13 Dec 2011 07:04:51 GMT

On December 9, 2011, Silverlight 5 was released. As always, RIA Services is included in the Tools for Silverlight, and this new release included our V1.0 SP2 final build. We refer to this as our RTW build, meaning Released-To-Web. In addition to the Tools installer including WCF RIA Services V1.0 SP2, you can also find the standalone installer on Microsoft Download Center. The silverlight.net/getstarted/riaservices page was also updated to reflect the new release.

Aside from some bug fixes here and there, not much changed between SP2 RC and SP2 RTW. The primary focus as been ensuring really solid compatibility with both Silverlight 5 and Silverlight 4 with this release, and testing the bits on tons of configurations for both design-time and runtime. If you are upgrading from V1.0 SP1 to V1.0 SP2 though, here’s what you’ll find in this release:

Support for both Silverlight 4 and Silverlight 5 (SP1 had subtle issues that would cause bugs in SL5 apps)
DateTimeOffset support
Entity Framework Code-First development, using this NuGet package

There are some more details in my SP2 RC announcement.

Known issues include:

Entity Framework 4.1 is required, but version 4.2 isn’t supported yet
Requires Visual Studio 2010 or SP1. Visual Studio 11 isn’t supported yet
Work on supporting Universal Providers for improved Windows Azure deployment is ongoing
If you want to create a Silverlight 4 Business Application Template, first create an instance of the Silverlight 5 template, and then use the Silverlight project properties to retarget it to Silverlight 4. You might see some temporary errors (System.Windows.Markup.XamlParseException) in the designer and error window, but rebuilding will make those disappear.

I want to send a shout out to Yavor Georgiev and point you to his blog, as he has been driving this SP2 RTW release for the last couple of months. I’ve transitioned off of the WCF RIA Services team and over to ASP.NET Web Pages, NuGet, and Razor.

If you have any questions or issues with the SP2 release, jump over to the forums.

Technorati Tags: RIAServices,Silverlight

Portable tools rock–my current favorites and a great tool

Tue, 13 Dec 2011 05:51:33 GMT

Lately I’ve been doing a lot of re-paving of machines and I never had my favorite tools on them, nor did I want to spend the time to re-install a set of tools that I knew I would blow away each day anyway. Mostly my daily builds have been to do some scenario validation and is quite repetitive. However there are times where a stable build combination comes along that I keep for a while to work on customer apps or sample development. When these times happen I find myself needing my helpful little utilities more frequently.

Recently I’ve been trying to learn Git, a version control system that has been gaining popularity over the past few years and is quite cool and agile. I am generally a huge fan of GUI tools because I feel that they are more in line with how I use other parts of the operating system/tools. When exploring Git, however, I wasn’t a fan of having to re-install any of the tools over and over and do configuration, etc. That’s when I discovered portable Git. It immediately made me realize how dumb I’ve been all this time across machines and renewed my love for portable tools.

What is a portable tool?

Quite simply it is a tool, regardless of size, that can run with no other dependencies than those that it comes with in the directory or executable. No requirement of “oh you must have Foo framework 1.0.2.123 installed to use this” as the portable tools completely operate on their own. Now some are single, small executables. Others are full-blown programs that bring some serious runtime environments with them. But both don’t require anything to pre-exist and can run without installation.

I took one of my 8GB USB drives (Costco was having a sale – 3 8GB sticks for $24!!) and started loading up my favorites. Here’s what it ended up like:

Now I use other tools on a more stable basis and when Windows 8 goes into more stable releases, I’ll probably lock to on-the-metal installs for those. I also don’t require any huge amount of tools all the time, but like my favorites. So what are those directories?

DiffMerge – a great, simple-but-visual tool to help do file or directory diff checking and merging if desired. Some like WinDiff a lot, but I’ve been liking DiffMerge lately.
Git – as mentioned above, this is the portable Git tools which provides a bash or command prompt environment.
Inkscape – a vector-based graphics tool
Notepad2 – my absolute favorite simple text editor
Notepad++ (npp in the above image) – another great text editor. Why two you ask? The one thing I like about Notepad++ is that I can open up multiple files at a time and do find/replaces across multiple files. I don’t always do that, but it is a time saver when I need it.
Sublime Text – yet another text editor. When looking for cool portable tools I found this one. I’m not sure I’ll use it given Notepad2/++ but since it is in the picture, I thought I’d explain it. Some say it is the TextMate for Windows.
“portplat” – more on this in a bit.
_ninja – I wish I could tell…but, well can’t

This USB is now extremely helpful to me on a regular basis. After loading up a new machine I have instant access to tiny little things that just make me more familiar and immediately productive.

NOTE: There are a few more that I use more infrequently but I think I’ll add to my USB key like reflector-type tools.

In writing this post I wanted more…a lot more and started looking around. Then I found PortableApps.com! I felt like a complete idiot when I discovered this because I thought I was so cool to seek out portable tools and here was this site who already aggregated them for me and went above that and made it easy to acquire them!

What they do is provide a “Portable Apps Platform” that serves as basically a mini-launcher for a set of portable tools. In addition to my folders above, here’s what my USB key now allows me to have as well:

Now I should note that my existing tools (with the exception of diffmerge and git) are all available through this Portable Apps Platform tool setup. I was already set up in my ways so I figured no need to change what I already had. The Portable Apps Platform tool has a directory of a ton of apps:

Notice the scrollbar in that image above? There is lots of stuff here. Most I would never need, but nonetheless it is there…even portable games!

So now I have versions of some browsers on my USB and two of my other favorite tools I didn’t even know were portable: 7-zip and Console2. The great thing as well is that any configuration you make for these portable tools travel as well…so my customizations for my Console2 environment are on the USB drive and I don’t have to set up my fonts/colors each time!

Within each tool there are likely customizations that you may want. For example, I like having the “Open With…” settings on my context menu for Notepad2 and Notepad++ for convenience. On my USB key I keep a setup.bat file with any special configurations for each tool that I want (that may either not be kept in the portable environment or may be machine-specific like the context menu). I quickly run that and am ready to use my tools how I’m familiar with them.

Some tools also have config files built in to their environments, like Git. I was sick of continually typing git config –global user.name “Tim Heuer” and other config each time I set that up. Luckily a few questions on Twitter and Paul Betts was able to point me to the obvious. So now I have a customized .gitconfig file on my USB key and whenever I use the bash environment my settings are already there!

So what’s missing?

I’m feeing liberated with these tools lately that now I’m frustrated I can’t get everything in an install-free environment!

Please don’t rant about Mac, Linux, whatever OS environment lets me do that. I’m on Windows and it doesn’t for everything. Yes…the registry lives…I deal with it.

There are a few things I wish that were portable that would complete me.

Visual Studio – ah, someday maybe, someday.
Paint.NET – While Inkscape is awesome, it isn’t as familiar with me as Photoshop-esque tools. Paint.NET is the closest to that and would be awesome to always have around.
Fiddler – nuf said.
Silverlight Spy – extremely cool tool

It’s not a long list, but these are some regular tools that I wish were portable.

So there you have it. If you haven’t discovered a portable set of tools, you should get out a USB key and load some up. Who knows when you’ll find it handy!

tags: portable, notepad2, git, portableapps

This work is licensed under a Creative Commons Attribution By license.

Code signing for the independent developer

Tue, 13 Dec 2011 01:01:10 GMT

One of the features introduced with Silverlight 4 was the out-of-browser feature, enabling you to create an application that can be installed, run offline, automatically updated, etc. As a part of that feature, some of the major code signing certificate vendors (for Authenticode certs) provided our team with test certificates so that we could go through the same process as a developer would to acquire the cert and apply it to an app…and, of course, validate it works.

During that time some of those vendors had promotional codes for the first year for Silverlight developers, providing reduced-rate (but not reduced quality) code-signing certificates for their apps. Still during this time there were a lot that questioned why some providers were still expensive and didn’t value “the little guy.” By that I mean that there are a lot of smaller firms or independent personal developers. The thought of dropping a few hundred dollars on a cert is sometimes tough.

Last week a representative contacted me about their offerings as a premier partner of one of those providers. Certs4less.com is now offering Thawte code-signing certificates for individual developers. They are doing this at a price of $99 per year (less for multi-year).

NOTE: As a part of this, like before with SL4, Certs4Less graciously offered a promotional cert for me to validate the end-to-end process so that I could speak accurately about it. I do not use any of these certs provided by these companies for testing purpose toward any production application and they are for testing purposes only. Besides, I’ve not found the time to write production code for apps lately ;-). I am not getting paid for this post, nor am I getting another promo code for personal use myself. I am simply providing what I think is valuable information and get no compensation from Thawte or Certs4Less.

I went through the process of obtaining this cert from Certs4Less.com and it produced exactly what you’d expect, a valid Authenticode code-signing certificate I can use for my Silverlight and Windows 8 application packages! I shared a few points of feedback with the contact there and will enumerate them here for you as well (as well as some tips)

Your ‘Common Name’

Think about this one pretty good when you buy a cert. This has a two-fold purpose why I mention this. First, it is what your customers will see. Do you want them to see an app signed by a name that isn’t recognizable or doesn’t make sense…of course not. Additionally this is the name that will be verified. So if you claim you work for Fizbin Enterprises, but that doesn’t actually exist…you’ll have issues during verification.

One year, 2 or more

One thing you should know about code-signing certificates is that once they expire, the keys change during renewal. In some cases this can cause issues for your app (ClickOnce). For this reason I personally recommend getting the longest you can afford. Most likely this will be a wise investment and you’ll have piece of mind.

Apply on the computer you will receive it

One thing we as developers don’t do well is read directions. One of the instructions you’ll see is to be sure that you do the cert request process from the same machine you plan on picking up the cert from! Seriously, this is critical if you use the browser process because of the private key. If you don’t…you’ll be screwed and out some cash. Plan ahead and don’t do this while on vacation on your laptop that you repave weekly.

Verification Process

This is an area where I think I had the most negative feedback. These verification steps are a bit old. I understand they have their reasons, but in this digital age the fact that I had to find a notary was…well, just inconvenient. This Certs4Less/Thawte process required me to do this. The ‘form’ they emailed me really wasn’t a form…just an email with text broken out with ‘==========================’ before each section. So when I brought in my printed out GMail ‘form’ to the Notary he looked at me like I was an idiot. The verification form was nothing formal looking at all and I had to have 3 different people look at it before they finally just said ‘okay’ and signed it.

The thing that was most troublesome in this process was it was a distractor. I had to actually print stuff out, find a passport, go to a bank, wait in line…you know, real people stuff. But still, it felt annoying in this modern age.

Some of my other process with other vendors have been a lot more streamlined and I think this can/should improve.

Acquiring the certificate

Most of the time this is a quick process. Remember when I mentioned that developers don’t read instructions? Yeah, I’m no different. The final email I got indicating my cert had instructions that I didn’t read that talked about making sure I had intermediate certificates installed first. Without this I got ambiguous errors when trying to retrieve my certificate. Be sure to read any verification instructions in detail to provide a good experience.

Back up/export your certificate

I don’t know about you but I’d probably use my cert in automated build processes, keep it on a share (perhaps a dropbox/Live/git location) so that I don’t have to only use my one machine to sign an app. One thing I highly recommend is after the key is installed is to use the certmgr.msc tool and export the certificate. When doing this be sure to export the all the key data as well as cert chain so that your resulting PFX file is portable. Then you can use it in your build process for Silverlight as described here in my previous blog post about that feature.

Summary

I want to thank Certs4Less for reaching out to the independent developer and providing a valuable product at an ‘independent developer’ price level. I appreciate them also reaching out to allow me to test the process to verify it is fairly painless and the result is what I expected.

Code-signing certificates are very valuable in many ways and I believe every developer should have one for their personal projects as well as their large ones.

Hope this helps!

tags: xaml, silverlight, xap, ssl, thawte, certs4less

This work is licensed under a Creative Commons Attribution By license.

Silverlight 5 Released with awesome samples in the Silverlight Toolkit

Mon, 12 Dec 2011 23:27:00 GMT

Silverlight 5 is finally released! Congratulations to the team for getting through some of the toughest parts of finishing a product and validating with customers. It’s been a pretty crazy year for the Silverlight team and this is a really good release for the product bringing some solid features to the platform for folks to leverage in building their apps.

In addition to the platform having a release, I was really pleased to see an update to the Silverlight Toolkit, which has been one of the most popular things almost every Silverlight developer/application uses. If you didn’t know where to get things, here’s some links for you:

Silverlight 5 Tools for VS (requires SP1)
Silverlight 5 Toolkit
Developer runtime for Windows (32 bit, 64 bit) and Mac OSX

Rather than enumerate all the good features that were finished from the RC/Beta, you should head on over to listen/watch Pete Brown’s presentation on the Silverlight 5 release overview. He also has a post about the release enumerating in short form (with links to tutorials for some of the key features) on his blog.

What I think is really cool is also the amount of effort put into the Silverlight Toolkit for this release. The one large thing of note is the extensions to enhance your 3D development experience in Silverlight 5. David Catuhe has a post outlining in great detail some of the 3D extensions included in the toolkit. You should really go check out his post. Scrolling to the bottom I was really surprised/impressed to see a set of 3D samples included to help you understand how to use this feature:

Bloom – uses the Content Pipeline and post-processing effects
CustomModelEffect
Generated geometry – how 3D models generated by code
Particles – c’mon, who doesn’t like a particle generator!
Platformer - while not 3D it appears, it is a complete game with levels
3D Animation
Skinning – shows skinning a character using the content pipeline

I mean, wow, great stuff David!

I hope you all enjoy the release of Silverlight 5 and kudos to the team for getting it out the door. Go download the bits and start building awesome stuff.

tags: xaml, silverlight 5, silverlight, xna, 3d

This work is licensed under a Creative Commons Attribution By license.

10 Laps around Silverlight 5 (Part 10 of 10)

editorial@silverlightshow.net (Michael Crump ) — Mon, 12 Dec 2011 21:50:15 GMT

This article is sponsored by Telerik RadControls for Silverlight. Related content from the sponsor:

Check out what's new!

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

More resources...

1) Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.

This article is Part 10 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below.

To refresh your memory on what Silverlight is:

Microsoft Silverlight is an application framework for writing Rich Internet Applications.

The run-time environment is available as a plug-in for most web browsers and works on a variety of operating systems including Windows, Mac and Linux.

To recap what we learned in the previous section:

We took a look at several new controls in Silverlight 5 including: Double and Triple click support and ComboBox Type-Ahead.
We then took a deeper dive into the PivotViewer control as it is more complex than the others and provided additional links.

In this article, I am going to discuss several new features that did not fit in any of the above categories. We will discuss In-Browser HTML, PostScript and Tasks for TPL. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

I’ve included the Roadmap for the series below as you may want to visit other sections as you learn Silverlight 5. I picked the following features as I thought that you may find them useful in your day-to-day work. If you want a specific topic covered then please leave it in the comments below.

2) Binding- Ancestor Relative Source Binding and Implicit Data Templates.

3) Graphics –XNA 3D API and Improved Graphics Stack.

4) Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.

5) Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.

6) Operating System Integration - Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.

7) Operating System Integration - Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.

8) Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.

9) Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.

10) Other items [This post] - In-Browser HTML, PostScript and Tasks for TPL.

In-Browser HTML

1) Update the registry – Locate the following keys:

If you running on a 32 bit machine,

HKEY_LOCAL_MACHINE\Software\Microsoft\Silverlight\

and if you are running on a 64-bit machine,

HKEY_LOCAL_MACHINE\Software\Wow6432Node\Microsoft\Silverlight\

change the UpdateConsentMode from a 0 to 1.

Now let’s switch over to the MainPage.xaml and replace the Grid with the following code:

   1: <Grid x:Name="LayoutRoot" Background="White">   2:        <WebBrowser x:Name="webBrowser" Source="http://michaelcrump.net/"/>   3: </Grid>

If we run our application now (using Internet Explorer), then we will see the WebBrowser control working inside of the browser.

Note: This will not work in Chrome, Safari, others (Only Internet Explorer).

You can also add html pages to your project and point the source to that file as well.

PostScript Vector Printing

In Silverlight 4, we had bitmap-based printing. This meant that every time a page was going to print that Silverlight 4 sent the bitmap representing the entire page to the printer. We quickly found out that this resulted in horrible performance for larger print jobs. Now in Silverlight 5 we have PostScript Vector printing. This provides us with a much faster solution. Let’s get started building a sample application that uses this features.

Let’s switch over to the MainPage.xaml and replace the Grid with the following code:

   1: <StackPanel x:Name="LayoutRoot" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center">   2:     <Button x:Name="basicVector" Click="basicVector_Click" />   3:     <Button x:Name="forceVector" Click="forceVector_Click" />   4: </StackPanel>

We can navigate over to our MainPage.xaml.cs file and add in the following code snippet for our button event handlers:

   1: private void basicVector_Click(object sender, RoutedEventArgs e)   2: {   3:     PrintDocument document = new PrintDocument();   4:     5:     document.PrintPage += (s, ea) =>   6:     {   7:         StackPanel stPanel = new StackPanel();                   8:     9:         for (int i = 0; i < 10; i++)  10:         {  11:             TextBlock tb = new TextBlock();  12:             tb.Text = "Basic Vector mode.";  13:    14:             stPanel.Children.Add(tb);  15:         }  16:    17:         ea.PageVisual = stPanel;  18:         ea.HasMorePages = true;  19:     };  20:    21:     document.Print("Basic Vector Demo");  22:       23: }  24:    25: private void forceVector_Click(object sender, RoutedEventArgs e)  26: {  27:     PrintDocument document = new PrintDocument();  28:    29:     document.PrintPage += (s, ea) =>  30:     {  31:         StackPanel stPanel = new StackPanel();  32:    33:         for (int i = 0; i < 10; i++)  34:         {  35:             TextBlock tb = new TextBlock();  36:             tb.Text = "Forced Vector mode.";  37:    38:             stPanel.Children.Add(tb);  39:         }  40:    41:         ea.PageVisual = stPanel;  42:         ea.HasMorePages = true;  43:     };  44:    45:     PrinterFallbackSettings settings = new PrinterFallbackSettings();  46:     settings.ForceVector = true;  47:     settings.OpacityThreshold = 0.7;  48:    49:     document.Print("Forced Vector Print", settings);  50: }

In our first button, we have a basic PostScript Vector Printing job. We create a PrintDocument (which was also in SL4), then add a PrintPage with some basic text to it. We finally print the document using Vector printing with document.Print.

In our second button, we do the same thing but we call PrinterFallbackSettings and force the print job to print in Vector mode. We can also set the Opacity value by calling OpacityThreshold.

Tasks Parallel Library (TPL)

In short, TPL is to simply asynchronous methods. Silverlight 5 does not include the full TPL but it does provide Tasks and it’s related factories. Which is exactly what you want! Let’s get started.

We are going to use a sample XML file provided by Microsoft found here. Go ahead and download it and add it to your Web Project with the name of books.xml.

Next, Let’s go ahead and navigate over to our MainPage.xaml.cs file and add in the proper namespaces to use TPL. Next, we will add in the second code snippet:

   1: using System;   2: using System.Linq;   3: using System.Net;   4: using System.Threading.Tasks;   5: using System.Windows;   6: using System.Windows.Controls;   7: using System.Diagnostics;

   1: public MainPage()   2: {   3:     InitializeComponent();   4:     Loaded += new RoutedEventHandler(MainPage_Loaded);   5: }   6:     7: void MainPage_Loaded(object sender, RoutedEventArgs e)   8: {   9:     string uri = "http://localhost:15863/books.xml";  10:    11:     var request = HttpWebRequest.Create(uri);  12:    13:     Task.Factory.FromAsync<WebResponse>(  14:       request.BeginGetResponse, request.EndGetResponse, null)  15:       .ContinueWith(  16:         task =>  17:         {  18:             var response = (HttpWebResponse)task.Result;  19:             Debug.WriteLine("Content Type: " + response.ContentType);  20:             Debug.WriteLine("Content Length: " + response.ContentLength);  21:             Debug.WriteLine("Method: " + response.Method);  22:             Debug.WriteLine("Status Code: " + response.StatusCode);  23:             Debug.WriteLine("Status Description: " + response.StatusDescription);    24:         });  25: }

Note: You will need to change the localhost port in the above code sample before proceeding.

Go ahead and run the application and then look at your Output window in VS2010. You should see the following information.

The thing to note here is Task.Factory.FromAsync. This creates a Tasks that represents a pair of begin and end methods that conform to the Asynchronous Programming Model Pattern.

Conclusion

At this point, we have taken a dive into all of the new features of Silverlight 5. Now that you are equipped with a solid understanding of what Silverlight 5 has to offer, you can begin to use this in your own applications. I want to thank you for reading this series and if you ever have any questions feel free to contact me on the various sources listed below. I also wanted to thank SilverlightShow.Net and Telerik for giving me the opportunity to share this information with everyone. I hope that you enjoyed this series and if you To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

Silverlight Show: 10 Laps around Silverlight 5 (Part 9 of 10)

Mon, 12 Dec 2011 16:47:00 GMT

In this article, a discussion of several new features/controls such as Double and Triple click support, PivotViewer and ComboBox Type-Ahead. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

Introduction to SL5 – provides a brief history of Silverlight and relevant links.
Binding - Ancestor Relative Source Binding and Implicit Data Templates.
Graphics - XNA 3D API and Improved Graphics Stack.
Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.
Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.
Operating System Integration Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.
Operating System Integration Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.
Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.
Controls - [This Post] - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.
Other items - In-Browser HTML, PostScript and Tasks for TPL

Double and Triple Click Support

One of the new features in Silverlight 5 is the ability to use Double and Triple Click Support. This functionality will tell you how many times the user has clicked the mouse button. The property is called ClickCount and resides in the MouseButtonEventArgs class. Let’s take a look at how to use this new feature.

Fire up a new Silverlight 5 project and give it any name that you want.

Switch over to the MainPage.xaml.cs and add the following code: (Note: You may not need the MainPage() Method section)

   1: public MainPage()

   2: {

   3:     InitializeComponent();

   4: }

5:

   6: private void textBlock1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

   7: {

   8:     textBlock1.Text = e.ClickCount.ToString();

   9: }

Switch back over to the MainPage.xaml and add in the following code replacing the current Grid:

   1: <Grid x:Name="LayoutRoot" Background="White">

   2:       <Border BorderBrush="Black" BorderThickness="1" Margin="52,49,68,74" CornerRadius="10">

   3:           <TextBlock Height="152" HorizontalAlignment="Center" x:Name="textBlock1" Text="0" VerticalAlignment="Center" Width="244" MouseLeftButtonDown="textBlock1_MouseLeftButtonDown" Foreground="#FFFF2E2E" FontSize="96" TextAlignment="Center" />

   4:       </Border>

   5: </Grid>

If we go ahead and run the application then we will see the following application.

Go ahead and begin clicking inside of the border and you will see the number increase. If you wait a few seconds and click again then you will notice that it reset itself. You could easily add If..Then… statements to determine what click count number they are on. This may be helpful for a 35 click Easter egg. :)

MVVM Light for Silverlight 5 is on Codeplex #mvvmlight

Sat, 10 Dec 2011 19:29:43 GMT

Here we go! After the Microsoft team released version 5 of Silverlight yesterday, MVVM Light is available for this version of the framework too. I did not create the installer yet (that will take a few more days), but you can download the source code and build it yourself easily.

With this latest release, this puts the number of supported frameworks to 8: .NET 3.5 SP1, .NET 4, Silverlight 3, Silverlight 4, Silverlight 5, Windows Phone 7.0, Windows Phone 7.1 and Windows 8 (preview).

Dropping Silverlight 3 and WP7.0?

That said, I am considering dropping old frameworks now for new development. So here is a chance to make yourself heard, tell me if you think that it is OK to drop Silverlight 3 and/or Windows Phone 7.0 and to concentrate on the 6 other supported frameworks:

Thanks and happy coding!
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Silverlight 5 Released to Web

Sat, 10 Dec 2011 13:58:26 GMT

Silverlight 5 was released to the web yesterday, finalizing the feature list that many of us have been tinkering with in 2011. I’m excited that a product I had a very small part in shaping is now out. The team members are amazing and did a fantastic job amidst unusual circumstances over the past year, and I applaud them all. Fantastic job Silverlight crew!

The question many have already asked me is if they should install this release. If you are a Silverlight dev, then absolutely you should install this! There are a ton of great features in here and the backwards compat is solid., as usual

Download Silverlight

You can download Silverlight 5 from this page. Instructions are a bit unclear, but most developers should certainly should install the Silverlight5 Tools download which includes the Silverlight SDK, Silverlight tooling for Visual Studio 2010, and Silverlight Developer Runtime itself.

Other downloads I recommend

You most certainly will want to install the Expressions Blend 5 Preview, too, if you do any Blend work … which I highly recommend for Silverlight dev’s. You may also want to install the latest versions of RIA Services, the toolkit, and/or Mac runtime for Silverlight.

Summary of the features

(from the Silverlight 5 download package)

Improved media support

Low Latency Audio Playback
Variable Speed Playback
H/W Decode of H.264 media
DRM Key Rotation/LiveTV Playback
Application-Restricted Media

Improved Text support

Text Tracking & Leading
Linked Text Containers
OpenType and Pixel Snapped Text
Postscript vector printing
Performance improvements for Block Layout Engine.

Building next-generation business applications

PivotViewer
ClickCount
Listbox/ComboBox type-ahead text searching
Ancestor RelativeSource Binding
Implicit DataTemplates
DataContextChanged event
Added PropertyChanged to the UpdateSourceTrigger enum
Save File and Open File Dialog
Databinding Debugging
Custom Markup Extensions
Binding on Style Setters

Silverlight 5 performance improvements

Parser Performance Improvements
Network Latency Improvements
H/W accelerated rendering in IE9 windowless mode
Multicore JIT
64-bit browser support

Graphics improvements

Improved Graphics stack
3D

"Trusted Application" model

Multiple window support
Full-Trust in-browser
In-browser HTML support
Unrestricted File System Access
P/Invoke support

Tools improvements

Visual Studio Team Test support

Silverlight 5 Released

Sat, 10 Dec 2011 00:13:30 GMT

Silverlight 5 has been released today – you can find the official announcement over on the Silverlight site along with a link to the download and a list of the improvements in Silverlight 5 up on MSDN including features like; platform invocation integration...(read more)

Silverlight 5 has released! The docs are up and a .chm is available

Fri, 09 Dec 2011 20:51:00 GMT

Silverlight 5 has released! Here's the link to download the Silverlight 5 tools.

Silverlight 5 offers many new features including:

PivotViewer control
Trusted applications in-browser
3D graphics
Vector printing
Improved text rendering including the RichTextBlock control.
Hardware decode of H.264 media

For a detailed list of the new features see the Silverlight content on MSDN, specifically, the What's New for Silverlight 5 topic.

If you prefer your docs offline, here's the link to download the .chm containing Silverlight 5 docs.

Enjoy!

Cheryl

RIA Services SP2 RTW released

Fri, 09 Dec 2011 20:16:58 GMT

Please check out my blog post with release details.

Silverlight 5 is released!

Fri, 09 Dec 2011 19:59:03 GMT

Microsoft just released the version 5 of Silverlight! It’s a great news and I really want to congratulate the whole team on this impressive collective effort. The official announcement is on the Silverlight team blog!

The purpose of this article is not to be exhaustive about the list of features (there have been, and will be, many more very detailed articles such as this series on the Silverlight blog) but rather to explain why this version in particular makes me happy to be a Silverlight developer (features listed in no particular order!).

3D!

One thing is making me really happy and excited: the 3D integration. It is now possible to include and manipulate 3D models within a Silverlight application. This model is very similar to what XNA offers, which means that existing XNA developers will feel at home very fast with this new platform. It also means that existing 3D models can quite easily be run in Silverlight 3D. I am sure we all have in mind the pretty amazing demo with Scott Gu’s avatar during the Silverlight 5 firestarter (jump to 51:11).

I am really happy to have 3D integration in Silverlight now, because I have been working for the past few weeks on a new application for Kinect for Windows involving a 3D human avatar integrated in a Windows Presentation Foundation. The integration is completely seamless, and it looks like the avatar is completely part of the rest of the application. However, the rest of the application is WPF, with all the XAML, binding and MVVM goodness that it brings. This kind of seamless integration is now also possible in Silverlight, and that opens the door to a lot of pretty cool applications and a new kind of user experience.

In-browser trusted applications

We all know (or heard of) the Out-Of-Browser (OOB) application model which allows Silverlight to run outside of a web browser, just like a Windows application in its own windows, with its own shortcut, etc. There is also an elevated trust model for OOB, declared at build time, which allows such applications to perform tasks that are usually not allowed (such as saving or reading files from certain locations on the computer, run in full-screen with full keyboard support (ideal for kiosk applications!), host HTML pages within the Silverlight application, etc.

These features were already available in Silverlight 4, however in Silverlight 5 they are also possible inside the web browser. This makes the delivery of such applications a little easier, since the user does not have to “install” them and deal with a shorcut.

Trickplay

This feature allows to play video at various speeds, and even includes pitch correction to avoid that the speaker sounds like a chipmunk! This is especially useful when watching conference sessions: watch a whole 60 minute session in 30 minutes, and use the rest of the hour to be with your family instead

Breakpoints in bindings

This one is pretty cool: Who has never had to debug a binding, because the binding expression had a typo, or the value was not what you expected? it was pretty cumbersome before! Well with Silverlight 5, you can set a breakpoint right in the XAML binding expression, and the debugger will break and allow you to inspect the expression!.

Performance, profiling

A lot of work has been put into performance too, and a new set of tools helps to profile the application and identify critical areas that need perf tuning.

Pinvoke

This is like COM on steroid: This allows your Silverlight application to access pretty much any of the Win32 APIs directly from within your app. There are even ways to listen to Win32 messages, for example to be notified when a new USB drive is inserted (this is only an example!). There is a good article on pinvoke by Alexandra Rusina (one of Silverlight’s PMs) here.

Note that pinvoke only works with elevated permissions, which really makes sense (I wouldn’t want any script kiddy to be able to format my hard drives without saying “OK” first)!!.

And more…

There are a lot of other improvements, notably useful when you use the MVVM pattern in Silverlight. For example, the ability to search for an Ancestor in a RelativeSource binding (something we had since the beginning in WPF, and because it was missing here led to some cruel workarounds in some applications in Silverlight…) is a good example of these apparently small changes, but that will mean a lot when you do need them.

With version 5, we have a super mature version of the framework!

What about Mac? What about other browsers? What about delays? What about Maryjo?

As usual it is interesting to witness the drama around the (perceived) delay in the delivery of this massive new version. It is important however to remember that there had not been any official announcement about a delivery date (the only thing we had heard was Scott Guthrie – who is not in charge of this product anymore by the way - talk about “end of November”). With a delivery in the first half of December, and considering that much time has been spent on last minute bugs, making this version as stable as can be, and (again) considering the massive additions to this new version, I say kudos to the team!

Edit: Maryjo felt insulted and I am a nice guy, so let me rework that paragraph a bit. Yeah I went too far and personal, so hopefully this is better.

Maryjo Foley, who seems to be reporting and speculating on a lot of bad news these days, reported that Mac OS would not be supported for Silverlight 5, and even worse that only Internet Explorer would be supported on Windows.

Side note: She actually reported that “One of my contacts said he believed that the final version of Silverlight 5 may only work with Internet Explorer on Windows and won’t work on Mac OS platforms or with other browsers at all. (Silverlight 4 supports Windows and Mac OS X and the IE, Chrome and Safari browsers.)”. Notice the lack of named reference, the “he believed” and the “may work”.

It’s a good example of why we should take this kind of “journalism” with a grain of salt. We are very rational people, fond of science and technology, and yet we seem sometimes to act like schoolgirls when someone writes something on the web. At this point, I think it is good to remember that Maryjo often reports hearsay and rumors. I don’t mean that she is always wrong, not at all, and in fact I do read her column with interest. But I always take it with a (large) grain of salt, and I remember that until a product is released, we don’t know what it will support. Everything else, really, is conjectures. A good thing to remember while Windows 8 is in preparation!

Side note again: It is very painful to insiders to read this kind of articles (if you can call it that) while we knew very well that it was completely wrong. Unfortunately, the non-disclosure agreement that binds us to Microsoft prevents us from correcting assertions like this, and we had to sit down and watch. This is very unfortunate and painful. I really hope that people learn, some day, to be reasonable when it comes to technology (but I am not holding my breath).

To be clear: the list of supported web browsers and operating systems did not change. It is available at http://www.microsoft.com/silverlight/what-is-silverlight/.

Some restrictions

There are a few restrictions around the 3D rendering, for security reasons. The best summary I found so far is on David Catuhe’s blog. Security restrictions are always annoying but the alternative is letting unsafe code run on the user’s computer, and we all know how Microsoft handled that in the past (ActiveX anyone?) so I guess that we need to accept that they err on the side of security this time. (Edit: updated on 12/10/2011).

Also, like previously, COM access does not work on Mac OSX and as I mentioned above, p/invoke is also only available on Windows. Both these features require elevated permissions by the way.

What about MVVM Light?

MVVM Light will of course support Silverlight 5, and I will release a version soon. I just need a little more time running my tests and making sure that everything is working as expected. Stay tuned to this blog for an announcement about the release of MVVM Light for Silverlight 5!

A few additional updates

Well there was a nice storm on Twitter, and within the noise I managed to grab a few useful facts.

First, the Blend preview for Silverlight 5 is available here. I did not verify that it works with Silverlight 5 RTM, but I think it should.

Then, Silverlight 5 will be supported until December 2021. That’s 10 years of support.

The offline documentation can also be downloaded.

Finally there was a lot of passionate discussions on Twitter tonight. I think it was especially interesting to confront the view of tech journalists versus MVPs vs developers. Bottom line is that there is a lot of passion around tech these days. I personally think it is too much passion, but some disagree and I think we will have to live with that for years to come…

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Silverlight 5 Available for Download Today

Fri, 09 Dec 2011 19:54:28 GMT

Today, we’re happy to announce the release of Silverlight 5. Silverlight is part of a rich offering of technologies from Microsoft helping developers deliver applications for the web, desktop and mobile devices. Download Silverlight 5, a free plug-in less than 7 MB in size that can be installed in less than 10 seconds.

New features in Silverlight 5 include Hardware Decode of H.264 media, which provides a significant performance improvement with decoding of unprotected content using the GPU; Postscript Vector Printing to improve output quality and file size; and an improved graphics stack with 3D support that uses the XNA API on the Windows platform to gain low-level access to the GPU for drawing vertex shaders and low-level 3D primitives.

In addition, Silverlight 5 extends the ‘Trusted Application’ model to the browser for the first time. These features, when enabled via a group policy registry key and an application certificate, mean users won’t need to leave the browser to perform complex tasks such as multiple window support, full trust support in browser including COM and file system access, in browser HTML hosting within Silverlight, and P/Invoke support for existing native code to be run directly from Silverlight.

For more information, visit the Microsoft Silverlight site. For additional information on support policy, visit Microsoft Silverlight Support Lifecycle Policy.

The Silverlight Team

Announcing the Release of Silverlight 5!

Pete Brown — Fri, 09 Dec 2011 19:30:14 GMT

Look what just came out, and well in time to beat the Christmasrush :) Yes, it's Silverlight 5. We had originally announced thatSilverlight 5 would be out by the end of this year, and I'm glad toreport that it has made it in in time to give everyone somethinginteresting to play with over the holidays. My congratulations tothe engineering, marketing, support, and documentation teams forpulling off yet another amazing release.

Get the Bits

The best place to go to get the bits is http://silverlight.net/downloads. Make sure you have Visual Studio 2010 SP1 (or Visual WebDeveloper) and then install the Silverlight 5 Tools. While there,be sure to install the latest version of the Silverlight 5 Toolkit- most of the XNA goodness is in the toolkit and SDK.

The version number for this release of Silverlight 5 is5.0.61118. You can in-place upgrade from the RC. While notrequired, you can also uninstall the old bits first if youwant.

Where to Get Help

The Learn section onSilverlight.net is the primary location for Silverlight 5videos and tutorials. The beta and RC content still applies, andI've started creating more Release content for you as well.

We have a dedicated Silverlight 5 forum onSilverlight.net. Post any Silverlight 5-related technical questionsthere for peer support.

Of course, I can't help but throw out a plug for my book Silverlight 5 in Action. Ifyou order it right now, you get the early access bits, which is1200 pages of raw unedited writing from me. I think you'll likeit.

Silverlight 5 RTM/RTW Features

Silverlight 5 adds a ton of new features over what we had withSilverlight 4. These are non-trivial features like a full 3d stack,parsing performance improvements, tons of enhancements to bindingand much more. My favorite features have to be Implicit Templatesand the XNA-Compatible 3d Stack. The official list of features is here, but I'vealso detailed some below with direct links to learning content(this is adapted from my RC post).

Binding and Related

ICustomTypeProvider (see Alexandra Rusina's post)
Custom Markup Extensions
Ancestor RelativeSource Binding
Implicit Data Templates
Binding in Style Setters
DataContextChanged Event
PropertyChanged now an UpdateSourceTrigger option

Graphics

XNA 3D API
Improved Graphics Stack
XNA 3D built-in effects
XNA 3D Project Templates with full XNA Content Pipeline
3D surface composition settings
3D multi-sample anti-aliasing

Media

Low-Latency Sound using XNA SoundEffect andSoundEffectInstance
Hardware decoding of unprotected H.264 media
Variable Speed Playback and Trick-play (new since beta)
Remote Control and Media Command (Keys) Support

Text

Text Tracking and Leading
Linked and Multi-column Text
OpenType Support
Pixel Snapped Text and TextOptions

Operating System Integration

P/Invoke (also: My Printer Enum Example)
Multiple Windows
Unrestricted File System Access in Full Trust
Full Trust in-browser for enterprise scenarios
Default Filename in SaveFileDialog and OpenFileDialog
64 bit browser support for Windows
Power awareness for media apps (keep the PC alive while a movieis playing, for example)

Productivity and Performance

Network Latency Improvements
Databinding Debugging
Parser Performance Improvements
Multi-core JIT for improved start-up time

Controls

Double and n-click support
PivotViewer (with improved customization and more)
ComboBox type-ahead/incremental search

Other

In-browser HTML for trusted in-browser applications
PostScript Vector Printing
Tasks from TPL
C# Covariance and Contravariance

and more…

My Silverlight CodePlex Projects

For a number of reasons, I've let my CodePlex projects sit for abit. The time has come for me to finally update them. I'll have newSilverlight 5 versions of the Commodore 64 Emulator with a new UI and soundsupport, and the Silverlight Printing/Reporting example both upshortly after I return from vacation with the family. Look for moreinfo soon.

Go Get it

So go and check out the release. It is backwardscompatible with your Silverlight 4 applications (it runs in quirksmode until you recompile the project for Silverlight 4), so feelfree to target SL3, 4 or 5 using the Silverlight 5 bits.

I am speaking at 13th Edition of Microsoft Virtual Tech Days from 14 to 16 December 2011

noreply@blogger.com (Vikram Pendse) — Fri, 09 Dec 2011 18:15:00 +0000

First of all very sorry for not posting anything from last month or more than that. I am actually totally occupied with some interesting Windows Phone 7 Project and also some amazing .NET & SQL BI assignments including SSIS and SSRS.This kept me extremely busy for last two months.But I kept on exploring the things and I will very soon resume blogging and very soon going to post some good stuff.

Out of all this, I am glad to announce that I will be speaking at 13th Edition of Microsoft Virtual Tech Days which will be hosted by Microsoft India. This is a complete online event with tons of good sessions for all 3 Days starting from 14th December to 16th December 2011.

I will be speaking on Day 3 inside “Windows Phone” Track on a very interesting topic titled as Best practices of designing apps for Windows Phone

I will be taking various design related topics in this discussion followed by Questions and Answers, Its scheduled at 01:45 PM IST, So Mark your calendars right away !

For more information about Microsoft Virtual Tech Days, Registration and Agenda for all 3 days,Visit http://www.virtualtechdays.com/

Do participate in Quiz and Questions and Answers sessions actively since there are lot of goodies to win for you :

So block your calendar right away ! I wish to meet you all there at my session. Also after that week, I assure not to take any logical or physical breaks and will resume postings here. So do make a visit here in coming weeks, some really exciting stuff is on your way.

Vikram.

The joy of running daily builds

Thu, 08 Dec 2011 22:01:31 GMT

It seems like a daily question I’ve been answering lately when working on internal email discussion groups and folks report an issue, my initial response is: what build combination are you working on?

As a part of my job, I like to ensure the fastest resolution (or awareness depending on how you look at it) to issues that affect our product. This involves staying on top of ‘latest bits’ as we call them. Every morning I come in and install the latest Windows build as well as the latest Visual Studio build. We have an automated Hyper-V environment that makes it easy to get the initial Windows builds up and going and then I selectively apply VS on top of that.

So if it sounds so simple, why do I ask that question to people that ask? Allow me to show you a few diagrams.

The above is a *snapshot* of just a few of the branches that affect the tools area that I work on. This is not representative of the entire branching structure, which is huge.

NOTE: This diagram is automatically created for you from Team Foundation Server…you select the branches of interest and it visualizes for you. There is also an awesome feature to track changes which I’ll note below.

The red box items make up the different teams working to bring together the holistic view of some of the core developer experiences. Since they aren’t *just* working on my stuff, nobody can live in a single branch together in harmony. You can see that the spread of varying levels of branches required to get something working is pretty broad. And merge (we call them RI/FI) processes are on different schedules and managed to reduce conflicts as much as possible. The above is just one piece of the puzzle – the developer tools. Windows has a similar ancestry view we have to deal with:

The red boxes here are basically other Windows teams that we need stuff from to get our product working as well. These RI/FI process go through many, many checks and if any regressions, they don’t allow merging, which can cause issues if you are waiting on a fix to come to your branch!

So the answer to whether something should work at any given time during development milestones has different answers depending on where you got your bits from. I’ve personally resorted to hosting a page on our team wiki with the title Tim’s Guide to Finding a Build Combination™. I’ve also added a few helpful scripts to get any missing pieces aligned for builds. So now I’ve got my daily build routine down to a science.

Occasionally there are times where a fix is completed and I look back at my tracking bugs. Sometimes you’ll get a team that just fixes things and you aren’t given a chance to test out private bits, or whatever…so you have to go hunt down where the fix is at and when it will come to you. In most source control systems there is a good mechanism for viewing/following a changeset. In TFS I think they’ve nailed the feature to do this in two ways of visualization. You can “track changeset” and choose a timeline view or branch view…it is awesome for pinpointing just where a fix is working the way through the source depots. Here is a view of a bug using the branching view. Green shows which branches has the fix (changeset):

Here is another bug using the timeline view showing me when the fix made it to certain branches:

For me, this has been invaluable to really identify when/where things are and determine a predictable path for resolution on issues as they converge.

Managing a process to get a Good Daily Build™ is not always easy when you need pieces coming from two different organizations which are very large and working in many, many branched source depots. But staying on top of things so you can quickly help your customers/partners move forward progress is a very rewarding experience. My daily routine has helped me stay on top of the core issues at hand and determine a daily quality on the mainstream scenarios as our customers see them, which isn’t always caught with test automation or unit tests all the time (but yes, we have those too).

Well, a new build just came out…time to update my wiki!

tags: xaml, tfs, team system, svn, git, source control

This work is licensed under a Creative Commons Attribution By license.

Windows 8 XAML Metro Apps with OData - Part 2

editorial@silverlightshow.net (Samidip Basu ) — Thu, 08 Dec 2011 10:57:00 GMT

So, you have heard the buzz about the brave new world of Windows 8 from MSFT’s BUILD Conference!

Don't miss...

May be you even attended the wonderful SilverlightShow webinar about “Getting Started with XAML Development in Windows 8” by Gill Cleeren. Ready to get your hands muddy? In this short 2-part article series, we talk about how to get started towards writing data-driven (specifically OData) Windows 8 Metro apps with XAML & C#. Here’s what we’ll cover:

Part 1 – Handling of OData from our XAML Metro App [Consumption & Updates to OData source]
Part 2 – How to make your XAML App a well-behaved Windows 8 citizen [Artwork, Snapped Views, Contracts, Application Bar etc]

As always, the demo solution, along with all code samples is available for download through the link below:

Download Source Code

Introduction

At the BUILD Conference in August 2011, Microsoft launched Windows 8 .. the next iteration of Windows. It isn’t a forked world between desktop & mobile/tablet Operating Systems; rather “One OS to rule them all..” which runs on variety of form factors with touch-based interaction being a first-class citizen. We could obviously talk a lot about Windows 8; but for the sake of the length of this post, let me refer you to 2 valuable resources:

BUILD Website @ http://www.buildwindows.com/. Great place to start would be the 5 Keynotes, followed by tons of recorded Session content.
Windows 8 Developer Home @ http://msdn.microsoft.com/en-us/windows/home. On this site is a link to download the Windows 8 Developer Preview – the latest Windows 8 bits along with Development tools. Also, as you get into serious Windows 8 Metro development, the samples from Microsoft & contributions from our fabulous community should be very valuable.

In Part 1 of this article series, we talked about how to get started with building a Windows 8 Metro App with XAML/C# and how to consume OData in our application. While we might have a functional data-driven application, we developers should strive to make our native applications feel at home in the target operating system. Windows 8 is Windows re-imagined with Metro UI, and as such, introduces some new paradigms that most Metro applications should adhere by. In this post, we talk about how to ensure our application does not produce a jarring UX for the Windows 8 user; in essence, how to make our application a well-behaved citizen in Window 8.

Prerequisites

To follow along or to try the Demo or build something similar yourself, you need the following:

Windows 8 Developer Preview running “on the metal” on some laptop/tablet.
Alternatively, you could also run Windows 8 in a VM (VirtualBox being the best fit at this time) or off a VHD.
Visual Studio 11 included as a part of Windows 8 Developer Preview. At this point, the templates to build Metro Apps aren’t available outside the Windows 8 bits.
Curiosity

The Application Bar

Remember our UI to show/manipulate our list of Team members? Here it is again:

You’ll notice that the main UI has been kept clean with minimal controls. You can obviously add much much more to utilize the real estate; but the point is, commonly used actions should be tucked away in what’s called the Application Bar at the bottom & also at the top. If you have a touch-enabled tablet or PC, you could get to the Application Bars in any Metro App by swiping a little from the top or bottom of the screen. If using Windows 8 in a traditional mouse/keyboard computer, we need to right-click in the App to bring up the Application Bars.

Please note that these Application Bars are optional – you can add an Application Bar at the bottom, top, both or none, as per your App’s needs. Commonly used App functionality tucked away in Application Bars like this just makes your App sit well with the rest of the Windows 8 OS & utilizes the UX the end-users are already used to.

Quick Trivia – Why do you think the Application Bar buttons are at either end & not at the center ?? The answer lies is some detailed research Microsoft conducted to figure out what portion of the tablet form-factor’s screen is most accessible with thumbs when holding the tablet in both hands. See the point now?

So, let’s take a look at what we had to do to build our Application Bar. The round Metro-looking icons are nothing but regular buttons with click-handlers behind them. Here’s how we add the Application Bars to our MainPage.xaml UI:

   1: <UserControl x:Class="TeamMetro.MainPage"   2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   4: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   5: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   6: mc:Ignorable="d"   7: d:DesignHeight="768" d:DesignWidth="1366">   8:     9: <!--Content-->  10: <Grid x:Name="LayoutRoot" Background="Chocolate">  11:    12:     // All the other content stuff ..  13:    14:     <!--Application Bar-->  15:     <ApplicationBar x:Name="BottomAppBar" VerticalAlignment="Bottom" Height="100" Opacity=".8" IsPersistent="False" DismissMode="LightDismiss">  16:         <Grid>  17:             <Grid.ColumnDefinitions>  18:                 <ColumnDefinition Width="*"/>  19:                 <ColumnDefinition Width="Auto"/>  20:             </Grid.ColumnDefinitions>  21:             <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">  22:                 <Button Content="Edit" Style="{StaticResource EditButtonStyle}" Click="EditButton_Click"/>  23:                 <Button Content="Delete" Style="{StaticResource DeleteButtonStyle}" Click="DeleteButton_Click"/>  24:             </StackPanel>  25:             <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">  26:                 <Button Content="Add" Style="{StaticResource AddButtonStyle}" Click="AddButton_Click" />  27:                 <Button Content="Refresh" Style="{StaticResource RefreshButtonStyle}" />  28:             </StackPanel>  29:         </Grid>  30:     </ApplicationBar>  31:    32:     <ApplicationBar x:Name="TopAppBar" VerticalAlignment="Top" Height="100" Opacity=".8" IsPersistent="False" DismissMode="LightDismiss">  33:         <StackPanel Margin="20,0,0,0" VerticalAlignment="Center">  34:             <TextBlock x:Name="topBarText" Text="You can add stuff here as well .." FontSize="26" />  35:         </StackPanel>  36:     </ApplicationBar>  37:    38: </Grid>     39:    40: </UserControl>

And here’s the button template defined in our App.xaml as a global resource. You could obviously have one template for all buttons and include any other styles you want re-used. If you overlook the story-board, each Application Bar is essentially an image icon inside an ellipse. Makes sense?

   1: <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   2:              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    3:              x:Class="TeamMetro.App">   4:     5:     <Application.Resources>   6:     7:         <ResourceDictionary>   8:                9:             <Style x:Key="EditButtonStyle" TargetType="Button">  10:                 <Setter Property="Background" Value="Transparent"/>  11:                 <Setter Property="Foreground" Value="White"/>  12:                 <Setter Property="BorderBrush" Value="Transparent"/>  13:                 <Setter Property="FontFamily" Value="Segoe UI"/>  14:                 <Setter Property="FontSize" Value="9"/>  15:                 <Setter Property="Template">  16:                     <Setter.Value>  17:                         <ControlTemplate TargetType="Button">  18:                             <Grid>  19:                                 <VisualStateManager.VisualStateGroups>  20:                                     <VisualStateGroup x:Name="CommonStates">  21:                                         <VisualState x:Name="Normal"/>  22:                                         <VisualState x:Name="MouseOver"/>  23:                                         <VisualState x:Name="Pressed">  24:                                             <Storyboard>  25:                                                 <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonEllipse" />  26:                                                 <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Glyph" />  27:                                             </Storyboard>  28:                                         </VisualState>  29:                                     </VisualStateGroup>  30:                                 </VisualStateManager.VisualStateGroups>  31:                                 <StackPanel Orientation="Vertical">  32:                                     <Grid  Margin="0,14,0,5" >  33:                                         <Ellipse x:Name="ButtonEllipse" Height="40" Width="40" Fill="Transparent" HorizontalAlignment="Center"  34:                                              Stroke="White" StrokeThickness="2" VerticalAlignment="Center"/>  35:                                         <Image Source="/Images/appbar.edit.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>  36:                                     </Grid>  37:                                     <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center"  38:                                            FontFamily="Segoe UI" FontSize="12"/>  39:                                 </StackPanel>  40:                             </Grid>  41:                         </ControlTemplate>  42:                     </Setter.Value>  43:                 </Setter>  44:             </Style>  45:    46:         </ResourceDictionary>  47:    48:     </Application.Resources>  49:    50: </Application>

UI Modes

Windows 8, being a hybrid OS supporting multiple form factors, will have enough hardware horsepower to support true multi-tasking even in Metro UI mode.. And the additional real estate offered by tablets form factors means that people should be allowed to run multiple applications side by side. Yes, you can do that, unlike the competition

So, if are running Windows 8, try a few Metro Apps one after another .. and then swipe from left or hover mouse-cursor on left edge. What you should see pop-out is the last running application, which you can drag out onto the viewable area & also dock it. Accordingly, all Windows 8 Metro applications support three UI modes:

FullScreen – This is when the App has the full center-stage & nothing else is in the foreground.
Filled – This happens when a Metro App consumes about 75% of the screen real-estate and another App has been snapped to one side.
Snapped – This is the mode where the App in question is actually the one that has been snapped and has about 25% of screen real estate.

It is important to note that supporting these modes is very highly recommended for Metro Apps, lest you do not care about the UX when users snap your App. So, we have seen how our Demo application looks in full-screen mode; here’s how it would be if another application was snapped to the side:

And here’s how our App would look if snapped:

So, let’s see what one has to do to support this snapping behavior. First up, in our application, we need to notified as when these layout changes happen so we can take appropriate action. So, let’s subscribe, as below:

   1: #region "Constructor"   2:     3: public MainPage()   4: {   5:     InitializeComponent();   6:        7:     // Subscribe to Layout changes.   8:     ApplicationLayout.GetForCurrentView().LayoutChanged += new TypedEventHandler<ApplicationLayout,ApplicationLayoutChangedEventArgs>(MainPage_LayoutChanged);   9:    10:     // Other stuff.  11: }  12:    13: #endregion

Did you notice the ApplicationLayout object? Yeah, we subtly tap into a WinRT namespace called using Windows.UI.ViewManagement and trust the OS to inform us about layout changes in current view.

And here’s how we respond to the change in Layout:

   1: private void MainPage_LayoutChanged(ApplicationLayout sender, ApplicationLayoutChangedEventArgs args)   2: {   3:     if (args.Layout == ApplicationLayoutState.Filled || args.Layout == ApplicationLayoutState.FullScreen)   4:     {   5:         this.fullMode.Visibility = Windows.UI.Xaml.Visibility.Visible;   6:         this.snappedMode.Visibility = Windows.UI.Xaml.Visibility.Collapsed;   7:     8:         this.BottomAppBar.Visibility = Windows.UI.Xaml.Visibility.Visible;   9:         this.topBarText.Text = "You can add stuff here as well ..";  10:     }  11:     else if (args.Layout == ApplicationLayoutState.Snapped)  12:     {  13:         this.fullMode.Visibility = Windows.UI.Xaml.Visibility.Collapsed;  14:         this.snappedMode.Visibility = Windows.UI.Xaml.Visibility.Visible;  15:    16:         this.BottomAppBar.Visibility = Windows.UI.Xaml.Visibility.Collapsed;  17:         this.topBarText.Text = "Snapped Mode:";  18:     }  19: }

A few things happened .. so let’s dig in. For my demo application, I am not really limited in real estate in Filled mode .. so I treat that the same as in FullScreen mode. If however the App is snapped, we swap out controls for a more streamlined look. I chose to bind my results to 2 different ListBoxes in the UI that I toggle based on layout .. if you can have one Listbox & adjust through DataTemplates, that is totally desirable. So, here are my UI elements:

   1: <StackPanel Background="Transparent" VerticalAlignment="Center" x:Name="fullMode">   2: <ListBox Name="fullTeamList" Margin="40" ItemsSource="{Binding WCFTeam}" Foreground="Blue" Background="Transparent">   3:     <ListBox.ItemTemplate>   4:         <DataTemplate>   5:             <StackPanel Margin="400,0,0,40" VerticalAlignment="Center" Orientation="Horizontal">   6:                 <Image Source="ninja.png" Height="75" Width="75"/>   7:                 <TextBlock Text="{Binding Name}" Margin="10,0,0,0" FontSize="26" VerticalAlignment="Center"/>   8:                 <TextBlock Text=" -- aka " FontSize="22" VerticalAlignment="Center"/>   9:                 <TextBlock Text="{Binding TwitterHandle}" Margin="10,0,0,0" FontSize="22" VerticalAlignment="Center"/>  10:             </StackPanel>  11:         </DataTemplate>  12:     </ListBox.ItemTemplate>  13: </ListBox>  14: </StackPanel>  15:    16: <StackPanel Background="Transparent" VerticalAlignment="Center" Width="320" x:Name="snappedMode" Visibility="Collapsed">  17:     <ListBox Name="snappedTeamList" Margin="5" ItemsSource="{Binding WCFTeam}" Foreground="Blue" Background="Chocolate">  18:         <ListBox.ItemTemplate>  19:             <DataTemplate>  20:                 <StackPanel Margin="10,0,0,40" VerticalAlignment="Center" Orientation="Horizontal">                              21:                     <TextBlock Text="{Binding Name}" Margin="10,0,0,0" FontSize="26"/>  22:                 </StackPanel>  23:             </DataTemplate>  24:         </ListBox.ItemTemplate>  25:     </ListBox>  26: </StackPanel>

So, I chose to only display Team member names in Snapped mode and adjust the Application Bars accordingly. It is totally up to you & your application to decide on what information you want to display in Snapped mode .. I would guess people would go for either minimalistic views for social media type applications or dense views conveying a lot of information for sustained Snapped view usage. The point is this is totally customizable through the XAML UI .. so let’s make the most of it.

Contracts

Windows 8 introduces this concept of Contracts, which can be thought of as System Interfaces. You may also think of them as Let-Us-Not-Reinvent-The-Wheel mechanisms. If your App needs to let the user share something through Social media, why would you write interface code to post to Twitter/Facebook when another application in the system already knows how to do that? This also results in a consistent UX and less clutter in Apps. This concept of Contracts, when expanded to most common tasks, and the powerful WinRT APIs does give the developer a lot of flexibility. While there are lots of Contracts (details found on doing MSDN searches), let’s look at a couple of contracts which should highly recommended for most Metro Apps.

Sharing

The Share contracts enforces a requester-listener pattern .. one application says “I need to share this”, while another says “I know how to do that”. The application which actually implements the Share contract need to know how to receive data from other applications through the OS and share it through whatever medium the application is built to use.

For our demo application, we will not be actually implementing the Share contract; but do the much easier, frequently needed utilization of the Share pattern. What if we need to share some information about our Team members on social media .. can we get away with simply providing the data to share? Yes .. let’s see how.

First, if you need your application to share some information, please please please (3 times’ the charm ) do not add anything inside your App or the Application Bar to enable this. The key is consistency. You see, there are these shortcuts called Charms accessible to Windows 8 users. Set of quick access tasks accessible when touch-enabled user swipes from the right edge of screen or the mouse user hovers at the left lower corner. Here’s what the user sees:

So, what happens when we have a selected Team member selected & which we wish to share, and then we hit the Share Charm. Well, something like this:

What you see is the list of applications that have implemented the Share contracts .. in other words, declared to the OS that they can handle sharing of information from other Apps. Exactly, what we need! Now, let’s try TwitterRama which is a simple Twitter client for Windows 8 built by some very smart MSFT interns. This App clearly knows how to talk/post to Twitter .. so we may not need to integrate with Twitter API directly. Here’s what we get when we try to share through TwitterRama:

Did you notice that our App passed data to TwitterRama? Let’s see how we do that .. first, let us sign up for sharing by allowing the OS interfaces to request data from our application:

   1: using Windows.ApplicationModel.DataTransfer;   2:     3: #region "Constructor"   4:     5: public MainPage()   6: {   7:     InitializeComponent();   8:     9:     // Sign up to Share.  10:     var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.GetForCurrentView();  11:     dataTransferManager.DataRequested += new TypedEventHandler<DataTransferManager,DataRequestedEventArgs>(dataTransferManager_DataRequested);  12: }          13:    14: endregion

Next, when data is actually requested (this happens when the user hits the Share Charm), we get to respond to the event in our application and make up what data element to share. Here’s how:

   1: private void dataTransferManager_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)   2: {   3:     if (this.fullTeamList.SelectedItem != null)   4:     {   5:         // Set what to share.   6:         Team selectedMember = (Team)this.fullTeamList.SelectedItem;   7:         string textToShare = "Selected Team Member: " + selectedMember.TwitterHandle;   8:         args.Request.Data.Properties.Title = "Team Member Selection";   9:         args.Request.Data.SetText(textToShare);  10:     }  11: }

That’s it .. easy to share, right? You may learn more about the Share contract from this BUILD sessions HERE.

Implementing Contracts

Now, how would we go about actually implementing a Contract? Simple, most common ones are available in the “Add New Item” project wizard, as shown here:

Now, let us say our application has some interesting data/files to search on. So, if we implement the Search contract, the end user may search for our application’s data directly from Windows Search, even if our application is not running. The user gets to see our App in the list for Search & search query parameters get passed directly into our application. Here’s how:

If our application does implement the Search contract, the App Manifest file gets updated with Declarations .. others can be added from the same screen below along with implementation:

So, now when the user searches contextually within your application from Windows Search, your application gets to respond showing a custom Search results view. The basics of this are added as a SearchResultsPage.xaml when we add the Search contract, as displayed below:

And we get to respond to Search queries from the user within our view as follows:

   1: public sealed partial class SearchResultsPage   2: {   3:     public SearchResultsPage()   4:     {   5:         InitializeComponent();   6:     }   7:     8:     public void Activate(SearchActivatedEventArgs args)   9:     {  10:         var queryText = args.QueryText;  11:    12:         // Application-specific searching logic.  13:         // Bind Search results to UI.  14:    15:         // Display the results  16:         this.PreviousContent = Window.Current.Content;  17:         Window.Current.Content = this;  18:         Window.Current.Activate();  19:     }  20: }

Much more details about the Search contract can be found in this BUILD session recording HERE.

Artwork

Last but possibly the most important – let’s make nice looking Apps, shall we? Let’s take care of the user’s UX and they in turn, would take care of us developers, right? So, just like in Windows Phone, we developers need to put our Designer caps on, since graphics & artwork is of paramount importance. Let us follow Metro design guidelines to make our application feel right at home in Windows 8. Here’s our demo application on start screen:

Here are some things not to miss:

Inviting App logo on Start screen
Inviting & Contextual App logo in App Store, along with great screenshots & description
Branded Splash screen if using one as your App launches
Rich but minimal graphics & backgrounds in App
Maintain consistency
Enable Live Tiles with Push Notifications (topic for another post someday)
Contract implementations through consistent UI to keep inviting your users back into the App
Metro, Metro, Metro

Still waiting .. c’mon let’s get started! Let’s play a part in Windows re-imagined.

Summary

In this 2 part article, we talked about how to get started with Windows 8 Metro Apps with XAML/C# and we went on to consumption/updates of OData from a Windows 8 Metro application. In Part 1, we looked at a few techniques on how to do asynchronous programming in Windows 8 using the new C# 5.0 constructs of Async-Await. In Part 2, we talked about taking the first steps towards making your Metro Apps feel at home in the Windows 8 Operating System.

I would appreciate any comments or concerns or how things could be done better. Thanks for reading & happy coding.

Cheers SilverlightShow!

About the Author

Samidip Basu (@samidip) is a technologist & gadget-lover working as a Manager & Solutions Lead for Sogeti out of the Columbus Unit. Having worked on WP7 since CTP days, he now spends much of his time in spreading the word to discover the full potential of the Windows Phone platform & cloud-based mobile solutions in general. He passionately runs the Central Ohio Windows Phone User Group (http://cowpug.org/), labors in M3 Conf (http://m3conf.com//) organization and can be found with at-least a couple of hobbyist projects at any time. His spare times call for travel and culinary adventures with the wife. Find out more at http://samidipbasu.com/.

MVVM Light template and WCF services (or any ASP.NET application for that matter)

Wed, 07 Dec 2011 21:36:33 GMT

I was recently made aware of a couple of people having issues with WCF services (or ASP.NET applications) when using the MVVM Light project template for Silverlight. There is a blog post and a StackOverflow question, so what exactly is happening there?

Well in fact it is pretty simple when you know how Silverlight connects to web services. Due to the security model of Silverlight, the application cannot connect to a web site if it is not originating of this very website. In laymen’s terms, it means that the application can only connect to a web server if it also comes from the same webserver. For example, if the Silverlight application is served by http://www.galasoft.com, it won’t be able to connect to, say, http://www.cnn.com without getting an exception. We talk about cross-domain access restrictions.

Of course there are ways around that, for instance a website can specifically give access to Silverlight applications through a configuration file.

In the case that concerns us, it is exactly what is happening. You see, the MVVM Light Silverlight project template creates a Silverlight application without an ASP.NET host. I didn’t add one because I didn’t want to complicate the template too much. And also, to be honest, because adding a web project is super easy, but of course only if you know how to do, and this is exactly what we will do here!

Creating the application

The steps to create the application and the WCF service are as follows:

Create the MVVM Light application using the MVVM Light project template for Silverlight.
Right click on the solution in the Solution Explorer and select "Add, New Project from the context menu.
From the WCF category, select a WCF Service Application and create it.
Build the application.
Right click on the MVVM Light project and select Add Service Reference from the context menu.
In the Add Service Reference dialog, click on Discover.
Make sure that the found service is the one you want to connect to, and click on OK.
In the MVVM Light application, open the file Model/DataService.cs and modify the code as follows:

public class DataService : IDataService{    public void GetData(Action<DataItem, Exception> callback)    {        var client = new ServiceReference1.Service1Client();        client.GetDataCompleted += ClientGetDataCompleted;        client.GetDataAsync(1234, callback);    }    void ClientGetDataCompleted(        object sender,         ServiceReference1.GetDataCompletedEventArgs e)    {        var callback = e.UserState as Action<DataItem, Exception>;        if (callback == null)        {            return;        }        if (e.Error != null)        {            callback(null, e.Error);        }        callback(new DataItem(e.Result), null);    }}

This code uses an asynchronous service call pattern where the callback (a reference to a method passed as Action by the caller) is saved in the service call. Then when the asychronous call returns (in the Completed event), the callback is retrieved from the UserState. If an error occurred, the callback can be used to pass this error to the caller. Otherwise, a new DataItem class is created and passed to the called.

Details about this pattern can be found in my talks Understanding the MVVM pattern and Deep Dive MVVM.

So why doesn’t it work?

If you run the application now (making sure that the MVVM Light project is selected as Startup Project), you will first see a warning dialog and then an exception. What happened?

What happened here is exactly the cross-domain issue I mentioned: The Silverlight application is not explicitly hosted into a web application, so Visual Studio is using an auto-generated HTML page instead, and running it from the embedded web server (“Cassini”). In fact, unless you explicitly specified otherwise, the test page is run in “file mode” instead of HTTP mode. The URI in the web browser window starts with C:\ for instance, instead of http://.

In those conditions, the access to the WCF service is (justly) denied, and you get a security exception.

Correcting the error

In order to correct the error, you can either add a cross-domain policy file to your WCF application, or host the Silverlight application in the same web project as the WCF service. Let’s do that now:

Right click on the WCF Service application in the Solution Explorer, and select Properties from the context menu.
On the left, select the Silverlight Applications tab.
Click on Add.
Select Use an existing Silverlight project in the solution and make sure that your MVVM Light application is selected in the combo box.
Make sure that Add a test page that references the control is checked, as well as Enable Silverlight debugging.
Press Add.

This creates two new files in your WCF Service application: One is suffixed TestPage.html and the other is suffixed TestPage.aspx. We typically don’t need the ASPX one so you can safely delete it.

Right click on the WCF Service application and select Set as StartUp Project from the context menu.
Right click about the HTML test page and select Set as Start Page from the context menu.

By doing this, we force Visual Studio to serve the HTML page and the Silverlight application from the same URL as the WCF Service, and to serve it as HTTP. This is possible because a WCF Service application is nothing else than an ASP.NET web server running WCF. So the same web server can deliver HTML, Silverlight and of course WCF.

If you run the application now, you will see the following result:

Note that the warning shown earlier will still appear, but it is really just a warning, and you can safely turn it off. Just remember the cross-domain restriction when you publish your Silverlight application to another web server!

Success, we hit the WCF service and returned with a valid result! In fact, you can verify by placing breakpoints in the DataService.GetData method on the client, and in the Service1.GetData method on the server. Then press F5 to run the application in Debug mode and notice how you can easily debug both the client and the server at the same time.

What about the opposite way?

It is also possible to add a new MVVM Light application to an existing WCF Service application with the following steps (I am going a bit faster now, I am sure you will get it easily):

Open the existing WCF Service application.
Right click on the Solution and select Add New Project.
Select the MVVM Light project template for Silverlight and add a new project.
Build the application.
Just like before, add a Service Reference to the Silverlight application.
Again, just like before, add the Silverlight application to the WCF Service application (WCF Project Properties, Silverlight Applications, Add…).

Summary

Hopefully the confusion around this is cleared now. In summary:

Silverlight applications are restricted to access cross-domain web servers (unless explicitly authorized to do so).
The default MVVM Light application does not have an explicit host, so it runs off the default test page.
You can however easily add the MVVM Light application to the WCF Service application and then run it and debug it.

Note that the steps above can be used to add an MVVM Light application (or any Silverlight application) to any ASP.NET application, be it WCF Service application, ASP.NET MVC application or “classic” ASP.NET application.

Happy coding!
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

What does featuring in the Marketplace do with your app?

Wed, 07 Dec 2011 19:00:00 +0100

A lot of Windows Phone developers probably already know, but some might not. There is a very interesting tool in the market to monitor your application for Downloads, Ranking and Reviews: Distimo Monitor. You can for example compare your application with your competition and conquer the world. Besides that Distimo also shows you when your application was featured in the Marketplace. A couple of the apps I created have been featured so far, but let’s look at Fokke & Sukke app and the target market (The Netherlands).

Is my app featured?

You can watch closely how the marketplace looks either on the Phone or in Zune to see if your app is featured.

But in the end, this is not very doable. Don’t forget that your app can be featured in every market separately. So what else? We have the distimo monitor which shows events for your application. You can see when a new version was released and when your app was featured.

The featured periods are:

12/10 – 18/10
02/11 – 08/11
30/11 – 06/12

My app is featured, now what?

It’s cool to see that this app has been featured that often, but what does it mean? Let’s take a look at the Ranking in those periods.

You can easily see the areas when the app was featured by the green regions. But more important, you can see that in the first and third period being featured meant that the ranking went up immediately.

Windows 8 XAML Metro Apps with OData - Part 1

editorial@silverlightshow.net (Samidip Basu ) — Wed, 07 Dec 2011 09:59:00 GMT

So, you have heard the buzz about the brave new world of Windows 8 from MSFT’s BUILD Conference! May be you even attended the wonderful SilverlightShow webinar about “Getting Started with XAML Development in Windows 8” by Gill Cleeren.

Don't miss...

Ready to get your hands muddy? In this short 2-part article series, we talk about how to get started towards writing data-driven (specifically OData) Windows 8 Metro apps with XAML & C#. Here’s what we’ll cover:

Part 1 – Handling of OData from our XAML Metro App [Consumption & Updates to OData source]
Part 2 – How to make your XAML App a well-behaved Windows 8 citizen [Artwork, Snapped Views, Contracts, Application Bar etc]

As always, the demo solution, along with all code samples is available for download through the link below:

Download Source Code

Introduction

We could obviously talk a lot about Windows 8; but for the sake of the length of this blog post, let me refer you to 2 valuable resources:

BUILD Website @ http://www.buildwindows.com/. Great place to start would be the 5 Keynotes, followed by tons of recorded Session content.
Windows 8 Developer Home @ http://msdn.microsoft.com/en-us/windows/home. On this site is a link to download the Windows 8 Developer Preview – the latest Windows 8 bits along with Development tools. Also, as you get into serious Windows 8 Metro development, the samples from Microsoft & contributions from our fabulous community should be very valuable.

Also, check out the overall technology stack in Windows 8 below: [Source: Doug Seven’s Post]

A lot has been written in the past few months about Win RT & the development stack in Windows 8 .. simple web searches should get us lots of resources. For this article & the demo app, we will stick to the managed world of XAML UI & C# code running on .NET 4.5 on top of Win RT. There might be some rough edges .. but we are all trying to learn, right?

Prerequisites

To follow along or to try the Demo or build something similar yourself, you need the following:

Windows 8 Developer Preview running “on the metal” on some laptop/tablet.
Alternatively, you could also run Windows 8 in a VM (VirtualBox being the best fit at this time) or off a VHD.
Visual Studio 11 included as a part of Windows 8 Developer Preview. At this point, the templates to build Metro Apps aren’t available outside the Windows 8 bits.
Curiosity

The Data

Let’s try building a data-driven Metro App, shall we? For Demo purposes, I’m going to use a simple relational DB called “Demo” hosted in SQL Azure with just one table called “Team”, as shown below with schema/data:

So essentially, we want to keep track of Team Members with Names & TwitterHandles. How can we get this data easily into a Windows 8 Metro App? Why off course, OData !!

You may learn more about OData from http://www.odata.org/. I already have an OData Service built on top of our DB to expose the Team table data as an OData feed for consumption. Need to expose your data as OData? – Check out Michael Crump’s great series on Producing & Consuming OData in Silverlight & Windows Phone Applications.

Also, remember my article on Connecting Azure & Windows Phone through OData ? In that article, we talked about consuming OData from the same SQL Azure DB Table & also easily performing CRUD operations against data source through OData from a Windows Phone application. So essentially, we want to take the Windows Phone Demo application handling OData & port it over to being a Windows 8 Metro App in XAML & C#. You’ll soon realize that while we have to accommodate the UI having a lot more real estate in Windows 8, a lot of the coding artifacts are very similar or can be reused in the Windows 8 world with minor changes. If you have done Windows Phone Development, you should feel right at home in doing XAML Metro Apps!

So, here’s the OData service endpoint which provides access to our Table data in AtomPub (default) or JSon format:

The Metro App

So, now that we have a data source & an OData service on top of it exposing the data, let’s see how we may consume it in a Windows 8 Metro App. Let’s fire up Visual Studio 11 & make our appropriate selections as below:

The above selection gets us into a mode for building Metro Apps with XAML UI & C# code in a managed runtime. Just like in Windows Phone, the templates provided are your friends, as they get us a long way towards achieving Metro UI look & feel in our applications. For our demo, we shall choose to start with an empty application canvas & focus on fetching data into our app.

Now, since we have an OData service, it’ll be nice to Add a Service Reference to the service in our project so that we know the backend entities & can refer to them in code. Ouch – too soon The automatic proxy building against an OData service by adding a Service Reference isn’t quite ready in the Windows 8 tooling yet! So, we revert to the old-school way of adding our service reference into the project:

DataSvcUtil.exe /uri:Your_OData_Endpoint/out:TeamModel.cs /Version:2.0 /DataServiceCollection

As you could see, we used the DataSvcUtil tool (tucked away in your .NET Framework folder) to generate a proxy class which has all the entity bindings .. now we could simply drop the generated file into our project. Our project structure looks something like this .. the “Package.appxmanifest” file quite simply houses all your App configuration:

The UI

Don’t you wish you were working with a Team where every member is a Ninja? Well, let’s say that’s the case & we shall shoot for our Metro App UI to be something simple, like this:

The above screenshot is our Demo app running in the normal full-screen immersive UI mode. Notice how it is completely Chrome-free & puts content first. Just because we can clutter the UI with all kinds of controls, doesn’t mean that we should, right?

So, in our app, there is one & only XAML page that does the above rendering, that being MainPage.xaml. Here’s the XAML that drives the UI:

     1: <UserControl x:Class="TeamMetro.MainPage"         2:  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         3:  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         4:  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         5:  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         6:  mc:Ignorable="d"         7:  d:DesignHeight="768" d:DesignWidth="1366">         8:           9:  <!--Content-->         10:  <Grid x:Name="LayoutRoot" Background="Chocolate">         11:               12:      <StackPanel Background="Transparent" VerticalAlignment="Center" x:Name="fullMode">         13:      <ListBox Name="fullTeamList" Margin="40" ItemsSource="{Binding WCFTeam}" Foreground="Blue" Background="Transparent">         14:          <ListBox.ItemTemplate>         15:              <DataTemplate>         16:                  <StackPanel Margin="400,0,0,40" VerticalAlignment="Center" Orientation="Horizontal">         17:                      <Image Source="ninja.png" Height="75" Width="75"/>         18:                      <TextBlock Text="{Binding Name}" Margin="10,0,0,0" FontSize="26" VerticalAlignment="Center"/>         19:                      <TextBlock Text=" -- aka " FontSize="22" VerticalAlignment="Center"/>         20:                      <TextBlock Text="{Binding TwitterHandle}" Margin="10,0,0,0" FontSize="22" VerticalAlignment="Center"/>         21:                  </StackPanel>         22:              </DataTemplate>         23:          </ListBox.ItemTemplate>         24:      </ListBox>         25:      </StackPanel>         26:           27:  </Grid>            28:           29: </UserControl>    

So, we essentially defined a ListBox & we are expecting it to be bound to some collection of Team members with appropriate property values. Did you notice that except for a few namespaces, the XAML markup is very similar to what we are used to seeing in Windows Phone & Silverlight applications? This is what should make you feel right at home .. there are off course, some Windows 8 specific UI controls, which can cover in a subsequent blog post.

Another point to note is that the XAML markup for Windows 8 Metro apps can be borrowed to a large extent if you have existing Windows Phone or Silverlight applications. In fact, if you have a a Windows Phone app in the Marketplace and simply want to port to over to the Windows 8 App Store, there are a fixed set of guidelines to do so, as explained here. However, we might need to be wary of a plain port-over & the UX of our Metro apps, since the Windows 8 tablet form factor will have substantially more real estate, which should absolutely be utilized. In our demo app, you see a simple list of data items consuming OData; while ok for a demo (see I excuse myself ), you ideally want to provide your users with a richer experience.

Fetching the Data

Now, this will be very interesting. One of the buzz terms with Windows Phone/Silverlight and now heavily so with Windows 8 is “fast & fluid” – which essentially means that your App may be doing some expensive operation; but to the end user interacting through Touch, it should always seem responsive. Asynchronous Programming is certainly not new & Windows Phone development very much enforces that; however, it may be a little painful at times, specially if you are marshaling data between threads or writing callback after callback.

Win RT enforces that any operation that might take more than 50 ms be done asynchronously, and this off course, extends to every web request our app might make. So, we are looking to fetch the OData feed asynchronously without blocking the UI thread.

Now, C# 5.0 running on .NET 4.5 framework tries to make it easy for us developers to do asynchronous programming through Async-Await patterns, so that we can get around not writing callback after callback or have to deal with thread marshaling. This however is a wider topic than this post – so please allow me to point you to some resources that should help understand this better:

I was intrigued about Asynchrony and wrote a lengthy post; if interested, you’ll find it HERE. So, let’s look at a few ways we can fetch data:

The Pure HTTP Way

In this approach, we make a basic HTTP Get call to our OData service endpoint & fetch data as Atom. This is simple, but we would have to manually parse the response to pluck out the data contents for binding to UI. Here’s some sample code .. watch the use of async-await to achieve asynchrony:

     1: private async void LoadTeamThruXML()         2: {         3:     // Get Atom over HTTP.         4:     var client = new HttpClient();         5:     Uri teamDataURI = new Uri("Your_OData_Endpoint");         6:           7:     try         8:     {         9:         HttpResponseMessage response = await client.GetAsync(teamDataURI);         10:           11:         string xmlResponse = response.Content.ReadAsString();         12:         XDocument xDoc = XDocument.Parse(xmlResponse);         13:           14:         // Do appropriate parsing.         15:         // LINQ to XML.         16:         IEnumerable<Team> teamCollection = from teamMember in xDoc.Descendants("Entry")         17:                                            select new Team         18:                                            {         19:                                                Name = teamMember.Element("Name").ToString(),         20:                                                TwitterHandle = teamMember.Element("TwitterHandle").ToString()         21:                                            };         22:           23:         // Bind to UI.         24:     }         25:     catch (Exception ex)         26:     {         27:         // Oopsie         28:     }         29: }    

The Threaded Way

One important aspect about Asynchrony is that it does not always mean multi-threading, as in parallelism. All the goodness of the Task Parallel Library is now built in and as we await on a Task, the underlying implementation may or may not spin up a new thread based on computing cycles needed. The point is, you should not have to care as a developer. However, if using Task.Factory, you are essentially carrying out synchronous operations on a worker thread without blocking the UI. So, here’s another way to fetch data .. notice how we can return a strongly-typed collection of Team members:

     1: private async void LoadTeamThruOData()         2: {         3:     var client = new Demo(new Uri("Your_OData_Endpoint"));         4:              5:     var results = await Task<IEnumerable<Team>>.Factory.StartNew(() => FetchOData());         6:           7:     // This fires only after we have a response back.          8:     this.ParseAndBindData(results);         9: }         10:           11: private IEnumerable<Team> FetchOData()         12: {         13:     Demo client = new Demo(new Uri("Your_OData_Endpoint"));         14:     return client.Teams.Execute();         15: }    

Wrapped APM Way

Asynchronous Programming Model (APM) is the traditional way of doing asynchrony through BeginXX/EndXX patterns; but this lead us to write a lot of callbacks. In the new world, APM calls can be wrapped inside an Async-Await pattern to make asynchronous requests. Let’s look at some code:

     1: private async void LoadTeamThruOData()         2: {         3:     var client = new Demo(new Uri("Your_OData_Endpoint"));         4:             5:     var results = await Task<IEnumerable<Team>>.Factory.FromAsync(client.Teams.BeginExecute(AnotherEndContinuation, client), ContinuationDelegate);         6:           7:     // This fires only after we have a response back.          8:     this.ParseAndBindData(results);         9: }         10:           11: Func<IAsyncResult, IEnumerable<Team>> ContinuationDelegate = EndContinuation;         12: private static IEnumerable<Team> EndContinuation(IAsyncResult result)         13: {         14:     Demo client = (Demo)result.AsyncState;                     15:     return client.Teams.EndExecute(result);         16: }         17:           18: private static void AnotherEndContinuation(IAsyncResult result)         19: {         20:    // Do nothing here.         21: }    

Now, the above code might look a little clunky, but the wrapping of the APM methods can be done through an Extension method to make reuse easier. Eventually with future updates, if we have a method Foo in our custom WCF Service, proxy integration should generate three method endpoints – BeginFoo, EndFoo & FooAsync. It is the last that we shall use comfortably with Async-Await patterns.

Data Updates?

So, by now we know how to fetch OData into a Windows 8 Metro app using XAML/C# and bind the results to a simple list. But what if we wanted to perform updates against the data source? That is absolutely possible since we are dealing with an OData service here. Unless blocked at the service side, OData will support full CRUD operations through the DataServiceContext & DataServiceCollection classes.

Now, let’s think about the UI for second. Just because we can put buttons & controls for data updates all over, doesn’t mean that we should. Common tasks should be presented in a minimalist fashion & accessible when needed. Accordingly, we revert to using the Windows 8 Metro Application Bar to add some metro buttons for allowing data manipulation. Let’s shoot for a UI like below .. we shall talk more about the Application Bar in the next article:

So, what happens when the user hits the Application Bar buttons? Simple – just like in Windows Phone, you can have event handlers assigned to each. Let’s see how we may delete a record & have it reflected in the OData data source, that is our Table data in SQL Azure. Here’s some code:

     1: private void DeleteButton_Click(object sender, RoutedEventArgs e)         2: {         3:     if (this.fullTeamList.SelectedItem != null)         4:     {         5:         Team selectedTeamMember = (Team)this.fullTeamList.SelectedItem;         6:                                  7:         // LINQ to Context.         8:         var client = new Demo(new Uri("Your_OData_Endpoint"));         9:         var teamMemberToDelete = (from TeamMember in client.Teams         10:                                   where TeamMember.Name == selectedTeamMember.Name         11:                                   select TeamMember).First();         12:           13:         // Delete backend entity.         14:         client.DeleteObject(teamMemberToDelete);         15:         client.BeginSaveChanges(new AsyncCallback(SaveDoneCB), client);                        16:     }         17: }         18:           19: private void SaveDoneCB(IAsyncResult asyncResult)         20: {         21:     // Any error handling.         22: }    

What about adding/editing records? Exactly the same way. Off of our “client” object above (which is in essence the DataServiceContext), you’ll see methods like AddObject & UpdateObject to insert/manipulate table records and then you simply need to call SaveChanges asynchronously to update the backend DB. You’ll see some sample code in the downloadable solution; but why not give it a shot yourself? You can get a lot of hints about how to perform CRUD operations against OData from a Windows Phone application from mine & Michael Crump’s articles HERE & HERE. So, go ahead & throw in a fresh XAML page to capture inserts/edits & fire away .

Summary

In this article, we talked about how to get started with Windows 8 Metro Apps with XAML/C# and we went on to consumption/updates of OData from a Windows 8 Metro application. We looked at a few techniques on how to do asynchronous programming in Windows 8 using the new C# 5.0 constructs of Async-Await. In the next part of article, we shall talk about taking the first steps towards making your Metro Apps feel at home in the Windows 8 Operating System.

I would appreciate any comments or concerns or how things could be done better. Thanks for reading & happy coding.

Cheers SilverlightShow!

About the Author

Windows Store details announced and a contest

Wed, 07 Dec 2011 04:34:40 GMT

Today there was an event in San Francisco which introduced the Windows Store for Windows apps as well as some details on revenue sharing and policies. As a part of that Antoine LeBland, Vice President for Windows Web Services, also opened up a new dialog about the store specifically in a new blog Windows Store for developers. This blog will help developers learn about aspects of the store as well as serve as a place for dialog between the store teams and you, the app developer. I think it is great that the store team is following in the footsteps of the Building Windows 8 blog and reaching out to share some of the high-level and, hopefully, behind-the-scenes aspect that makes up the store. I look forward to future posts on the blog.

The inaugural post reviews the events that transpired today sharing some information for those who were not there, as well a a video clip of some of the highlights from Antoine and Ted:

The key store highlights discussed in the post are:

Designed for discovery – store will be searchable and permalink-able (is that a word?)
Flexible business models – including in-app trial upgrades, etc. as well as flexible payment options
Transparent terms – clear understanding of the terms as a developer/business
Best economics – you’ll have to read the post about the revenue split and advantages after certain milestones

In addition to this news, Microsoft announced a First Apps Contest. The basics of this contest are that you have the opportunity to show your awesomeness to the world first. The contest will select eight (8) winning apps to be the very first app in the Windows Store when it opens. You’ll also get some goodies as a winner such as a Samsung Windows Developer PC and 2-years worth of subscription to the store as a developer.

The contest starts now, so be sure to read the rules and register and learn about what is required of you. This is a great opportunity to be a first-mover in the Windows Store which will have some incredible reach opportunities for you as a developer.

I can’t wait to see the types and compelling experiences that developers will create with our platform…get started!

tags: win8, windows 8, windows, windows store, first apps, xaml, metro

This work is licensed under a Creative Commons Attribution By license.

10 Laps around Silverlight 5 (Part 9 of 10)

editorial@silverlightshow.net (Michael Crump ) — Tue, 06 Dec 2011 12:27:00 GMT

This article is sponsored by Telerik RadControls for Silverlight. Related content from the sponsor:

Check out what's new!

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

This article is Part 9 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below.

More resources...

1) Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.

To refresh your memory on what Silverlight is:

Microsoft Silverlight is an application framework for writing Rich Internet Applications.

The run-time environment is available as a plug-in for most web browsers and works on a variety of operating systems including Windows, Mac and Linux.

To recap what we learned in the previous section:

We learned how you could specify a break point inside of a Binding Expressions in Silverlight 5. We also learned how you could use this same functionality inside of Silverlight 4 with the Silverlight 5 SDK installed.
We then created a sample application that contained a binding error and took a look at the output window to investigate it further. We were then able to determine the source of our error and correct it quickly.
We finished up with listing several productivity and performance improvements in Silverlight 5 that you may not be aware of.

In this article, I am going to discuss several new features/controls such as Double and Triple click support, PivotViewer and ComboBox Type-Ahead. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

2) Binding- Ancestor Relative Source Binding and Implicit Data Templates.

3) Graphics –XNA 3D API and Improved Graphics Stack.

4) Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.

5) Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.

6) Operating System Integration - Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.

7) Operating System Integration - Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.

8) Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.

9) Controls [This post] - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.

10) Other items - In-Browser HTML, PostScript and Tasks for TPL.

Double and Triple Click Support

Fire up a new Silverlight 5 project and give it any name that you want.

Switch over to the MainPage.xaml.cs and add the following code: (Note: You may not need the MainPage() Method section)

   1: public MainPage()   2: {   3:     InitializeComponent();   4: }   5:     6: private void textBlock1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)   7: {   8:     textBlock1.Text = e.ClickCount.ToString();   9: }

Switch back over to the MainPage.xaml and add in the following code replacing the current Grid:

   1: <Grid x:Name="LayoutRoot" Background="White">   2:       <Border BorderBrush="Black" BorderThickness="1" Margin="52,49,68,74" CornerRadius="10">   3:           <TextBlock Height="152" HorizontalAlignment="Center" x:Name="textBlock1" Text="0" VerticalAlignment="Center" Width="244" MouseLeftButtonDown="textBlock1_MouseLeftButtonDown" Foreground="#FFFF2E2E" FontSize="96" TextAlignment="Center" />   4:       </Border>   5: </Grid>

If we go ahead and run the application then we will see the following application.

PivotViewer

Microsoft’s Silverlight Team defines it as the following: The Silverlight PivotViewer makes it easier to interact with massive amounts of data on the web in ways that are powerful, informative and valuable. I couldn’t agree more. Let’s begin today by creating a SL5 application that uses the PivotViewer control and displays a collection of movies. (Classic example, eh?)

Please note that this sample barely scratches the surface of what you can do with the PivotViewer. I’ve included an official link by Microsoft at the bottom of this post for your reference.

Fire up a new Silverlight 5 project and give it the name PivotViewer.

Switch over to the MainPage.xaml.cs and add the following code:

   1: using System;   2: using System.Linq;   3: using System.Windows;   4: using System.Windows.Controls;   5: using System.Collections.ObjectModel;   6:     7: namespace PivotViewer   8: {   9:     public partial class MainPage : UserControl  10:     {  11:         private ObservableCollection<Movie> Movies;  12:    13:         public MainPage()  14:         {  15:             InitializeComponent();  16:             Movies = new ObservableCollection<Movie>();  17:             for (Int64 i = 0; i < 500; i++)  18:             {  19:                 Movies.Add(new Movie() { Title = "Ice Age" + i.ToString(), CountryOfOrigin = "USA", Description = "Set during the Ice Age.", Director = "Chris Wedge" + i.ToString(), Duration = 90, ReleaseDate = new DateTime(2002, 09, 03) });  20:       21:             }  22:          }  23:    24:         private void UserControl_Loaded(object sender, RoutedEventArgs e)  25:         {  26:             MoviePivot.ItemsSource = Movies;  27:         }  28:     }  29: }

We need to create a new class now named Movie. Inside of that class should look like the following:

   1: using System;   2:     3: namespace PivotViewer   4: {   5:     public class Movie   6:     {   7:         public string Title { get; set; }   8:         public int Duration { get; set; }   9:         public DateTime ReleaseDate{ get; set; }  10:         public string CountryOfOrigin { get; set; }  11:         public string Description { get; set; }  12:         public string Director { get; set; }  13:     }  14: }

Switch back over to the MainPage.xaml and add in the following code replacing everything:

   1: <UserControl x:Class="PivotViewer.MainPage"   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   6:     xmlns:pivot="clr-namespace:System.Windows.Controls.Pivot;assembly=System.Windows.Controls.Pivot"   7:     Loaded="UserControl_Loaded"   8:     mc:Ignorable="d"   9:     d:DesignHeight="300" d:DesignWidth="400">  10:    11:     <Grid x:Name="LayoutRoot" Background="White">  12:         <pivot:PivotViewer x:Name="MoviePivot"  13:                             AccentColor="LightGreen"  14:                             Background="LightGray"  15:                             ControlBackground="LightYellow"  16:                             SecondaryBackground="AntiqueWhite"  17:                             SecondaryForeground="Bisque"  18:                             SecondaryItemValueBackgroundColor="Chocolate" >  19:    20:             <!--Setting PivotProperties-->  21:             <pivot:PivotViewer.PivotProperties>  22:                 <pivot:PivotViewerStringProperty Id="FTitle" Options="CanFilter" DisplayName="Title" Binding="{Binding Title}" />  23:                 <pivot:PivotViewerStringProperty Id="FDuration" Options="CanFilter" DisplayName="Duration" Binding="{Binding Duration}" />  24:                 <pivot:PivotViewerStringProperty Id="FDirector" Options="CanFilter" DisplayName="Director" Binding="{Binding Director}" />  25:    26:             </pivot:PivotViewer.PivotProperties>  27:    28:             <!--Setting data-->  29:             <pivot:PivotViewer.ItemTemplates>  30:                 <pivot:PivotViewerItemTemplate>  31:                     <Border Width="200" Height="200" Background="CadetBlue">  32:                         <StackPanel Orientation="Vertical">  33:    34:                             <StackPanel Orientation="Horizontal">  35:                                 <TextBlock Text="{Binding Title}" FontSize="16" Foreground="White" />  36:                                 <TextBlock Text="(" FontSize="16" Foreground="White" />  37:                                 <TextBlock Text="{Binding Duration}" FontSize="16" Foreground="White" />  38:                                 <TextBlock Text=")" FontSize="16" Foreground="White" />  39:                             </StackPanel>  40:                             <TextBlock Text="{Binding Director}" FontSize="16" Foreground="White" />  41:                             <TextBlock Text="{Binding CountryOfOrigin}" FontSize="16" Foreground="White" />  42:                         </StackPanel>  43:                     </Border>  44:                 </pivot:PivotViewerItemTemplate>  45:             </pivot:PivotViewer.ItemTemplates>  46:         </pivot:PivotViewer>  47:     </Grid>  48: </UserControl>

If we run our application and select a few items then we will see the following screen. As you can tell when the application loaded that it contained 500 items – Wow!

I’ve barely touched on the amount of things that you can do with PivotViewer. If you want to learn more than please visit the Silverlight site located here.

Combo-Box Type Ahead

Another new feature in Silverlight 5 is Combo-Box Type Ahead. This makes choosing items from a long list very simple. Let’s go ahead and build a sample application.

Fire up a new Silverlight 5 project and give it any name that want.

Switch over to the MainPage.xaml.cs and add the following code:

   1: public MainPage()   2: {   3:     InitializeComponent();   4:      var lstDevelopers = new List<string>   5:            { "Michael Crump",   6:               "Pete Brown",   7:               "Victor G.",   8:               "Scott Hanselman",   9:               "Jesse Liberty",  10:               "Shawn Wildermuth",  11:               "Scott Gu",  12:               "Joel Cochran",  13:               "Kunal Chowdhurry" };  14:             cbDevelopers.ItemsSource = lstDevelopers;  15: }

Switch back over to the MainPage.xaml and add in the following code replacing the existing Grid:

   1: <Grid x:Name="LayoutRoot" Background="White">   2:        <ComboBox x:Name="cbDevelopers" Height="40" Width="150" Margin="20" />   3: </Grid>

If we run our application and begin typing then we will see the ComboBox automatically highlights the row that matches our selection.

Conclusion

At this point, we have seen how you would use Double and Triple click support, PivotViewer and ComboBox Type-Ahead. In the next and final part of the series, I am going to take a look at several new features shipping with Silverlight 5 including : In-Browser HTML, PostScript and Tasks for TPL. Again, thanks for reading and please come back for the next part.

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

How to give an element focus when something happens?

Mon, 05 Dec 2011 21:44:00 +0100

I had a very simple problem: On loading of particular screen I wanted to give a TextBox focus. It’s freaking easy to do this in the code behind. Most of my applications are actually MVVM applications and in that case it’s not something for the ViewModel, it’s logic that belongs to the view. But how about a Behavior?

I want to give a specific control focus when something happens on something else. So that should be a TargetedTriggerAction<T>, T should be Control, because that’s something you can give focus. How easy can it be?

public class FocusOnEvent : TargetedTriggerAction<Control>{    protected override void Invoke(object parameter)    {        Target.Focus();    }}

Is that all? Yes it is, or actually, I want to make it even easier, add the default trigger using the DefaultTriggerAttribute. Default should be the Loaded event, so let’s add that single line.

[DefaultTrigger(typeof(FrameworkElement), typeof(EventTrigger), "Loaded")]public class FocusOnEvent : TargetedTriggerAction<Control>{    protected override void Invoke(object parameter)    {        Target.Focus();    }}

Now we have this easy code, how do we use it? Just add a little bit of xaml to your page / control, just like any other behavior.

<i:Interaction.Triggers>    <i:EventTrigger>        <Behaviors:FocusOnEvent TargetName="TitleTextBox" />    </i:EventTrigger></i:Interaction.Triggers>

Some second thoughts, is it required to take the Safe event Detachment base class for Windows Phone Behaviors by Joost van Schaik into consideration? No it’s not required, because we’re not manually attaching handlers to the events, that’s all done by the TargetedTriggerAction itself. Hope you guys think this little bit of code is useful.

Windows Phone 7.5 - Use Background agents

editorial@silverlightshow.net (Andrea Boschin ) — Mon, 05 Dec 2011 12:26:00 GMT

One of the most important features added in Windows Phone 7.5 is the multithreaded environment. This missing feature was very criticized in the previous version, but the main reason of its lack was the high battery consumption that is usual in multithread phones. In this release the team has agreed to add the multithread capability but it worked hard to reach a good balance between multithreading and battery life. This is the main reason for the introduction of Background Agents that are a way to manage the battery drain in junction with parallel work made by running applications.

Download the source code

Don't miss...

Understanding Agents

Starting from the release of OS7.5, the developer can create background agents. As the name suggests, an agent works in background, hosted in a separated thread and is able to make some work. Important to say is that an agent must be initiated by an application. The application has to register the agent on the ScheduledActionService then it can continue its work or exit and the agent will be called by the Scheduler seamless. This imply that agents are not daemons; there is not any way to register and run the agent like a gui-less application that perform its work continuously. This just because agents are designed with battery life in mind so they only can be scheduled to run in two ways:

PeriodicTask – These agents are called every 30 minutes (the timeout is fixed and cannot be changed). They can run for a very short timeframe and perform lightweight tasks
ResourceIntensiveTask – These agents are triggered by a set of requirements like processor activity, network, power and so on. They can work for a relatively long period.

The limits imposed to the developer are really heavy; You can only register two background agents per application, and they have to be of different type. This means your application can only have a single PeriodicTask and a single ResourceIntensiveTask.

To create the background agent you can start in the same way we did when I’ve explained the Audio Playback Agent. In Visual Studio you can open the Add New Project dialog and choose the Windows Phone Scheduled Task Agent. This option will create a new project and a ScheduledAgent class that is already configured and ready to be filled with your implementation. Then, when you connect this project with the main application, the WMAppManifest.xml file is modified with the reference to the class. Differently from an Audio Playback Agent this does not suffice to make your agent up and running. You have obviously to implement you agent logic but you have also to register the agent with the ScheduledActionService:

   1: private void RegisterTasks()   2: {   3:     string taskName = ScheduledAgent.Name;   4:     5:     PeriodicTask existing = ScheduledActionService.Find(taskName) as PeriodicTask;   6:     7:     if (existing != null)   8:     {   9:         ScheduledActionService.Remove(taskName);  10:     }  11:    12:     PeriodicTask task = new PeriodicTask(taskName)  13:     {  14:         Description = "Download local images from panoramio"  15:     };  16:    17:     ScheduledActionService.Add(task);  18: }

This code may be added to the App.xaml.cs and its purpose is to check if an instance of the agent already exists before adding it to the ScheduledAgentService. The service accept an instance of PeriodicAgent or ResourceIntensiveTask but the sole reference to your implementation is in the taskName that has to be the name specified in the WMAppManifest.xaml. The PeriodicTask, I used in this example, has some other properties in addition to Description but none of them let you specify the timing of the schedule. Unfortunately it is fixed to 30 minutes.

Create an agent

Implementing the agent is very straightforward. The class that implements the agent is inherited by ScheduledTaskAgent and it exposes an OnInvoke method. This method is called every time the scheduler needs to execute your code. The method provide a single parameter that is useful to know some information about the task that is running. As an example you can know the LastScheduledTime or the LastExitReason that contains the following values:

   1: public enum AgentExitReason   2: {   3:   None,   4:   Completed,   5:   Aborted,   6:   MemoryQuotaExceeded,   7:   ExecutionTimeExceeded,   8:   UnhandledException,   9:   Terminated,  10:   Other,  11: }

Another important reason to use the provided parameter is to understand if your task is running as a PeriodicTask or ResourceIntensiveTask. This is useful when you register the sample agent for both the types. You can understand when you are in one case or in the other examining the underlying type:

   1: if (task is PeriodicTask)   2: {   3:     // do the periodic job   4: }   5: else   6: {   7:     // do the resource intensive job   8: }

You have to be careful when you implement the agent because the type you choose gives you some limits. Particularly the PeriodicTask is designed to be lightweight and the code you put inside the OnInvoke method must have a very light thumbprint in terms of elaboration time and used resources. As the AgentExitReason testifies, the runtime can kill your work in case of MemoryQuotaExceeded and in case of ExecutionTimeExceeded. A periodic task can run only for about 25 seconds and can allocate a maximum of 5 MB of memory. A resource intensive task instead can run for about 10 minutes before the runtime kill it.

Given these limits and the timeout of 30 minutes between one execution an the other, you can easily understand that debugging an agent may become a nightmare. If you run the agent in its normal context you have to wait for 30 minutes before the breakpoints are hit. On the other side if you test the agent outside of the context you can easily overwhelm the resource limits and then discover that your agent won’t run when executed by the scheduler. To simplify the debug tasks it exists a LaunchForTest method into the ScheduledActionService. This method let you specify a timeout, useful to exit the application manually, then it runs the agent once without waiting for the expiration of the regular timeout. You can only debug the agent once per session but this method is important to speed-up your work.

ScheduledActionService.LaunchForTest(task.Name, TimeSpan.FromSeconds(5));

A funny example

To demonstrate the use of agents I’ve created an interesting and beautiful example. If you used google maps at least once, you know about Panoramio. It is a funny service that is able to show geo referenced photos over the google map. For this example I’ve managed to acquire the GPS position of the device when the agent run, download the available images and populate its tile with one randomized on the first twenty. The effect id pretty beautiful, expecially if you are moving during a travel because once every 30 minutes the tile is updated with a photo of a place located near you.

In the Invoke method I use the GeoCoordinateWatcher to read the current position. The problem here is about the execution model of the GeoCoordinateWatcher. It is made to notify when the position has changed raising an event. Here is the code I’ve prepared:

   1: protected override void OnInvoke(ScheduledTask task)   2: {   3:     GeoCoordinateWatcher watcher = new GeoCoordinateWatcher(GeoPositionAccuracy.High)   4:     {   5:         MovementThreshold = 10   6:     };   7:     8:     watcher.PositionChanged += (s, e) =>   9:     {  10:         watcher.Stop();  11:    12:         GeoCoordinate position = e.Position.Location;  13:    14:         if (position.IsUnknown)  15:         {  16:             Random rnd = new Random(DateTime.Now.Millisecond);  17:             position = this.PointOfInterests[rnd.Next(0, this.PointOfInterests.Length - 1)];  18:         }  19:    20:         this.UpdateImage(position);  21:     };  22:    23:     watcher.Start(false);  24: }

In this snippet I initialize the GeoCoordinateWatcher, then I attach the PositionChanged event. This event immediately notifies the new position and it is here I retrieve the current position. In the Positionchanged event I check the retrieved position; if it is Unknown I use a special array, filled with a number of random positions, to provide a random location to display.

In the UpdateImage I use the Panoramio’s API to retrieve the available images using the Json format. In the GetRandomLocalImage I raffle an image from the set I found so in case of repeated update the photo will change every time:

   1: private void UpdateImage(GeoCoordinate position)   2: {   3:     if (position != null)   4:     {   5:         PanoramioService.GetRandomLocalImage(   6:             position.Latitude,   7:             position.Longitude,   8:             s =>   9:             {  10:                 this.LoadImage(s);  11:                 this.NotifyComplete();  12:             },  13:             ex => this.NotifyComplete());  14:     }  15: }

Important to say, no matter whether I found or not an image, I call the NotifyComplete method. This method let the runtime know that the work is done. Finally in the LoadImage method I use the new API dedicated to the tiles to change the background image and the title according with the found image:

   1: private void LoadImage(PanoramioImageResult image)   2: {   3:     ShellTile tile =   4:         ShellTile.ActiveTiles.FirstOrDefault();   5:     6:     if (tile != null)   7:     {   8:         tile.Update(   9:                     new StandardTileData  10:                     {  11:                         Title = image.Title,  12:                         BackgroundImage = image.File,  13:                         Count = null  14:                     });  15:     }  16: }

A beautiful opportunity

There is no doubts that Background Agents are something missing in OS7.0. There’s a lot of cases when you can enrich your applications with some background notifiers and tasks. I hope in the next releases it will be removed some of the annoying limits, first of all the fixed 30 minutes schedule, that is really hard to understand, also with the purpose of sparing battery. I think a little configurability would be better.

Silverlight Show: 10 Laps around Silverlight 5 (Part 8 of 10)

Fri, 02 Dec 2011 16:24:23 GMT

In this article, a discussion about productivity and performance enhancements in Silverlight 5 including: XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

Introduction to SL5 – provides a brief history of Silverlight and relevant links.
Binding - Ancestor Relative Source Binding and Implicit Data Templates.
Graphics - XNA 3D API and Improved Graphics Stack.
Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.
Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.
Operating System Integration Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.
Operating System Integration Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.
Productivity and Performance - [This Post] - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.
Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.
Other items - In-Browser HTML, PostScript and Tasks for TPL

XAML Binding Debugging

XAML Binding Debugging, is one of the most important features in the Silverlight 5. We have all been stuck with Binding expressions at one point or another and wanted an easier way to debug them. Now anywhere that you see a {Binding} expression you can put a break point on it just like your typical C# code. Let’s take a look at a sample:

Fire up a new Silverlight 5 project and give it any name that you want.

Go ahead and add a new class to the project named Podcast.cs and add the following code.

   1: public class Podcast

   2:    {

   3:        public string Description { get; set; }

   4:        public DateTime ReleaseDate { get; set; }

   5:        public Uri Link { get; set; }

6:

   7:        public Podcast(string description, DateTime releasedate, Uri link)

   8:        {

   9:            Description = description;

  10:            ReleaseDate = releasedate;

  11:            Link = link;

  12:        }

  13:    }

Let’s switch back over to the MainPage.xaml.cs and add the following code:

   1: public MainPage()

   2: {

   3:     InitializeComponent();

   4:     Loaded += new RoutedEventHandler(MainPage_Loaded);

   5: }

6:

   7: void MainPage_Loaded(object sender, RoutedEventArgs e)

   8: {

   9:     this.DataContext =

  10:         new Podcast("This Developer's Life - Criticism",

  11:             new DateTime(2011, 4, 21),

  12:             new Uri("http://thisdeveloperslife.com/post/2-0-1-criticism", UriKind.Absolute)

  13:             );

14:

  15: }

Switch back over to the MainPage.xaml and add in the following code replacing the current Grid:

   1: <Grid x:Name="LayoutRoot" Background="White">

   2:        <StackPanel Orientation="Vertical">

   3:            <TextBlock Text="{Binding Description}" />

   4:            <TextBlock Name="txtReleaseDate" Text="{Binding ReleaseDate}" />

   5:            <HyperlinkButton Content="Listen to this Episode" NavigateUri="{Binding Lik}" TargetName="_blank" />

   6:        </StackPanel>

   7: </Grid>

While here, go ahead and put a break point on the “Hyperlink" button line, which you can do by clicking outside its margin as shown below:

Notice the Red Circle and the highlighted “Binding” word? The Visual Studio 2010 debugger will stop once the XAML parser hits that line.

5 Minute Intro to HTML5 Canvas

Thu, 01 Dec 2011 22:46:12 GMT

This month’s Papa’s Perspective shows you how to use some of the fundamental aspects of the HTML5 canvas to draw. I go over some 101 level functions such as arc, beginPath, lineCap, lineJoin, lineTo, lineWidth, moveTo, stroke, strokeStyle and more. The source code you can download shows you how you can draw letters using these functions, and includes some scaling calculations to make it all a bit easier.

A bit of holiday fun

Enjoy!

Does Windows 8 support Gif images and Animated Gif images?

Tue, 29 Nov 2011 21:51:55 +0100

To some of us it may sound like a strange question, but developers which are used to Silverlight or Windows Phone development know why I ask this question. In both Silverlight and Windows Phone Gif images aren’t directly supported. Don’t ask me why, I don’t know why. Luckily Silverlight and Windows Phone developers are helped by an open source project called Image Tools which enables support for Gif and Animated Gif.

Windows 8 – HTML5 + JS

For a starter I just downloaded an ordinary gif-image from the internet and with no knowledge about how to add an image to a Windows 8 application I used my web-knowledge.

<img src="/images/window.gif" />

And yes it does work. What about an animated gif? So I recall an interesting animated gif on Shawn Wildermuth’s blog, his head-shot. So without do anything else than changing the source of the image tag I created it started working. A surprise? Not really I already heard that the rendering engine for Windows 8 applications that are build in HTML5 + JS is based on IE, so this is what I did expect.

Windows 8 – XAML + C#

So I used my Silverlight knowledge to do in XAML what I did in HTML5, add an image.

<Image Source="/Images/window.gif" />

A really fast surprise it started working in the design view of the xaml document even before I ran the project. And also after running the application it seems to work perfectly. And the animated gif? It appears in the designer as well, but doesn’t animate in there. Also when running the application the animation doesn’t work.

Just a quick thought: Silverlight doesn’t support gif at all, what about WPF? After some googling it seems that WPF does support gif images, but not really the animated gifs. But there are people who created solutions that should work to enable animated gifs in WPF. So let’s see how much of that is possible in Windows 8.

The solution for WPF makes use of the GifBitmapDecoder which isn’t there in Windows 8. But I found something that sounds similar the BitmapDecoder. I tried to get the a small proof-of-concept working, but failed so far. I invite you to solve this Animated Gif problem using the information I’ve given. Please share your solution with the readers of this post.

Conclusion

We all know WinRT isn’t finished, we are just looking at a developer preview. If I recall it correctly WinRT should have the same features in XAML+C# as in HTML5+JS. Will this small difference in features be tackled in the final release?

10 Laps around Silverlight 5 (Part 8 of 10)

editorial@silverlightshow.net (Michael Crump ) — Tue, 29 Nov 2011 12:18:00 GMT

This article is sponsored by Telerik RadControls for Silverlight. Related content from the sponsor:

Check out what's new!

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

This article is Part 8 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below.

More resources...

1) Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.

To refresh your memory on what Silverlight is:

Microsoft Silverlight is an application framework for writing Rich Internet Applications.

The run-time environment is available as a plug-in for most web browsers and works on a variety of operating systems including Windows, Mac and Linux.

To recap what we learned in the previous section:

We learned how you could specify a default filename when using the SaveFileDialog prompt. We also discussed how you could run the application in elevated trust to prevent the security warning from being displayed.
We then took a look at 64-bit browser support that is included with Silverlight 5 and learned that if your user is using a 64-bit browser then they will be redirected to a location to download the Silverlight 5 x64 runtime.
We wrapped up a short section on new and improved power awareness for media applications.

In this article, I am going to discuss productivity and performance enhancements in Silverlight 5 including: XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

2) Binding- Ancestor Relative Source Binding and Implicit Data Templates.

3) Graphics –XNA 3D API and Improved Graphics Stack.

4) Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.

5) Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.

6) Operating System Integration - Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.

7) Operating System Integration - Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.

8) Productivity and Performance [This post] - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.

9) Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.

10) Other items - In-Browser HTML, PostScript and Tasks for TPL.

XAML Binding Debugging

Fire up a new Silverlight 5 project and give it any name that you want.

Go ahead and add a new class to the project named Podcast.cs and add the following code.

   1: public class Podcast   2:    {   3:        public string Description { get; set; }   4:        public DateTime ReleaseDate { get; set; }   5:        public Uri Link { get; set; }   6:     7:        public Podcast(string description, DateTime releasedate, Uri link)   8:        {   9:            Description = description;  10:            ReleaseDate = releasedate;  11:            Link = link;  12:        }  13:    }

Let’s switch back over to the MainPage.xaml.cs and add the following code:

   1: public MainPage()   2: {   3:     InitializeComponent();   4:     Loaded += new RoutedEventHandler(MainPage_Loaded);   5: }   6:     7: void MainPage_Loaded(object sender, RoutedEventArgs e)   8: {   9:     this.DataContext =  10:         new Podcast("This Developer's Life - Criticism",  11:             new DateTime(2011, 4, 21),  12:             new Uri("http://thisdeveloperslife.com/post/2-0-1-criticism", UriKind.Absolute)  13:             );  14:    15: }

Switch back over to the MainPage.xaml and add in the following code replacing the current Grid:

   1: <Grid x:Name="LayoutRoot" Background="White">   2:        <StackPanel Orientation="Vertical">   3:            <TextBlock Text="{Binding Description}" />   4:            <TextBlock Name="txtReleaseDate" Text="{Binding ReleaseDate}" />   5:            <HyperlinkButton Content="Listen to this Episode" NavigateUri="{Binding Lik}" TargetName="_blank" />   6:        </StackPanel>   7: </Grid>

While here, go ahead and put a break point on the “Hyperlink" button line, which you can do by clicking outside its margin as shown below:

Notice the Red Circle and the highlighted “Binding” word? The Visual Studio 2010 debugger will stop once the XAML parser hits that line.

Please note that if you try to put a breakpoint on any line outside of the “Binding” keyword, then you will get a message saying, “This is not a valid location for a breakpoint” at the bottom of your screen:

We are now ready to begin debugging, so, press “F5” on your keyboard to begin. You will notice that the Binding breakpoint was hit. If you examine your Locals window then you will see the following:

It looks like we have an error in our Binding statement that is telling us the property ‘Lik’ does not exist on the class called Podcast. If you continue running the application then you will quickly notice that the webpage launches but the “Listen to this Episode” hyperlink does not work.

If we take a quick look at our Podcast class then we will notice that the property is actually called Link. If we go back to our MainPage.xaml and change

   1: <HyperlinkButton Content="Listen to this Episode" NavigateUri="{Binding Lik}" TargetName="_blank" />

   1: <HyperlinkButton Content="Listen to this Episode" NavigateUri="{Binding Link}" TargetName="_blank" />

and run our application again it will work properly.

It is very easy to debug Binding expressions now with that feature. Another undocumented feature is that if you have Silverlight 5 installed then you can also debug your Silverlight 4 binding statements! Sweet!

Productivity and Performance Improvements

Silverlight 5 contains many additional performance improvements that you may not be aware of. I have decided to create a short list here:

Reduced network latency by using a background thread for networking.
Hardware acceleration is enabled in windowless mode with Internet Explorer 9.
XAML parser improvements that speed up startup and runtime performance.
Support for 64-bit operating systems as discussed in part 7 of this series.
Multi-core JIT for improved startup time.
Increased performance of hardware decoding and presentation of H.264 media for lower-power devices.
Text layout performance improvements

As you can see the Silverlight Team has been hard at work not only adding additional features to Silverlight 5 but improving performance all around.

Conclusion

At this point, we have seen how you would debug binding statements using Silverlight 5’s built-in XAML debugger. We also looked at several productivity and performance improvements in Silverlight 5. In the next part of the series, I am going to take a look at several new controls/features shipping with Silverlight 5 including : Double and Triple click support, PivotViewer and ComboBox Type-Ahead. Again, thanks for reading and please come back for the next part.

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

Entity Framework 4.1 Code First Book Review

Mon, 28 Nov 2011 19:39:04 GMT

I recently had an opportunity to review an advance copy of Julie Lerman and Rowan Miller's new book "Programming Entity Framework 4.1 Code First". In short, this is a fantastic book that is a quick read. Read more about my review in Papa's Perspective.

Silverlight and Sharepoint working together: a Silverlight menu for Sharepoint - Part 2

editorial@silverlightshow.net (Walter Ferrari ) — Mon, 28 Nov 2011 13:56:00 GMT

In the first part of the article I introduced the matter, i.e. adding a Silverlight menu in Sharepoint. The first solution presented, defined as “the client approach”, has a major defect: it cannot be used for anonymous-enabled sites. In this second part we will see another way (that I called the “server approach”) in order to build a Silverlight menu for Sharepoint that can be used also by anonymous users. To make this new approach clearer I will introduce another few general concepts regarding the Sharepoint platform. As previously, they will be marked with a specific icon and Sharepoint developers can skip these parts.

Don't miss...

($0.99)

The server approach

An alternative solution for the anonymous – enabled menu is illustrated in the picture below:

Why calling it “server approach”? Because the phase of retrieving the hierarchy of our Sharepoint site is made by code which is running on the server. And who is the owner of this code portion? The answer is: the web part hosting the Silverlight application. Let me take a while to recap some basic concepts I explained in my first article on this series Sharepoint and Silverlight working together. In that article we sectioned the structure of the Silverlight custom web part we are using here to inject the Silverlight application into a Sharepoint page. We have seen that it is a specialized Visual Studio template which helps us create a web part capable of hosting a Silverlight application. The Silverlight application itself is embedded in a <div> tag inside the custom control which represents the web part. This web part is defined as “sandboxed visual web part” i.e. a “Sharepoint 2010 Visual Web Part” with limited power.

A Silverlight developer could feel a bit bewildered when hearing about visual, sandboxed web parts. In the Sharepoint context, a Web Part is conceptually nothing other than an ASP.NET Web Part. It is an ASP.NET user control which acts as a black box that you can place in one of the zones allowed in the UI layout of a page. Although there is a specific namespace (Microsoft.WebPartPages.WebPart) for the web parts, it is used in rare cases. As usual you can build your own Web Part deriving from System.Web.Ui.WebControls.WebPart. Sharepoint 2010 introduced a few new project templates for Visual Studio 2010, one of these is called “Visual Web Part”. This template creates a ready-to-deploy Web Part with a built-in user control. Editing the user control in design mode or via code behind you can enrich your pages with new features.

The term “sandboxed” is used in Sharepoint 2010 to describe a restricted environment. A “sandboxed solution” is something that can have access only to a subset of the Sharepoint server object model and of the .NET 3.5 assemblies (btw Sharepoint 2010 does not use .NET 4.0) and that runs in a restricted code access security policy. Furthermore, server farm admins can regulate resource usage limits for these solutions. A Visual Web Part is not a sandboxed solution. That’s probably why in the Visual Studio Sharepoint Power Tools add-on a new project template called “Sandboxed Visual Web Part” has been added. A “Silverlight Custom Web Part” is a “Sandboxed Visual Web Part” hosting a Silverlight application, nothing more than that.

Coming back to the picture above, I put the retrieval of the hierarchy under the Sharepoint side because we will do it by invoking the Server Object Model in a code running on server side. After the hierarchy has been provided it is then put into a custom List (the basic data container of Sharepoint) using a nice technique called “Modified Preorder Tree Traversal” that we will see later. Finally, the custom List containing the menu hierarchy can be read by the Silverlight application using the Client Object model every time the cache expires. Why using a custom list? Because we can set anonymous access to this list. This allows a Silverlight application to read the List also in the case in which we are not logged in. Don’t forget that the Silverlight app uses the default credentials when it queries the server.

Retrieving the hierarchy of the site

There is more than one way to get the hierarchy of a Sharepoint site collection. You can use an existing Site Map provider or create your own or, as in this case, use a built-in Sharepoint control, i.e. the SPHierarchyDataSourceControl which provides hierarchical views of Sharepoint sites, lists, and folders. It is the same control used for the “tree view” navigation system mentioned in the first part of this article. Extracting the hierarchy from this control is a simple undertaking.

As shown in the code snippet below it is a matter of instantiating a new SPHierarchyDataSourceControl, setting some properties in order to define which categories of nodes to retrieve, obtaining a HierarchicalDataSourceView and performing a Select() over the view to finally have a IHierarchicalEnumerable collection of menu nodes.

private IHierarchicalEnumerable sitemapNodes;
…
SPHierarchyDataSourceControl HierarchyDataSC = new SPHierarchyDataSourceControl();

HierarchyDataSC.IncludeDiscussionFolders = true;
HierarchyDataSC.ShowDocLibChildren = true;
HierarchyDataSC.ShowFolderChildren = true;
HierarchyDataSC.ShowListChildren = true;
HierarchyDataSC.ShowWebChildren = true;

HierarchyDataSC.RootContextObject = "Web";
HierarchicalDataSourceView view = HierarchyDataSC.GetHierarchicalViewPublic("");

sitemapNodes = view.Select();

If you try to include the code above in your Silverlight Custom Web Part unfortunately it won’t compile. Why? Because as clarified in the previous paragraph the Web Part is a sandboxed We Part and this prevents you from using some assemblies, amongst them the one needed for the code above. You have two options to get out from the mud: one is to abandon the Silverlight Custom Web Part and use a normal Visual Web Part in the way I described in one of my previous articles entitled “Silverlight and Sharepoint 2010 a step forward: how to build a small Silverlight 4 utility to upload files in a List or Library of Sharepoint”, precisely in paragraph “Deploy the Silverlight application using a Visual WebPart”. The other is to modify the settings of the Silverlight Custom Web Part in an “unconventional” way, i.e. by making it become a not-sandboxed solution.

Deploy a Silverlight Custom Web Part as a not-sandboxed solution: a dirty trick

By default when using a Silverlight Custom Web Part, the property “Sandboxed Solution” of the project is set to true as in the picture below:

If you try to set this property to false and then to include the code above to retrieve the hierarchy, you will be able to build the solution but not to deploy it. The error message that will appear is the following:

where “MenuSCWP” is the name I used to replace the default name “SilverlightcustomWebPart1”. As you can see in the second-last picture this project item is in charge of transporting a “MasterpageGallery” module in Sharepoint. This module contains the xap file of our Silverlight application. If you open the file “Elements.xml” nested in the module you can confirm this statement:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="Menu4U" Url="_catalogs/masterpage/ClientBin/$SharePoint.Package.Name$">
    <File Path="Menu4U\Menu4UForSP.xap" Url="Menu4UForSP.xap" />
  </Module>
</Elements>

And now comes the trick to remove this obstacle, and I would like to warn you: it is a very dirty trick.

In Visual Studio right-click on the Silverlight custom Web Part item (I renamed it “MenuSCWP) as in the picture below:

Click on “Open Folder in windows Explorer” to open the folder. You should see a couple of subdirectories and a file named “SharePointProjectItem.spdata” as in the picture below:

Open the file. It should have a content similar to this one:

<?xml version="1.0" encoding="utf-8"?>
<ProjectItem Type="MicrosoftSilverlightCustomWebPart" SupportedTrustLevels="Sandboxed" SupportedDeploymentScopes="Site" xmlns="http://schemas.microsoft.com/VisualStudio/2010/SharePointTools/SharePointProjectItemModel">
  <Files />
</ProjectItem>

Take a look at the “SupportedTrustLevels” attribute of the projectitem node: actually it is set as “Sandboxed”. Now write “FullTrust” instead, and save the file. Come back to Visual Studio and try to deploy the solution. If all the steps have been followed correctly, the solution will be deployed. Pay attention to the fact that when you close the solution and open it again in Visual Studio, the file is overwritten and you have to set the attribute again. It is not so annoying if you make a batch file or a vbscript that performs the replacement for you. You can also launch the execution of the script from the pre-build event.

Saving the hierarchy in a Sharepoint custom list: the modified preorder traversal tree

In the previous paragraph I explained the reason why I want to put the hierarchy into a Custom Sharepoint List: it can be read also by anonymous users. The problem is that a List in Sharepoint is basically a table with rows and columns, while the IHierarchicalEnumerable object that we have obtained represents a tree hierarchy. How to save a tree-hierarchy in a table then? After a moment of despair I recalled an old article entitled Storing Hierarchical Data in a Database that illustrated an algorithm called Modified Preorder Tree Traversal. The principal assumption of the algorithm is that each node in the hierarchy tree must have a left value and a right value. Then the tree is traversed assigning opportune values for left and right according to the rules shown in the flowchart below:

At a first glance it may look a bit complicated but if you try to put on paper a simple tree and assign the left and right values following the flowchart above, it will be a fun exercise. The following picture shows a hierarchy tree, a tree already numbered with the indication of the direction of traversing:

The nice thing of this approach is that after the hierarchy is put into a table you can retrieve nodes with simple queries. With reference to the picture above, if you want to retrieve the subtree starting from the node title “SITE AA” you can launch this query:

“SELECT * FROM tree_table WHERE left BETWEEN 3 AND 8 ORDER BY left ASC;

If you want all the tree simply write:

“SELECT * FROM tree_table WHERE left BETWEEN 1 AND 22 ORDER BY left ASC;

As for the code implementation, I created a class “MpttItem” representing a single node as below:

class MpttItem
{
    private string title;
    public string Title
    {
        get { return title; }
        set { title = value; }
    }

    private string type;
    public string Type
    {
        get { return type; }
        set { type = value; }
    }

    private string imageUrl;
    public string ImageUrl
    {
        get { return imageUrl; }
        set { imageUrl = value; }
    }


    private string serverRelativeUrl;
    public string ServerRelativeUrl
    {
        get { return serverRelativeUrl; }
        set { serverRelativeUrl = value; }
    }

    private string navigateUrl;
    public string NavigateUrl
    {
        get { return navigateUrl; }
        set { navigateUrl = value; }
    }



    private int left = 0;
    public int Left
    {
        get { return left; }
        set { left = value; }
    }

    private int right = 0;
    public int Right
    {
        get { return right; }
        set { right = value; }
    }

    private int id;
    public int ID
    {
        get { return id; }
        set { id = value; }
    }

    protected MpttItem parent;
    public MpttItem Parent
    {
        get { return parent; }
        set { parent = value; }
    }

    protected IHierarchyData iHierarchyItem;
    public IHierarchyData IHierarchyItem
    {
        get { return iHierarchyItem; }
        set { iHierarchyItem = value; }
    }

    
}

And then in the code behind the sandboxed (not-sandboxed) Web Part I stored each node in a List of MpttItem using a recursive function as below:

List<MpttItem> menuRows;

[…]

menuRows = new List<MpttItem>();
           
MpttItem mpttRootItem = new MpttItem()
{
    Parent = null,
    IHierarchyItem = null,
    Title = "root",
    Left = 1,
    Right = 0,

};
menuRows.Add(mpttRootItem);


foreach (object item in sitemapNodes)
{
    IHierarchyData menuNode = (IHierarchyData)sitemapNodes.GetHierarchyData(item);
    if (menuRows.Count == 1)
    {
        AddMenuRowsRecursive(null, menuNode, 2, 2);
    }
    else
    {
        int startIndex = menuRows[menuRows.Count - 1].Right + 1;
        AddMenuRowsRecursive(null, menuNode, startIndex, startIndex);
    }
}

menuRows.Sort(
    delegate(MpttItem p1, MpttItem p2)
    {
        return p1.Right.CompareTo(p2.Right);
    }
);
menuRows[0].Right = menuRows[menuRows.Count - 1].Right + 1;
menuRows.Sort(
    delegate(MpttItem p1, MpttItem p2)
    {
        return p1.Left.CompareTo(p2.Left);
    }
);


AddToSPList();

The recursive function is the following:

private int AddMenuRowsRecursive(MpttItem mpttParent, IHierarchyData currHIData, int leftIndex, int rootIndex)
{
    if (mpttParent == null && leftIndex > rootIndex)
        return 0; // elaboration completed

    string title = GetPropertyDescriptorValue(currHIData, "Name");

    Microsoft.SharePoint.Navigation.ISPHierarchyData currHIOtherData = (Microsoft.SharePoint.Navigation.ISPHierarchyData)currHIData.Item;
    
    // look if the current mpttItem was already elaborated
    MpttItem elaboratedItem = menuRows.Find(i => ( (i.IHierarchyItem == null || currHIData == null) ? false : i.IHierarchyItem.GetHashCode() == currHIData.GetHashCode()));

    IHierarchyData childHiData = GetFirstAvailableChild(currHIData);
    if (childHiData == null)
    {
        if (leftIndex > rootIndex && elaboratedItem == null /* && leftIndex < mpttParent.Left + 2*/)
        {
            // then it is a leaf
            MpttItem mpttItem = new MpttItem()
            {
                Parent = mpttParent,
                IHierarchyItem = currHIData,
                Title = title,
                Type = currHIData.Type,
                ServerRelativeUrl = currHIOtherData.ServerRelativeUrl,
                NavigateUrl = SPContext.Current.Web.Site.Url + currHIOtherData.ServerRelativeUrl,//currHIOtherData.NavigateUrl,
                ImageUrl = currHIOtherData.ImageUrl,
                Left = leftIndex,
                Right = leftIndex + 1
            };
            menuRows.Add(mpttItem);

            AddMenuRowsRecursive(mpttItem.Parent, mpttItem.Parent.IHierarchyItem, mpttItem.Right + 1, rootIndex);
            return 0;
        }
        else
        {
            if (mpttParent == null) 
                return 0;

            mpttParent.Right = leftIndex;

            if (mpttParent.Parent == null)
                return 0;
            AddMenuRowsRecursive(mpttParent.Parent, mpttParent.Parent.IHierarchyItem, mpttParent.Right + 1, rootIndex);
            return 0;
        }

    }
    else
    {
        // it is a branch

        if (elaboratedItem == null)
        {
            MpttItem mpttItem = new MpttItem()
            {
                Parent = mpttParent,
                IHierarchyItem = currHIData,
                Title = title,
                Left = leftIndex,
                Type = currHIData.Type,
                ServerRelativeUrl = currHIOtherData.ServerRelativeUrl,
                NavigateUrl = SPContext.Current.Web.Site.Url +  currHIOtherData.ServerRelativeUrl,//currHIOtherData.NavigateUrl,
                ImageUrl = currHIOtherData.ImageUrl,
            };
            menuRows.Add(mpttItem);
            AddMenuRowsRecursive(mpttItem, childHiData, mpttItem.Left + 1, rootIndex);
            return 0;
        }
        AddMenuRowsRecursive(elaboratedItem, childHiData, leftIndex, rootIndex);
        return 0;
    }

}

The AddToSPList() function performs the insertion of the nodes in a Sharepoint custom list which I called “MenuTable”:

private void AddToSPList()
{
    SPWeb mySite = SPContext.Current.Web;
    SPListItemCollection listItems = mySite.Lists["MenuTable"].Items;
    mySite.AllowUnsafeUpdates = true;

    // clean list
    PurgeList(listItems);

    foreach (MpttItem mpttItem in menuRows)
    {
        SPListItem item = listItems.Add();

        item["Left"] = mpttItem.Left;
        item["Right"] = mpttItem.Right;
        item["Title"] = mpttItem.Title;
        item["ImageUrl"] = mpttItem.ImageUrl;
        item["NavigateUrl"] = mpttItem.NavigateUrl;
        item["ServerRelativeUrl"] = mpttItem.ServerRelativeUrl;

        if (mpttItem.Parent != null)
        {
            item["ParentLeft"] = mpttItem.Parent.Left;
            item["ParentRight"] = mpttItem.Parent.Right;
        }
        else
        {
            item["ParentLeft"] = menuRows[0].Left;
            item["ParentRight"] =menuRows[0].Right;
        }

        item.Update();
    }

}

The source code

At this link you find the complete solution discussed in this article. It is not an optimized project but a starting point ready to be improved if you want to create your own Silverlight menu for Sharepoint. It does not contain any cache management either from server side or client side. It is left as an exercise for you. In order to put the menu in practice it is recommended to put it in a master page using Sharepoint Designer.

Summary

In this second part we have seen how to implement a Silverlight menu using a so called “server approach” where the retrieval of the hierarchy is made at the server side. We have learned a dirty trick to “un-sandbox” a Silverlight Custom Web Part and a way to retrieve the hierarchy. Then we have explored a fun method to save the hierarchy in a table so that it can be read by the Silverligt menu also in an anonymous context.

Windows Client Developer Roundup 085 for 11/28/2011

Pete Brown — Mon, 28 Nov 2011 04:03:08 GMT

Note that I've started breaking the Netduino, Electronics,Robotics, Synthesizer and similar content into a new roundup seriescalled the Maker GeekRoundup.

Shout-Outs

.NETTutorial: Learn .NET and C# interactively (Motti Shaked)
Announcing GoingNative 2012 Conference (Visual C++ TeamBlog)

Windows 8 and WinRT/Metro General

Try It Now: Use PPL to Produce Windows 8 AsynchronousOperations (Visual C++ Team Blog)
Debugging Contracts using Windows Simulator (Visual StudioBlog)
Handling orientation changes and setting preferred orientation inMetro style apps (Gus Class)
1360x768x32 Resolution in Windows 8 in VirtualBox (MichaelCrump)

XAML Technologies (Silverlight, WPF, WinRT Metro XAML)

Windows Theme Fonts Redux & Sample Code (Quppa's Blog)
WPF 4.5 - Part 13 : binding to types that ImplementICustomTypeProvider (Jonathan Antoine)
Adding an Application Bar to your XAML Metro Applications.(Michael Crump)
An Introduction to Semantic Zoom in Windows 8 Metro (ColinEberhardt)
Handling Extremely Large Data Sets in Silverlight (JeremyLikness)

Direct X Technologies (DirectX, XNA, WinRT DirectX, General GPUand Game Programming)

Game Debugging in Visual Studio 11 (Visual C++ Team Blog)
Stand still and they won't see you (Shawn Hargreaves)
Math Primer Series: Matrices III: Affine Transformations andMatrices (Reza Nourai)
Temporal sampling frequency (aka 'framerate') (ShawnHargreaves)
XNA Light Pre-Pass: Instancing (J. Coluna)

C++ and Native Development

Inside the C++/CX Design (Visual C++ Team Blog)
GoingNative 3: Marian Luparu answers about C++/CX (Visual C++Team Blog)
C++ code analysis in Visual Studio 2012 (BlogMFC)

Visual Studio and .NET General

Visual Studio 11 IDE Advances (Soma)

NUI (Kinect, Surface, More)

Our Kinect Controlled living room (Apeoholic's blog)
Kinect Controlled Treadmill and Robot Navigation(KinectHacks)
My shift from WPF-XAML to Kinect for Windows (Rob Relyea)
Information on upgrading Kinect Applications to MS SDK Beta 2.(Michael Crump)
Samsung SUR40 for Microsoft Surface Now Available forPre-order! (Surface Blog)
Mobile developers and Kinect (Rob Relyea)
Samsung SUR40 for Microsoft Surface Receives "Best of What's New"Award from Popular Science (Surface Blog)
"Kinect with your Eclipse IDE" (Channel 9)

Off-Topic Fun

Graphof Life Satisfaction for nerds vs. everyone else (SMBC)
Walkable Roller Coaster (Toxel) (Watch out for the loop!)
xkcd: P*rn Folder(xkcd)

Silverlight Show: 10 Laps around Silverlight 5 (Part 7 of 10)

Fri, 25 Nov 2011 17:19:31 GMT

In this article, a discussion of a few more operating system integration features in Silverlight 5 including: Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness for Media Applications. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

Introduction to SL5 – provides a brief history of Silverlight and relevant links.
Binding - Ancestor Relative Source Binding and Implicit Data Templates.
Graphics - XNA 3D API and Improved Graphics Stack.
Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.
Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.
Operating System Integration Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.
Operating System Integration Part 2 - [This Post] - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.
Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.
Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.
Other items - In-Browser HTML, PostScript and Tasks for TPL.

Default Filename for SaveFileDialog

In previous version of Silverlight, you could not specify the default filename for the SaveFileDialog message. In Silverlight 5 you can very easily.

Fire up a new Silverlight 5 project and give it any name that you want. We are going to create a simple application that contains one button and when the user clicks it the SaveFileDialog will appear with a default filename.

Switch over to the MainPage.xaml and add in the following code:

   1: <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

   2:         <Button x:Name="btnSaveFile" Content="Save File Dialog" Click="btnSaveFile_Click"/>

   3: </StackPanel>

Let’s switch back over to the MainPage.xaml.cs and add the following code to our button event handler:

   1: private void btnSaveFile_Click(object sender, RoutedEventArgs e)

   2:        {

   3:            var saveFileDialog1 = new SaveFileDialog

   4:                                      {

   5:                                          Filter = "JPeg Image|*.jpg|Bitmap Image|*.bmp|Gif Image|*.gif",

   6:                                          DefaultFileName = "YouCanNowHaveADefaultFileName.jpeg"

   7:                                      };

   8:            saveFileDialog1.ShowDialog();

   9:        }

If we run the application now, we will see the following prompt.

Windows Phone 7.5 - Play with music

editorial@silverlightshow.net (Andrea Boschin ) — Thu, 24 Nov 2011 03:00:00 GMT

If you get the Windows Phone "Mango" update on your phone, and you are use to listen to music on your phone, you have for sure noticed some improvements in the music capabilities of the phone. Since the release of the OS7.0, the music hub is an important application that is able to integrate with the Zune marketplace and enable download and listen of music on the phone.

Don't miss...

One of the beautiful capabilities of the hub is the ability of playing music also when the phone is doing other things. Once you started a playlist you can exit from the music hub and the music continue to play in background also if you lock the phone.

In the new OS7.5 these capabilities are improved because now you get a new set of controls in the lock screen that let you control the music without the need of unlocking the phone. But this is only the most visible change in the music capabilities. From the programming side you have much more opportunities of integrating with the music hub, feeding and controlling the player from inside your applications.

The role of Agents

Playing background audio is not simply feeding something with a playlist and then leave it free of managing the events occured during its lifetime. if so, it would be very limitative and it would be much simpler to load songs on the music hub and the let it manages them. In Windows Phone 7.5 we can instead directly manage the playlists and being notified about the commands sent by the user from the lock screen and from the audio player bar that usually opens when you press the volume switch.

As you can figure, these tasks can be accomplished only starting a background thread that runs also when the application exited. It is natural to understand the we have to do some work when there are other application running on the screen and also when the lock screen has been teared down.

From the OS7.5 the phone has the capability of running background agents and to control the tracks you have to play, you have to build a special kind of agent. There are two classes you can inherit from to start this work. The AudioPlayerAgent is made to be feed with tracks that you can stream from the network or from the Isolated Storage; it is the perfect point to create your own player to connect with a live service and so on. With the AudioStreamingAgent instead you can create your own stream on the fly or you can manipulate different formats not directly supported by the build-in player. For the sample of this article I will show the basic AudioPlayerAgent. First of all open Visual Studio and select File -> New -> Project

As you can see there are two project templates that are ready to start your work. Side by side with the generic Scheduled Task Agent there are an Audio Playback Agent and an Audio Streaming Agent. Select the first one as in the figure and then OK to ask to Visualo Studio of create the skeleton of the project. The project that is created by Visual Studio contains a single class called AudioPlayer.

The project you have created is a class library, so you have to add its reference to a Windows Phone Application. After you done this task your task is ready to be used. Under the hoods Visual Studio addedd a reference to your AudioPlayerAgent into the WMAppManifest.xaml. This reference simply add the class to the extended tasks that runs in background:

   1: <Tasks>   2:   <DefaultTask Name="_default" NavigationPage="MainPage.xaml" />   3:   <ExtendedTask Name="BackgroundTask">   4:     <BackgroundServiceAgent Specifier="AudioPlayerAgent" Name="AudioPlaybackAgent1" Source="AudioPlaybackAgent1" Type="AudioPlaybackAgent1.AudioPlayer" />   5:   </ExtendedTask>   6: </Tasks>

Manage the playlist

Now that the Agent is ready to start, it is time to understand its internal work and to write the code to manage the playlist and feed the player. Look at the AudioPlayerAgent class:

   1: public class AudioPlayerAgent : BackgroundAgent   2: {   3:     protected virtual void OnError(   4:         BackgroundAudioPlayer player,    5:         AudioTrack track,    6:         Exception error,    7:         bool isFatal);   8:     protected virtual void OnPlayStateChanged(   9:         BackgroundAudioPlayer player,   10:         AudioTrack track,   11:         PlayState playState);  12:     protected virtual void OnUserAction(  13:         BackgroundAudioPlayer player,   14:         AudioTrack track,   15:         UserAction action,   16:         object param);  17: }

There are two key method you have to handle. The OnUserAction method is made to notify the actions of the user on the playback controls. When the user hits a button on the lock screen this method is called and you are in charge of taking the right action on the current playing track or on the playlist. The method notifies about track-related actions like Play, Pause, Stop, Forward and Rewind but also on SkipNext and SkipPrevious that ask to change the currently playing track.

The OnPlayerStateChanged method instead, notifies about the progress of the playback and about the changes of its state. So, as an example, if the track is ended this method is called with PlayState.TrackEnded and you have to feed the player with the next track available. Mostly important is that you get notifications also about the actions you trigger in the OnUserAction method.

The AudioPlayer class created by the Visual Studio template already implements lot of the logic needed to make it work. The sole thing it miss is the tracks. So at the very start of the class add an array of AudioTrack instance and a _current property that identified the number of the current track running in this array:

   1: private static volatile int _current = 0;   2:     3: private AudioTrack[] tracks = new AudioTrack[]    4: {   5:     new AudioTrack(new Uri("Hard As Rock.mp3", UriKind.Relative),   6:         "Hard as rock", "AC/DC", "Ballbreaker", new Uri("Hard As Rock.jpg", UriKind.Relative)),   7:     new AudioTrack(new Uri("Run Around.mp3", UriKind.Relative),   8:         "Run around", "Blues traveller", "Four", new Uri("Four.jpg", UriKind.Relative)),   9: };

In this sample I statically declare the array but you can obviously load it from every kind of media. It can be loaded from the network or generate it dinamically. Also you do not need to have a static array but you can also generate the next track at runtime on a random basis. Important to say is that the _current variable is declared static because the AudioPlayer class is not persistent but an instance is created every time an action is required.

The AudioTrack class represent a single track of the playlist. It is provided with properties for Title, Artist, Album, AlbumArt and so on. You can use these properties to provide information to the phone and it shows them whenever it is required. The template of the AudioPlayer class declares a GetNextTrack and a GetPreviousTrack methods. Implementing the body of these method let you feed the player with the right track.

   1: private AudioTrack GetNextTrack()   2: {   3:    AudioTrack track = this.tracks[_current];   4:    if (++_current >= this.tracks.Length) _current = 0;   5:    return track;   6: }   7:     8: private AudioTrack GetPreviousTrack()   9: {  10:    AudioTrack track = this.tracks[_current];  11:    if (--_current < 0) _current = this.tracks.Length - 1;  12:    return track;  13: }

Starting the task

Adding this class to the WMAppManifest.xaml does not automatically start the playback. To make the last step you have to use the BackgroundAudioPlayer class. This class is designed to simulate the actions of an user and it has methods to Play, Pause, Stop and so on. So when you need to start the audio you have to call the Play method. After this action the phone loads the AudioPlayerAgent and starts the music. You can also use this class to control le lifetime of the track and playlist from your own application user interface:

   1: private void bPlay_Click(object sender, RoutedEventArgs e)   2: {   3:    if (BackgroundAudioPlayer.Instance.PlayerState != PlayState.Playing)   4:        BackgroundAudioPlayer.Instance.Play();   5: }   6:     7: private void bPause_Click(object sender, RoutedEventArgs e)   8: {   9:    if (BackgroundAudioPlayer.Instance.CanPause &&  10:        BackgroundAudioPlayer.Instance.PlayerState == PlayState.Playing)  11:        BackgroundAudioPlayer.Instance.Pause();  12: }  13:    14: private void bStop_Click(object sender, RoutedEventArgs e)  15: {  16:    if (BackgroundAudioPlayer.Instance.PlayerState == PlayState.Playing)  17:        BackgroundAudioPlayer.Instance.Stop();  18: }  19:    20: private void bNext_Click(object sender, RoutedEventArgs e)  21: {  22:    if (BackgroundAudioPlayer.Instance.PlayerState == PlayState.Playing)  23:        BackgroundAudioPlayer.Instance.SkipNext();  24: }  25:    26: private void bPrev_Click(object sender, RoutedEventArgs e)  27: {  28:    if (BackgroundAudioPlayer.Instance.PlayerState == PlayState.Playing)  29:        BackgroundAudioPlayer.Instance.SkipPrevious();  30: }

As you can see the PlayerState property is used to detect the current state of the player. Calling Play when the player is currntly playing will raise an exception so you have to carefully test the current state to avoid unwanter errors. The PlayerState is also useful if it is used in the PlayerStateChanged event that is notified when the value changes. In this snipped it is used to change the buttons IsEnabled property according with the state:

   1: private void Instance_PlayStateChanged(object sender, EventArgs e)   2: {   3:     PlayState state = BackgroundAudioPlayer.Instance.PlayerState;   4:     5:     this.bPlay.IsEnabled = state != PlayState.Playing && state != PlayState.Unknown;   6:     this.bPause.IsEnabled = state == PlayState.Playing && state != PlayState.Unknown;   7:     this.bStop.IsEnabled = state == PlayState.Playing && state != PlayState.Unknown;   8:     this.bNext.IsEnabled = state == PlayState.Playing && state != PlayState.Unknown;   9:     this.bPrev.IsEnabled = state == PlayState.Playing && state != PlayState.Unknown;  10:    11:     if (BackgroundAudioPlayer.Instance.Track != null)  12:     {  13:         this.txtTrack.Text = BackgroundAudioPlayer.Instance.Track.Title;  14:         this.txtAuthor.Text = BackgroundAudioPlayer.Instance.Track.Artist;  15:         this.txtAlbum.Text = BackgroundAudioPlayer.Instance.Track.Album;  16:         this.txtDuration.Text = BackgroundAudioPlayer.Instance.Track.Duration.ToString();  17:    18:         using (IsolatedStorageFile file = IsolatedStorageFile.GetUserStoreForApplication())  19:         {  20:             string coverFile = Uri.UnescapeDataString(BackgroundAudioPlayer.Instance.Track.AlbumArt.OriginalString);  21:    22:             if (file.FileExists(coverFile))  23:             {  24:                 Stream stream = file.OpenFile(coverFile, FileMode.Open, FileAccess.Read);  25:    26:                 BitmapImage cover = new BitmapImage();  27:                 cover.SetSource(stream);  28:                 this.imgCover.Source = cover;  29:             }  30:         }  31:     }  32: }

Finally you have access to the currently playing track. The BackgroundAudioPlayer instance exposes a TrackProperty that is the current AudioTrack provider by the background agent. In this code I use this information to display the AlbumArt and other properties on the page:

When to use Audio Agents

While I was working on the samples for this article I often ask myself about the usefulness of these features. I think they are a good entry point for provider that want to feed phones with music service that are alternative to the zune marketplace. With the ability of connect to the network to stream content and to save it to the marketplace I think it will be very easy to integrate some source to the phone. Also I think there are interesting opportunities in the AudioStreamingAgent due to its capability of playing audio that is generated on board of the phone. As for any other feature of this operating system ther will be someone ready to take advantage of them.

2011 Virtual and Live Speaking Locations

Wed, 23 Nov 2011 19:47:27 GMT

VSLive, Pluralsight WebCast and the inaugural Tampa Windows Developer User Group. That’s all that’s left for me this year for presentations. Actually, it’s a pretty full plate given that the year is almost up and the holidays are upon us. Here is my remaining 2011 schedule:

Tampa Bay WinDev: Intro to Metro UI

(Nov 30 at 6pm ET)

This is the first meeting of the new Windows user group hosted at the Microsoft offices in Tampa. This will be a run through of the Metro app dev landscape. You can register here for this Nov 30 event.

Pluralsight WebCast: Windows 8 Metro App Development

(Dec 5th at 4pm ET)

This is a Pluralsight hosted live web cast with both Dan Wahlin and I talking about our new Windows 8 course and answering your questions. The web site has the wrong date and time, it is indeed Dec 5th at 4pm ET.

VSLive Orlando: JavaScript Patterns for HTML5

(Dec 7th at 9:15am ET)

JavaScript gets a bad rap sometimes for easily confused global variables, script files that are thousands of lines long, and mixing html with script code. But it doesn't have to be that way. This session will demonstrate common techniques to separate structure (HTML), behavior (JavaScript) and presentation (CSS) with modern Web development. I'll offer a few tips to make your JavaScript more maintainable, manage namespacing, and demonstrate how to implement various JavaScript patterns.

VSLive Orlando: Advanced Patterns with MVVM in Silverlight and Windows Phone 7

(Dec 7th at 1:30pm ET)
Ever wonder what the MVVM pattern is, why it exists, when it works well, and what parts you may want to use or not use? In this session I'll discuss all of these topics and go through important scenarios including messaging, child windows, testing with design timed data, tombstoning, dialogs, and how to apply these principals to both Silverlight desktop and Windows Phone 7 applications.

VSLive Orlando: Data Binding and MVVM Patterns in HTML5

(Dec 8th at 3:00pm ET)

There are several ways to push and pull data in and out of HTML elements, each with their own advantages. In this session we’ll examine some common techniques to present data in the UI including loading JSON data in and out of HTML elements using jQuery, presentation through templates. We’ll also demonstrate how to apply data binding using the MVVM pattern in our JavaScript

Knockout JS Pluralsight Course in the Works

Wed, 23 Nov 2011 17:26:49 GMT

I love data, data binding and development patterns. So it should be no surprise that my next course to be released with Pluralsight is on KnockoutJS. I recently released an Introduction to Building Windows 8 Metro Applications course with my good friend Dan Wahlin for Pluralsight. Thanks to all of you who have been watching it! I’ve been asked what else is on my list for Pluralsight videos, so I thought I might share my current plans.

I’ve got several other ideas for courses that I’ve been working on and the one that will be released next will be a course on using JavaScript to build MVVM apps with KnockoutJS. I’m been a big fan of MVVM, separation of concerns (SoC) and structured programming, so Knockout really is a great fit for my style. If you have not used Knockout yet, I think you’ll be pleasantly surprised on how powerful and easy it can be to create rich HTML5 apps using JavaScript. It’s ideal for using the MVVM pattern with JavaScript and getting the benefits of data binding, templating, and SoC. I'm using KO 1.3rc for now which seems pretty solid and soon will become the official 1.3 version of the library.

The course is currently targeted for the beginning of February 2012, mostly because the holidays are between me and the target date. But I am hoping to finish early.

After that, I’ve had a lot of interest in a course using MVVM with XAML. If the interest still holds true, I’ll be sure to put that together as well. Bottom line is that if you want a new course, be sure to vote for it on the Pluralsight voting page (a new feature on their site). You can vote for KnockoutJS here already, vote for another course, or add your own for MVVM or any other topic.

What else? I have a few others I am mulling, but I don’t want to get too far ahead of myself yet. I’m doing a lot of work with Entity Framework Code First, JsRender, JsViews, and more … but I don’t think I’ll lean towards full courses on those. In fact, I have something else in mind for those topics where I might do some tips and tricks or more specialized courses. at this point, nothing is concrete. My first goal is to get Knockout knocked out

Silverlight Show: 10 Laps around Silverlight 5 (Part 6 of 10)

Wed, 23 Nov 2011 16:12:12 GMT

In this article, a discussion of several new operating system integration features in Silverlight 5 including: P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

Introduction to SL5 – provides a brief history of Silverlight and relevant links.
Binding - Ancestor Relative Source Binding and Implicit Data Templates.
Graphics - XNA 3D API and Improved Graphics Stack.
Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.
Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.
Operating System Integration Part 1 - [This Post] - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.
Operating System Integration Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.
Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.
Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.
Other items - In-Browser HTML, PostScript and Tasks for TPL.

P/Invoke or Platform Invocation

Before we dive into an example. Let’s first answer the question, What is it? Platform Invocation Services, commonly referred to as P/Invoke, is a feature of Common Language Infrastructure implementations, like Microsoft's Common Language Runtime, that enables managed code to call native code.

*Reference to Wiki

This feature is new to Silverlight 5 and we will take a look at how to use it in your own applications.

In order to create a new P/Invoke application in Silverlight 5, we will need to enable “Require elevated trust” in Silverlight 5. We can also use the functionality in-browser or out-of-browser. Let’s begin.

OData caching in Windows Phone

editorial@silverlightshow.net (Samidip Basu ) — Wed, 23 Nov 2011 03:53:00 GMT

OData seems to have a lot of promise in simplifying data access across multiple platforms by using fundamental technologies of HTTP and Atom/JSon. Using an OData source for data consumption/updates in your Windows Phone application?

Don't miss...

In this short article, we take a quick look at a data caching strategy in our Windows Phone applications while using an OData data source. While we talk about a Windows Phone solution in particular, these concepts are perfectly applicable when using OData on other mobile platforms.

As always, the demo solution, along with all code samples is available for download through the link below:

Download Source Code

Introduction

The Open Data Protocol (OData) is an HTTP-based protocol for querying and updating a data source. Based on the platform or type of application we are building, we have the option of using either Atom or JSon as our feed protocol of choice and then utilize support for filtering, sorting & paging in our application. Want to learn more? http://www.odata.org/is a great place to start. OData has now built up a nice ecosystem around it’s support, with proxy-building libraries in a variety of platforms; and it obviously lends itself very nicely to usage from mobile applications.

Also, just about any data source that .NET runtime can connect to, can be exposed as an OData feed. It is essentially a two-step process: First – put Entity Framework type Object Relational Mapping (ORM) on top of our data source, in particular the ADO.NET Entity Data Model; and Second – put a WCF Data Service on top of the data entities to expose a read-only/updateable feed for the data. Want to try it yourself? Michael Crump’s “Producing & Consuming OData..” series here is a great start. Want to leverage OData as you augment your mobile application with cloud support? My last two articles here & here should be decent starting points.

The Demo

One of the best ways to learn more about OData is to start playing with a live OData service. And what better example than that of Netfllix .. we all love movies, right? Now, Netflix worked with MSFT to expose their entire Movie/Shows catalog as a live OData feed, one that you can hit through the URL below:

http://odata.netflix.com/v2/Catalog/

Once we look up the catalog, we can see all the supported HTTP endpoints to get various information. Head over to the official Netlfix documentation here to learn more about the supported Metadata, filters & formats. For our demo purpose, we shall choose to do a very simple lookup against the Netflix OData catalog .. just to get a list of Genres. Take a guess how many Genres Netflix knows? – Close to 400 !!

So, we make a simple HTTP Get request through our browser to the following URI to get a list of Genres, in default Atom format. Since this is not huge amount of data, there is no continuation token & we get the whole catalog of Genres back in one request:

http://odata.netflix.com/v2/Catalog/Genres

So, let’s build a simple Windows Phone application which consumes the Netflix OData feed & pulls up the list of Genres programmatically. We begin with the default template of a Windows Phone application with a portrait page. One of the first things we do is to add a reference to the root of the Netflix OData service, so that the proxies are built & we can refer to the Netflix entities in our code. Here’s how & the resulting project structure:

Next, let’s add some code to our MainPage.xaml’s code-behind file so we can load the list of Netflix Genres:

 1: using NetflixODataService;  2:   3: DataServiceCollection<Genre> Genres { get; set; } 4: DataServiceContext context = new DataServiceContext(new Uri("http://odata.netflix.com/v2/Catalog/")); 5:   6: public MainPage() 7: { 8:   InitializeComponent(); 9:   this.LoadAndStoreGenres(); 10: } 11:   12:   13: public void LoadAndStoreGenres() 14: { 15:     // Instantiates our collection. 16:     this.Genres = new DataServiceCollection<Genre>(context); 17:   18:     // Base HTTP endpoint or custom query goes here. 19:     Uri uriQuery = new Uri("/Genres()", UriKind.Relative); 20:   21:     // Asynchronously load the result of the query. 22:     this.Genres.LoadAsync(uriQuery); 23:   24:     this.Genres.LoadCompleted += (sender, args) => 25:     { 26:         if (args.Error == null) 27:         { 28:             // Databind. 29:             this.genreList.ItemsSource = this.Genres; 30:     }; 31: }

Now, let’s dig in, since a few interesting things happened. First, we added the reference to the Netflix Service namespace and utilized a special collection class called DataServiceCollection. A DataServiceCollection<T> “represents a dynamic entity collection that provides notifications when items get added, removed, or when the list is refreshed.” So essentially, this has the features of an ObservableCollection built-in & the INotifyPropertyChanged interface makes sure that any UI bound to such a collection is informed of changes on bound property values in the collection. In addition, the DataServiceCollection has been optimized to be the representation of an OData HTTP endpoint collection and supports features like query collections, continuation tokens & tracking changes in the collection. Find out more about the DataServiceCollection here.

Also, we used a DataServiceContext which pointed to the root of the Netflix OData feed as the base context, beyond which we can do our queries/filtering/sorting. Also, once we knew exactly the query to request (in our simple demo – “/Genres()”), we used a LoadAsync() method off of our DataServiceCollection. This, behind the scenes, wraps up our query into an HTTP request to the OData service and does so without blocking the all-important UI thread. When the remote server responds, a LoadCompleted event triggers to allow us to handle the response & bind to our UI, thus automatically marshaling data back to the UI thread.

Now, how do we display the list of Genres we are fetching? Through a very simple XAML UI as below:

 1: <ListBox Margin="15,0,15,10" x:Name="genreList"> 2:     <ListBox.ItemTemplate> 3:         <DataTemplate> 4:             <StackPanel Margin="0,0,0,17" Width="432"> 5:                 <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> 6:             </StackPanel> 7:         </DataTemplate> 8:     </ListBox.ItemTemplate> 9: </ListBox>

So, we simply want to display a list of Genres as “Name” as we get back from Netflix. With just the little code above added to our MainPage.xaml page, we can have our application fetch & display Genres as follows. Please note that is for demo only .. so no fancy progress bars, which you might want to add to indicate to the user that some web request is being served.

The Problem

Now, consider this .. let’s say the source of the OData feed does not change very often or you want this demo Netflix application to work in offline mode, after the data has been fetched at least once. Both of these indicate that we should figure out a way to not make the HTTP Get request to the OData source every time! So, the first time we fetch the data, we have to cache it in the application’s Isolated Storage, to be read on subsequence application runs until something triggers a refresh of the data feed.

So, common sense suggests that we try to put the whole Genres DataServiceCollection in Isolated Storage & rehydrate our entity objects on successive needs for the data. Here’s the problem though – you will get strange error if you simply try to put the DataServiceCollection in Isolated Storage. Something along the lines of :

"An item could not be added to the collection. When items in a DataServiceCollection are tracked by the DataServiceContext, new items cannot be added before items have been loaded into the collection."

So, what’s happening? The problem is that DataServiceCollection<T> was not designed for serialization/deserialization. When we use the DataServiceCollection, the collection is responsible for tracking all the objects that it contains. Because the collection also has a reference to the DataServiceContext, it notifies the DataServiceContext of all changes to the collection and the entities in the collection. This means that we can just add,remove and update objects in the collection and when we want to persist the changes, we call SaveChanges() on the DataServiceContext. This is the crux of the problem, since Isolated Storage requires the entities to be serialized, which triggers the object being updated events. If we create a new DataServiceCollection<T>() (constructor without parameters), it creates the collection in so called auto-tracking mode. That is the collection has tracking turned on, and in order for tracking to work correctly, we must call Load on it (this will add items and connect the collection to the right DataServiceContext which will track the items). This behavior is by design.

Oops! So, is there no way to store away a DataServiceCollection for re-use? Thankfully – Yes!

The Solution

A new class called DataServiceState has been added to keep track of the state of a DataServiceCollection & it’s backend DataServiceContext. The DataServiceState simply knows how to serialize/deserialize a typed DataServiceContext with one or more DataServiceCollection objects. Essentially, during serialization through an explicit static Serialize() method, the whole DataServiceCollection is flattened into a string that is the XML serialized representation of the stored objects, along with support for nested collections.

Shall we see this in action? In our case, we have a DataServiceCollection<Genre> that we would serialize & store in Isolated Storage for future use. Also, we would add a boolean flag to indicate whether we have cached data vs when we would have to refetch. So, in our case, the moment we receive a response to our query to fetch Genres, we would serialize the collection into Isolated Storage. You may switch around where you do this for cleaner code .. but here’s the demo code that shows serialization:

 1: public partial class MainPage : PhoneApplicationPage 2: { 3:     #region "Data Members" 4:   5:     DataServiceCollection<Genre> Genres { get; set; } 6:     DataServiceContext context = new DataServiceContext(new Uri("http://odata.netflix.com/v2/Catalog/")); 7:   8:     public bool AppHasFeed { get; set; } 9:   10:     #endregion 11:   12:     #region "Constructor" 13:   14:     public MainPage() 15:     { 16:         InitializeComponent(); 17:   18:         if (IsolatedStorageSettings.ApplicationSettings.Contains("AppHasFeed")) 19:         { 20:             AppHasFeed = (bool)IsolatedStorageSettings.ApplicationSettings["AppHasFeed"]; 21:         } 22:   23:         if (!AppHasFeed) 24:         { 25:             this.LoadAndStoreGenres(); 26:         } 27:         else 28:         { 29:             this.HydrateFromIso(); 30:         } 31:     } 32:   33:     #endregion 34:   35:     #region "Methods" 36:   37:     public void LoadAndStoreGenres() 38:     { 39:         // Instantiates our collection. 40:         this.Genres = new DataServiceCollection<Genre>(context); 41:   42:         // Base HTTP endpoint or custom query goes here. 43:         Uri uriQuery = new Uri("/Genres()", UriKind.Relative); 44:   45:         // Asynchronously load the result of the query. 46:         this.Genres.LoadAsync(uriQuery); 47:   48:         this.Genres.LoadCompleted += (sender, args) => 49:         { 50:             if (args.Error == null) 51:             { 52:                 // Databind. 53:                 this.genreList.ItemsSource = this.Genres; 54:   55:                 // Set & store the flag indicating we have fetched data once. 56:                 AppHasFeed = true; 57:   58:                 if (IsolatedStorageSettings.ApplicationSettings.Contains("AppHasFeed")) 59:                     IsolatedStorageSettings.ApplicationSettings.Remove("AppHasFeed");                         60:                  61:                 IsolatedStorageSettings.ApplicationSettings.Add("AppHasFeed", AppHasFeed); 62:                  63:   64:                 // Serialize our collection. 65:                 var GenresCollection = new Dictionary<string, object>(); 66:                 GenresCollection["Genres"] = this.Genres; 67:                 string GenresDataFeed = DataServiceState.Serialize(context, GenresCollection); 68:   69:                 // Store flattened data in Isolated Storage. 70:                 if (IsolatedStorageSettings.ApplicationSettings.Contains("Genres")) 71:                     IsolatedStorageSettings.ApplicationSettings.Remove("Genres"); 72:   73:                 IsolatedStorageSettings.ApplicationSettings.Add("Genres", GenresDataFeed);                     74:             } 75:         }; 76:     } 77:     #endregion 78: }

So, our boolean flag “AppHasFeed” indicates whether we have fetched the Genre collection at least once .. in your actual use, you may choose to implement an explicit way to refresh the data feed. Back in our case, if we don’t have any data, we make the one-time asynchronous request to fetch OData as Atom. Next, we utilize the DataServiceState class to serialize the entire DataServiceCollection of Genres with respect to its DataServiceContext and store the resulting string XML into Isolated Storage as a key-value pair. Voila, now we are storing state and caching OData inside our application!

One thing to note is that in our demo case, we simply put the whole DataServiceCollection in Isolated Storage for future use. If you do not want that level of persistence & are dealing with temporary data, there is a way out as well. The same techniques of serialization of a DataServiceCollection apply perfectly well when storing the resulting string in PhoneApplicationService.Current.State, in case you simply want the data to be available in case your application is tombstoned & you want you data entities to be rehydrated without making a fresh HTTP request.

So, in the code above, we saw how to serialize & store a DataServiceCollection in Isolated Storage. But we also need the same data to be deserialized & re-hydrating our data entities if we are not making another fresh request. So, in our case, if the AppHasFeed flag indicates that we have fetched data already, we simply use the following deserialization technique:

 1: public void HydrateFromIso() 2: { 3:     if (IsolatedStorageSettings.ApplicationSettings.Contains("Genres")) 4:     { 5:         // Fetch flattened data & rehydrate object model. 6:         string GenresDataFeed = IsolatedStorageSettings.ApplicationSettings["Genres"].ToString(); 7:         DataServiceState state = DataServiceState.Deserialize(GenresDataFeed); 8:         Dictionary<string, object> collections = state.RootCollections; 9:   10:         // Hydrate our DataServiceCollection. 11:         this.Genres = collections["Genres"] as DataServiceCollection<Genre>; 12:   13:         // Databind. 14:         this.genreList.ItemsSource = this.Genres; 15:     } 16: }

So essentially, we deserialize the string XML from Isolated Storage through the static Deserialize() method to re-instantiate a DataServiceState. Once done, the RootCollections property holds the individual DataServiceCollection entities, which we can use to re-hydrate our data model. Easy? Again, where I do this in code is questionable, but this is for the sake of keeping the demo simple. You should be able to take the concept & add code to your application as & when needed to cache/uncache OData collections.

So, after you add the above code, go ahead & run the Netflix Demo again, but this time after turning off all network connectivity for emulator or Windows Phone device. You’ll see that we have been able to serialize/deserialize the fetched OData collection and now our applications works perfectly fine in offline mode, on successive attempts!

Summary

In this article, we talked about consumption of OData from a Windows Phone application and the subsequent serialization/deserialization of data collections. These techniques should help in building lean applications which are careful about misuse of the user’s bandwidth in fetching the same data over & over again. So, what are you waiting for? Expose just about any data store as an OData feed, put appropriate security on the data & consume it responsibly from multiple mobile platforms!

I would appreciate any comments or concerns or how things can be done better. Thanks for reading & happy coding.

Cheers SilverlightShow!

About the Author

10 Laps around Silverlight 5 (Part 7 of 10)

editorial@silverlightshow.net (Michael Crump ) — Tue, 22 Nov 2011 10:53:00 GMT

This article is sponsored by Telerik RadControls for Silverlight. Related content from the sponsor:

Check out what's new!

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

This article is Part 7 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below.

More resources...

1) Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.

To refresh your memory on what Silverlight is:

Microsoft Silverlight is an application framework for writing Rich Internet Applications.

The run-time environment is available as a plug-in for most web browsers and works on a variety of operating systems including Windows, Mac and Linux.

To recap what we learned in the previous section:

We spent some time building an application that uses P/Invoke or Platform Invocation to get familiar with Elevated Trust and Out of Browser applications. We also reviewed that P/Invoke allows managed code to call native code.
We then took a look at how to create a Silverlight 5 application that uses multiple windows that are separate from the main Silverlight window. We discussed how that if you close one of the newly spawned windows then it only closes that instance.
We wrapped up with creating an application that uses unrestricted file access to demonstrate creating a folder and placing a file inside of it with some content.

In this article, I am going to discuss a few more operating system integration features in Silverlight 5 including: Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness for Media Applications. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

2) Binding- Ancestor Relative Source Binding and Implicit Data Templates.

3) Graphics –XNA 3D API and Improved Graphics Stack.

4) Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.

5) Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.

6) Operating System Integration - Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.

7) Operating System Integration [This post] Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.

8) Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.

9) Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.

10) Other items - In-Browser HTML, PostScript and Tasks for TPL.

Default Filename for SaveFileDialog

In previous version of Silverlight, you could not specify the default filename for the SaveFileDialog message. In Silverlight 5 you can very easily.

Switch over to the MainPage.xaml and add in the following code:

   1: <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">   2:         <Button x:Name="btnSaveFile" Content="Save File Dialog" Click="btnSaveFile_Click"/>   3: </StackPanel>

Let’s switch back over to the MainPage.xaml.cs and add the following code to our button event handler:

   1: private void btnSaveFile_Click(object sender, RoutedEventArgs e)   2:        {   3:            var saveFileDialog1 = new SaveFileDialog   4:                                      {   5:                                          Filter = "JPeg Image|*.jpg|Bitmap Image|*.bmp|Gif Image|*.gif",   6:                                          DefaultFileName = "YouCanNowHaveADefaultFileName.jpeg"   7:                                      };   8:            saveFileDialog1.ShowDialog();   9:        }

If we run the application now, we will see the following prompt.

(Note: You could run this application in elevated trust to remove the security warning, see this post for details)

Go ahead and select OK and you will see the following screen:

You should notice that the File name field is filled in for us with a default save as type as Jpeg. Of course, if you didn’t want the user to see the security warning then you could run this application in elevated trust as mentioned under the image.

64-bit browser support

64-bit browser support is also new to Silverlight 5. If you have installed Windows 7 x64 then you already have a 64-bit version of Internet Explorer. You can find it by going to the “search program and files” prompt and typing Internet Explorer as shown below.

If you launch Internet Explorer x64 and visit a site built with Silverlight 5 then you will see the following message:

After you click on the hyperlink then it will take you to a page that says the following:

(Please note this message will change after the final version of Silverlight 5 is released.)

Don’t worry about this prompt, just go ahead and click “Install for Windows” and you will now be able to run Silverlight 5 applications inside of a browser running in 64-bit mode. Pretty sweet stuff!

Power Awareness for Media Apps

Silverlight 5 comes with an improved power awareness feature. When you are watching a video in Silverlight 5, the screensaver will be disabled (for example, it will not kick in and distract you from your movie). It also allows the computer to sleep when the video is not playing. This is all accomplished with no additional code! You just have to be using Silverlight 5.

Conclusion

At this point, we have seen how you would use specify a default filename for SaveFileDialog, we looked at 64-bit browser support and power awareness for media applications. We have also discussed a few other features in Silverlight 5. In the next part of the series, I am going to take a look at a few productivity and performance features including : XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time. Again, thanks for reading and please come back for the next part.

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

Working with Prism 4 Part 2: MVVM Basics and Commands

editorial@silverlightshow.net (Brian Noyes ) — Mon, 21 Nov 2011 00:13:00 GMT

This article is also available in print (Word, PDF) and e-reader formats (MOBI, EPUB).

Download all formats, including source code for $0.99.

This is Part 2 in the series Working with Prism 4.

Introduction

In the first part of this series, I introduced you to the concepts of Prism 4 – what the toolkit is for, as well as what the top level features are. Additionally, I stepped through the basic setup of getting a Prism application up and running – creating the shell project, a module, declaring a region in the shell, and plugging a view into that region from the module.

More resources...

In this article, I will flesh out that application a little more and show you some of the basic support for the Model-View-ViewModel (MVVM) pattern that Prism has, as well as how to use the DelegateCommand type that Prism provides, which fits well with MVVM scenarios. An important thing to understand is that Prism is not first-and-foremost an MVVM framework. It is a toolkit for building composite applications, which may or may not choose to use the MVVM pattern. As a result, there is not a ton of framework infrastructure provided in Prism that is specifically focused on MVVM. There are other good toolkits out there, such as the MVVM Light or Caliburn Micro toolkits that can be used in conjunction with Prism or instead of Prism if your primary goal is just to put together an MVVM application. However, I have found the combination of features of Prism for composition and MVVM to be more than sufficient for many big and small real world applications, so I usually just use Prism on its own without mixing in other toolkits, and I will keep the focus just on Prism in these articles.

This article will build on the sample application developed in Part 1. You can download the starting point code from Part 1 here. You can download the finished sample for this article here.

MVVM Basics

I don’t intend this article to be a starting point for learning the MVVM pattern. There are many other good resources out there for that, including the excellent article by Josh Smith and the two chapters we wrote in the Prism book which is also available online in various electronic forms. But just so you don’t have to go brush up on MVVM too much to follow along with what I will show in this article, here are the key essentials.

MVVM is a UI separation pattern for keeping the structural aspects of the UI (the XAML elements that you see on the screen) separated from the state and logic that supports that view. The view is just the structure of what you see on the screen. It may contain some dynamic elements such as animations, but it has no logic defining the behavior of the application from a user interaction perspective. Ideally in an MVVM application, there is no code in the code-behind class of a XAML view, just the constructor with its InitializeComponent method call. The state (data) that is presented in the view is provided and manipulated by the view model, and interactions from the user such as selections, button presses, etc. are handled in the view model. The data that the user interacts with is stored in the model, which may not structure the data exactly as it is shown on the screen. The model data structures should be chosen based on the needs of the application as a whole. Another responsibility of the view model is to transform, as necessary, the data from the way the model wants to store and manipulate it to the shape that the view wants to see the data in.

The basic structure of MVVM is that the view’s DataContext property at the root of the view will be set to an instance of the view model (View.DataContext = ViewModel). There is typically a 1:1 relationship of the class defined for the view and the class defined for the view model – for example a CustomerListView will have a CustomerListViewModel. But there are situations where one view model definition might support more than one view or vice versa. But at runtime, the view’s DataContext gets set to a reference to some view model instance that will provide its data and interaction logic. There are many ways the DataContext of the view can get set to an instance of a view model. In this article I will just focus on a couple of those, specifically hooking them up statically from the XAML of the view or using DataTemplates. But you can find many other variants out there in samples of ways to get the two hooked up to one another.

To hook up a view to its view model statically from the XAML, you simply create an instance of it in the XAML like the following snippet:

   1: <UserControl x:Class="Prism101.Modules.Core.CustomerListView"

   2:              ...

   3:              xmlns:local="clr-namespace:Prism101.Modules.Core" ...>

   4:     <UserControl.DataContext>

   5:         <local:CustomerListViewModel />

   6:     </UserControl.DataContext>

To use a DataTemplate to get them hooked up, you bind something in a parent view (typically a ContentControl or ItemsControl) to an instance of the view model whose view you want to render. Then you define a data template in the resources of the parent view that ties the view and view model together, and through the way DataTemplates work, sets the DataContext of the rendered view to the bound instance of the view model.

   1: <UserControl x:Class="Prism101.Modules.Core.ParentView"

   2:              ...

   3:              xmlns:local="clr-namespace:Prism101.Modules.Core"

   4:              ...>

   5:     <UserControl.Resources>

   6:         <DataTemplate DataType="local:CustomerListViewModel">

   7:             <local:CustomerListView />

   8:         </DataTemplate>

   9:     </UserControl.Resources>

  10:     <Grid x:Name="LayoutRoot" Background="White">

  11:         <ContentControl Content="{Binding ChildViewModel}" />

  12: ...

Commanding Basics

Commands in WPF and Silverlight are based on the Gang of Four Command design pattern. With commands you have an invoker and a receiver and some infrastructure in between to keep those two parties decoupled from one another as much as possible. The invoker is typically a UI element of some sort like a button, menu, or possibly a ComboBox selection. The receiver is the handling code that takes some action based on the command being invoked. With traditional code-behind event handling of UI control events, the event handling code represented that receiver code, but it was tightly coupled to the UI element event and had to be co-located in the code behind of the view to work. With commands, particularly with the support of bindings in WPF and Silverlight, and with dependency injection support in Prism, you can have the command invoker and receiver be very loosely coupled from one another – often defined in separate modules that have no references to one another or knowledge of each other’s presence.

Prism has two command types I’ll be covering in this series: the DelegateCommand type which is perfect for hooking up interaction logic between an MVVM view and its view model, and the CompositeCommand, which supports more loosely coupled, cross-module kinds of communication. Both are implementations of the ICommand interface defined in WPF and Silverlight, which defines three members: an Execute method, a CanExecute method, and a CanExecuteChanged event. The Execute method is the crux of the ICommand interface, it is what will be invoked whenever the invoker element has the triggering action happen to it (i.e. a button is clicked that has a command hooked up to it). The CanExecute method can be optionally hooked up to conditionally say whether the associated invoker should be enabled or not – for example if a document is not dirty, the Save command should be disabled. The associated CanExecuteChanged event is a way for the supporting logic that determines whether the command should be enabled to notify the invoker that it should re-evaluate the CanExecute state of the command and update the UI appropriately as things are changing behind the scenes (i.e. the document just went dirty because the user input some text or some other formatting command was invoked on the document that the Save command relates to).

Step 1: Getting Some Data Into the Application

Message boxes and Hello World prompts can only keep your attention for so long. So the first thing I am going to do is to use some Northwind data to add a little more real world structure to the application that I will be expanding on in this article. The sample code for this article includes a SQL script for creating the Northwind DB on your machine (assumes you have SQL Server on your machine in one of its forms). Additionally, the sample code has a WCF RIA Services domain service added to the host Web project to make it easy to retrieve and update the Northwind data from the Silverlight sample application. I am not going to go into any detail on the structure of how to do that since I have covered it in detail in my article series on WCF RIA Services here.

The steps I followed for the Silverlight sample application here is as follows:

Ran the SQL script to create a clean copy of the Northwind database on my machine.
Added an ADO.NET Entity Data Model to the Prism101.Web project from the Data project item templates in the Add New Item dialog, using the Database-first model approach to generate an entity framework model including the Customers, Orders, and Order Details tables from the Northwind database.
Build the project so that the next step will see the EF model.
Add a Domain Service Class to the Prism101.Web project from the Web project item templates in the Add New Item dialog, naming it CustomersDomainService. In the wizard, I selected those same three tables from the entity model.
Build the project so that it code generates the client side support for consuming the domain service and the client side entity types.

Step 2: Creating a CustomerListView

To get started with some MVVM views, I will replace the WelcomeView view that was plugged in from the Core module in the last article with a CustomerListView with a supporting view model.

In the Prism101.Modules.Core project, add a new Silverlight User Control to the project and name it CustomerListView. With the designer showing in the editor, bring up the Data Sources window (Data menu, Show Data Sources). This allows you to code generate user interface controls and have the bindings for them set up (at least partially) from data types in your application. I wrote about these features in details in my book Data Binding with Windows Forms 2.0 a long time ago, but you can find a more recent coverage in this Hands on Lab from Microsoft for WPF.

After a moment, if you have done the steps in Step 1, you should see the Data Sources window populate with the Customer, Order, and Order_Detail types.

If you drag and drop the Customer type from this window into the Grid in the designer, it will code generate a DataGrid with the appropriate columns based on the properties of the Customer entity. Because these entities are generated by RIA Services, it will also add some additional stuff into the XAML that I stripped out to transform it into an MVVM structure, specifically a DomainDataSource. I did some other clean up in the sample code to reorder the columns from the order they were generated in. But after the cleanup, the XAML looks like that shown in the following code listing.

   1: <UserControl x:Class="Prism101.Modules.Core.CustomerListView"

   2:              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   5:              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   6:              xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

   7:              mc:Ignorable="d"

   8:              d:DesignHeight="300"

   9:              d:DesignWidth="400">

  10:     <Grid x:Name="LayoutRoot" Background="White">

  11:         <sdk:DataGrid ItemsSource="{Binding Customers}"

  12:                       AutoGenerateColumns="False"

  13:                       Name="customerDataGrid"

  14:                       RowDetailsVisibilityMode="VisibleWhenSelected">

  15:             <sdk:DataGrid.Columns>

  16:                 <sdk:DataGridTextColumn x:Name="customerIDColumn"

  17:                                         Binding="{Binding Path=CustomerID, Mode=OneWay}"

  18:                                         Header="Customer ID"

  19:                                         IsReadOnly="True"

  20:                                         Width="SizeToHeader" />

  21:                 <sdk:DataGridTextColumn x:Name="companyNameColumn"

  22:                                         Binding="{Binding Path=CompanyName}"

  23:                                         Header="Company Name"

  24:                                         Width="SizeToHeader" />

  25:                 <sdk:DataGridTextColumn x:Name="contactNameColumn"

  26:                                         Binding="{Binding Path=ContactName}"

  27:                                         Header="Contact Name"

  28:                                         Width="SizeToHeader" />

  29:                 <sdk:DataGridTextColumn x:Name="contactTitleColumn"

  30:                                         Binding="{Binding Path=ContactTitle}"

  31:                                         Header="Contact Title"

  32:                                         Width="SizeToHeader" />

  33:                 <sdk:DataGridTextColumn x:Name="phoneColumn"

  34:                                         Binding="{Binding Path=Phone}"

  35:                                         Header="Phone"

  36:                                         Width="SizeToHeader" />

  37:                 <sdk:DataGridTextColumn x:Name="faxColumn"

  38:                                         Binding="{Binding Path=Fax}"

  39:                                         Header="Fax"

  40:                                         Width="SizeToHeader" />

  41:                 <sdk:DataGridTextColumn x:Name="addressColumn"

  42:                                         Binding="{Binding Path=Address}"

  43:                                         Header="Address"

  44:                                         Width="SizeToHeader" />

  45:                 <sdk:DataGridTextColumn x:Name="cityColumn"

  46:                                         Binding="{Binding Path=City}"

  47:                                         Header="City"

  48:                                         Width="SizeToHeader" />

  49:                 <sdk:DataGridTextColumn x:Name="countryColumn"

  50:                                         Binding="{Binding Path=Country}"

  51:                                         Header="Country"

  52:                                         Width="SizeToHeader" />

  53:                 <sdk:DataGridTextColumn x:Name="postalCodeColumn"

  54:                                         Binding="{Binding Path=PostalCode}"

  55:                                         Header="Postal Code"

  56:                                         Width="SizeToHeader" />

  57:             </sdk:DataGrid.Columns>

  58:         </sdk:DataGrid>

  59:     </Grid>

  60: </UserControl>

You can see that the code just contains a DataGrid and its columns for the properties of a Customer. I’ve modified it to assume that the DataContext of the view has a property called Customers that the DataGrid.ItemsSource property is bound to. There is also a Loaded event handler for the DomainDataSource that is added into the code behind of the view from the Data Sources window drag/drop operation that I stripped out after deleting the DomainDataSource.

Step 3: Replace WelcomeView with CustomerListView

Open the CoreModule class in the Prism101.Modules.Core project and replace the creation of the WelcomeView with the CustomerListView.

   1: public void Initialize()

   2: {

   3:     var view = new CustomerListView();

   4:     RegionManager.AddToRegion("MainContent", view);

   5: }

You can now delete the WelcomeView.xaml from that project. You should be able to build and run at this point and see that the grid shows up in the MainContent region in the shell now instead of the Hello Prism of the WelcomeView. This helps to emphasize that when using regions in Prism, the hosting view that contains a region does not need to be touched to completely alter its content, you just change what is being plugged into that container.

Step 4: Add a View Model

Add a class named CustomerListViewModel to the Prism101.Modules.Core project. Add the following code to that class.

   1: public class CustomerListViewModel : NotificationObject

   2: {

   3:     CustomersDomainContext _Context = new CustomersDomainContext();

   4:     IEnumerable<Customer> _Customers;

5:

   6:     public CustomerListViewModel()

   7:     {

   8:         if (!DesignerProperties.IsInDesignTool)

   9:         {

  10:             _Context.Load(_Context.GetCustomersQuery(), OnLoadComplete, null);

  11:         }

  12:     }

13:

  14:     public IEnumerable<Customer> Customers

  15:     {

  16:         get { return _Customers; }

  17:         set

  18:         {

  19:             if (_Customers != value)

  20:             {

  21:                 _Customers = value;

  22:                 RaisePropertyChanged(() => Customers);

  23:             }

  24:         }

  25:     }

26:

  27:     private void OnLoadComplete(LoadOperation<Customer> loadOp)

  28:     {

  29:         if (loadOp.HasError)

  30:         {

  31:             MessageBox.Show(loadOp.Error.Message);

  32:             loadOp.MarkErrorAsHandled();

  33:             return;

  34:         }

  35:         Customers = _Context.Customers;

  36:     }

  37: }

The view model provides the Customers collection of data that the view wants to bind to. It does that by having WCF RIA Services make a call to the back end and load the customer data using the CustomersDomainContext that is a member of the view model, then exposes the resulting customer data through a property on the view model that the view will bind to. The CustomersDomainContext is part of the code generated client code for RIA Services that acts as a proxy to the server side domain service. You can see that the Load call is an asynchronous service calls with a callback hooked up to the OnLoadComplete method to handle errors and to populate the Customers collection property once the call is complete.

There are a couple of important things to point out about this code. One is that in the next step I will be hooking this view model up to the view statically. That means it will get created in the designer as well. The WCF RIA Service calls to load data are not going to work in the designer. Often you will have things in your view model initialization or construction that will break the designer. To guard against this, you can use the DesignerProperties class to avoid executing that code if you are in the designer. So the call to the CustomerDomainContext.Load method is only done at runtime, not at design time.

Another is to notice the base class that I added to the view model class – NotificationObject. This is a base class that Prism provides that encapsulates the implementation of the INotifyPropertyChanged interface, which is important for your view models to support for the properties they expose. The base class exposes several overloaded RaisePropertyChanged methods you can call from your property set{} blocks to make sure that bindings in the view are refreshed when the underlying properties change. The call to RaisePropertyChanged in the Customers property set{} block shows that the Prism base class supporting using strongly typed lambda expressions to point to the property (Customers) itself, instead of using a string for the name of the property as is normally done when raising the PropertyChanged event directly. This makes the code more maintainable because refactoring the property name will update the RaisePropertyChanged calls as well. If declared as a string, it may not be picked up depending on what refactoring tools you use.

Step 5: Hook the view up to the view model

Add a XAML namespace to the CustomerListView so it has access to the types in its own assembly:

   1: xmlns:local="clr-namespace:Prism101.Modules.Core"

Then set the DataContext of the view in the XAML to an instance of the view model as shown earlier:

   1: <UserControl.DataContext>

   2:     <local:CustomerListViewModel />

   3: </UserControl.DataContext>

You should now be able to run and see the data pop into the view after the asynchronous call completes.

This structuring of view and view model is often referred to as “view-first”, because the view is constructed, and then it constructs and wires up its own view model (either from XAML as done here or from code behind). View-first has advantages of simplicity as well as the fact that you can leverage the design time data support of Visual Studio and Expression Blend.

Step 6: Adding an Edit Command

To demonstrate using DelegateCommands to hook up communication between our view and view model for some interaction logic as well as navigating to another view using regions, I will modify the CustomerListView slightly to add an Edit button to the top of the form.

The XAML for the button looks like this.

   1: <Button Content="Edit"

   2:         Command="{Binding EditCustomerCommand}"

   3:         Height="23"

   4:         HorizontalAlignment="Left"

   5:         VerticalAlignment="Top"

   6:         Width="75" />

Notice the binding on the Command property assumes there is a property on the DataContext (the view model) named EditCustomerCommand. Buttons in Silverlight and WPF have a Command property that can point to an instance of an ICommand object. If that is hooked up, the button will be enabled or disabled based on calls to the CanExecute method of the ICommand interface as described earlier. Additionally, when the button is clicked, it will call the Execute method of the ICommand object.

Rather than implementing ICommand directly on an object, a common approach is to use an intermediary class that implements ICommand to dispatch the calls to target methods on some other object, which in this case will be our view model. The first command type that Prism provides is the DelegateCommand class. To add this support, first we declare the property that the button Command binding points to in the CustomerListViewModel class, passing the target Execute and CanExecute handling methods through delegate inference to the constructor.

   1: public DelegateCommand EditCustomerCommand { get; private set; }

Next we populate that property in the constructor of the view model class:

   1: public CustomerListViewModel()

   2: {

   3:     EditCustomerCommand = new DelegateCommand(OnEditCustomer, CanEditCustomer);

   4:     ...

   5: }

Then we define the handling method that those point to.

   1: private bool CanEditCustomer()

   2: {

   3:    return true;

   4: }

5:

   6: private void OnEditCustomer()

   7: {

   8: }

At this point you should be able to build and run, set a breakpoint in the OnEditCustomer method and see that your command handler is being called. Because right now the CanEditCustomer method returns true, the command will always be enabled. I will remedy that shortly.

Step 7: Pushing selection state into the view model

An important aspect of user interaction is selection in the view. But as mentioned before, in an MVVM design, all state and state manipulation should happen in the view model, not in the view. So when the user selects something in the view, the view model needs to know about it so it can take any appropriate action at that point, as well as making that selection available to command handling logic like our edit command.

Add the following property to the CustomerListViewModel.

   1: Customer _SelectedCustomer;

   2: public Customer SelectedCustomer

   3: {

   4:     get { return _SelectedCustomer; }

   5:     set

   6:     {

   7:         if (_SelectedCustomer != value)

   8:         {

   9:             _SelectedCustomer = value;

  10:             RaisePropertyChanged(() => SelectedCustomer);

  11:             EditCustomerCommand.RaiseCanExecuteChanged();

  12:         }

  13:     }

  14: }

Notice that in addition to doing raising the PropertyChanged event through the base class RaisePropertyChanged method, whenever the selected customer changes, the code makes a call to the EditCustomerCommand.RaiseCanExecuteChanged method. This causes the CanExecuteChanged event of the DelegateCommand’s implementation of ICommand to fire, which causes any command invoker such as our Edit button to update its enabled state by calling CanExecute again.

Change the CanEditCustomer method to the following.

   1: private bool CanEditCustomer()

   2: {

   3:     if (SelectedCustomer == null) return false;

   4:     else return true;

   5: }

Finally, on the DataGrid in the view, bind the SelectedItem property to the SelectedCustomer property in the view model.

   1: <sdk:DataGrid ItemsSource="{Binding Customers}"

   2:               SelectedItem="{Binding Path=SelectedCustomer, Mode=TwoWay}" .../>

As a result of this change, the Edit button will now be disabled if there is no selection in the DataGrid. One the user selects a row in the DataGrid, the SelectedItem binding will push a reference to that Customer bound object into the SelectedCustomer property in the view model. That will fire the CanExecuteChanged event on the command, which will cause the button to requery CanExecute, and it will enable the button since the SelectedCustomer will no longer be null at that point.

Step 8: Define an edit view to switch to

As you have already seen with the MainContent region in Part 1, regions in Prism allow you to plug a view into a parent view’s region for presentation. This can be used to logically navigate the user from view to view. What I want to do when the edit command is invoked is to swap out the main view from presenting a list of customers to one that presents an edit form for the selected customer. To do this, I can just plug another view into the MainContent region, replacing the list view as the active view.

A region is a logical container for a collection of views that can be presented within that region. You can add multiple views into the region, and depending on what kind of control the region is, it can present those views either one at a time or all at once. So far I am using a ContentControl in the MainPage.xaml shell view as the MainContent region. A ContentControl can only have a single child element as its Content at one time. But the Prism IRegion abstraction can keep track of a collection of views and set the appropriate view as the Content for that control when you tell it to. This concept is called activating a view in a region in Prism. The thing that actually maps the abstract region to a concrete container control is called a region adapters. There are built in region adapters supporting ContentControl, ItemsControl, and Selector controls in Prism.

To switch to the edit view for a customer, we first have to have one. I won’t go through all the details of defining the CustomerEditView, that is Silverlight basics and is similar to what I described earlier for creating the CustomerListView. Instead of dragging and dropping the Customer type from the Data Sources window with the default settings, you drop down the selection on the Customer type in that window and select Details. Then when you do the drag and drop onto the designer, it generates a data form for a single instance of the type instead of a data grid for a collection of the type. I again trimmed out the DomainDataSource that is added in that operation and patched up the bindings to expect a Customer property exposed from the view’s DataContext (view model) once it is hooked up.

Notice the Button at the bottom of the listing that is bound to a SaveCommand property it also expects to be exposed from the view model. I will hook that up once I get to defining the view model for this view in the next step. Also notice that in this case I did not wire up the view model as the DataContext from the XAML. I will do that programmatically for this sample when the Edit command is invoked in the listing view.

   1: <UserControl x:Class="Prism101.Modules.Core.CustomerEditView"

   2:              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   5:              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   6:              xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

   7:              mc:Ignorable="d"

   8:              d:DesignHeight="212"

   9:              d:DesignWidth="301">

  10:         <Grid x:Name="LayoutRoot"

  11:           Background="White">

12:

  13:         <Grid DataContext="{Binding Customer}"

  14:               HorizontalAlignment="Left"

  15:               Margin="12,12,0,0"

  16:               Name="grid1"

  17:               VerticalAlignment="Top"

  18:               Width="272">

  19:             <Grid.ColumnDefinitions>

  20:                 <ColumnDefinition Width="Auto" />

  21:                 <ColumnDefinition Width="Auto" />

  22:                 <ColumnDefinition Width="5*" />

  23:             </Grid.ColumnDefinitions>

  24:             <Grid.RowDefinitions>

  25:                 <RowDefinition Height="Auto" />

  26:                 <RowDefinition Height="Auto" />

  27:                 <RowDefinition Height="Auto" />

  28:                 <RowDefinition Height="Auto" />

  29:             </Grid.RowDefinitions>

  30:             <sdk:Label Content="Company Name:"

  31:                        Grid.Column="0"

  32:                        Grid.Row="0"

  33:                        HorizontalAlignment="Left"

  34:                        Margin="3"

  35:                        VerticalAlignment="Center" />

  36:             <TextBox Grid.Column="1"

  37:                      Height="23"

  38:                      HorizontalAlignment="Left"

  39:                      Margin="3,3,0,3"

  40:                      Name="companyNameTextBox"

  41:                      Text="{Binding Path=CompanyName, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true, TargetNullValue=''}"

  42:                      VerticalAlignment="Center"

  43:                      Width="164" />

  44:             <sdk:Label Content="Contact Name:"

  45:                        Grid.Column="0"

  46:                        Grid.Row="1"

  47:                        HorizontalAlignment="Left"

  48:                        Margin="3"

  49:                        VerticalAlignment="Center" />

  50:             <TextBox Grid.Column="1"

  51:                      Grid.Row="1"

  52:                      Height="23"

  53:                      HorizontalAlignment="Left"

  54:                      Margin="3,3,0,3"

  55:                      Name="contactNameTextBox"

  56:                      Text="{Binding Path=ContactName, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true, TargetNullValue=''}"

  57:                      VerticalAlignment="Center"

  58:                      Width="164" />

  59:             <sdk:Label Content="Contact Title:"

  60:                        Grid.Column="0"

  61:                        Grid.Row="2"

  62:                        HorizontalAlignment="Left"

  63:                        Margin="3"

  64:                        VerticalAlignment="Center" />

  65:             <TextBox Grid.Column="1"

  66:                      Grid.Row="2"

  67:                      Height="23"

  68:                      HorizontalAlignment="Left"

  69:                      Margin="3,3,0,3"

  70:                      Name="contactTitleTextBox"

  71:                      Text="{Binding Path=ContactTitle, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true, TargetNullValue=''}"

  72:                      VerticalAlignment="Center"

  73:                      Width="164" />

  74:             <sdk:Label Content="Phone:"

  75:                        Grid.Column="0"

  76:                        Grid.Row="3"

  77:                        HorizontalAlignment="Left"

  78:                        Margin="3"

  79:                        VerticalAlignment="Center" />

  80:             <TextBox Grid.Column="1"

  81:                      Grid.Row="3"

  82:                      Height="23"

  83:                      HorizontalAlignment="Left"

  84:                      Margin="3,3,0,3"

  85:                      Name="phoneTextBox"

  86:                      Text="{Binding Path=Phone, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true, TargetNullValue=''}"

  87:                      VerticalAlignment="Center"

  88:                      Width="164" />

  89:         </Grid>

  90:         <Button Content="Save"

  91:                 Command="{Binding SaveCommand}"

  92:                 Height="23"

  93:                 HorizontalAlignment="Left"

  94:                 Margin="162,134,0,0"

  95:                 VerticalAlignment="Top"

  96:                 Width="75" />

  97:     </Grid>

  98: </UserControl>

Step 9: Define the CustomerEditViewModel

When you define a view like the edit view, you quickly identify what properties are needed from your view model to support the view, in this case a Customer property and a SaveCommand property. Add a CustomerEditViewModel class to the project and add the following contents to it.

   1: public class CustomerEditViewModel : NotificationObject

   2: {

   3:     public CustomerEditViewModel()

   4:     {

   5:         SaveCommand = new DelegateCommand(OnSave);

   6:     }

7:

   8:     public DelegateCommand SaveCommand { get; private set; }

9:

  10:     Customer _Customer;

  11:     public Customer Customer

  12:     {

  13:         get { return _Customer; }

  14:         set

  15:         {

  16:             if (_Customer != value)

  17:             {

  18:                 _Customer = value;

  19:                 RaisePropertyChanged(() => Customer);

  20:             }

  21:         }

  22:     }

23:

  24:     private void OnSave()

  25:     {

  26:     }

  27: }

Step 10: Switch to the edit view when the Edit command executes

As you learned in Part 1, the RegionManager service provides the mechanism for plugging views into regions. That means if you are going to switch to the edit view from the list view model, you will need access to that service there. To gain access, you can leverage dependency injection through MEF in your view model. Add the following property declaration in the CustomerListViewModel.

   1: [Import]

   2: public IRegionManager RegionManager { get; set; }

This view model gets constructed from the XAML of the view, so the container is not involved and can’t do the dependency injection automatically. But thanks to the CompositionInitializer class, you can ask the container to do the injection as the view model gets constructed explicitly. Add line 7 in the the following code to the constructor of the CustomerListViewModel.

   1: public CustomerListViewModel()

   2: {

   3:     EditCustomerCommand = new DelegateCommand(OnEditCustomer, CanEditCustomer);

   4:     if (!DesignerProperties.IsInDesignTool)

   5:     {

   6:         _Context.Load(_Context.GetCustomersQuery(), OnLoadComplete, null);

   7:         CompositionInitializer.SatisfyImports(this);

   8:     }

   9: }

That will get the IRegionManager reference injected (the set block of the property will be called to provide the reference) by the container. However, to make sure there is a single container used by both Prism and the CompositionInitializer class, you need to add one more overload to the Bootstrapper class in the Prism101 shell project.

   1: protected override CompositionContainer CreateContainer()

   2: {

   3:     var container = base.CreateContainer();

   4:     CompositionHost.Initialize(container);

   5:     return container;

   6: }

This makes it so the container that Prism sets up is the one that is used by the CompositionHost that sits underneath the CompositionInitializer class.

Now you are ready to actually do the view switching with the region manager. Modify the OnEditCustomer code with the following.

   1: private void OnEditCustomer()

   2: {

   3:     IRegion mainContentRegion = RegionManager.Regions["MainContent"];

   4:     bool alreadyExists = false;

   5:     foreach (var view in mainContentRegion.Views)

   6:     {

   7:         if (view is CustomerEditView)

   8:         {

   9:             CustomerEditViewModel viewModel = ((FrameworkElement)view).DataContext as CustomerEditViewModel;

  10:             viewModel.Customer = SelectedCustomer;

  11:             mainContentRegion.Activate(view);

  12:             alreadyExists = true;

  13:         }

  14:     }

  15:     if (!alreadyExists)

  16:     {

  17:         CustomerEditView editView = new CustomerEditView();

  18:         CustomerEditViewModel viewModel = new CustomerEditViewModel { Customer = SelectedCustomer };

  19:         editView.DataContext = viewModel;

  20:         mainContentRegion.Add(editView);

  21:         mainContentRegion.Activate(editView);

  22:     }

  23: }

If you look at what this code is doing, first it obtains a reference to the IRegion reference for the MainContent region. Then it loops through the Views collection exposed on the region to see if it contains an instance of a CustomerEditView. That would be the case if the user had already switched to the edit view at least once before. If so, it obtains a reference to the view model for that view by casting the DataContext of the view. Remember that in MVVM, View.DataContext = ViewModel. Once it has the view model reference, it can push the reference to the selected customer into the Customer property of the edit view model. Finally in that case it calls Activate on the region to get that as the currently presented view.

If the view was not in the Views collection, it simply constructs a new instance and goes through a similar process, first calling Add before Activate. This chunk of code should only execute the first time the edit view is visited, because the region will cache the reference to the edit view in its Views collection.

One thing to point out here is that I am kind of violating the principles of MVVM by explicitly constructing the CustomerEditView type in the list view model. Typically if you were going to do it this way you would factor this code out to a Controller that managed multiple views and their view models and use a CompositeCommand to hook things up. I’ll show that kind of structure in the next article, and in a later one I’ll highlight the newer navigation features of Prism regions that were added in Prism 4 as an even more decoupled way to switch views. But for now I wanted to show the basic view switching mechanisms of Prism regions and not have too many moving parts, so I am sacrificing a little bit of view model cleanliness for compactness for writing purposes here.

Once you have this code in place, you should be able to build, fire up the application, select a Customer in the grid, press the Edit button and have the main view’s content switch to the edit form.

The last piece for this article is to hook up the Save button in the edit form so that it can at least switch back to the main form. That means you need access to the region manager from that view model as well. The code there is very similar:

Add an Import property for the IRegionManager
Call CompositionInitializer.SatifyImports from the constructor in a guard clause checking to see if you are in the designer
Use the region manager to activate the list view in the region

The following code shows those changes to the CustomerEditViewModel.

   1: [Import]

   2: public IRegionManager RegionManager { get; set; }

3:

   4: public CustomerEditViewModel()

   5: {

   6:     SaveCommand = new DelegateCommand(OnSave);

   7:     if (!DesignerProperties.IsInDesignTool)

   8:     {

   9:         CompositionInitializer.SatisfyImports(this);

  10:     }

  11: }

12:

  13: private void OnSave()

  14: {

  15:     IRegion mainContentRegion = RegionManager.Regions["MainContent"];

  16:     foreach (var view in mainContentRegion.Views)

  17:     {

  18:         if (view is CustomerListView)

  19:         {

  20:             mainContentRegion.Activate(view);

  21:         }

  22:     }

  23: }

At this point you have a simple but functioning example of an MVVM Prism application that uses a bit of view model base class infrastructure that Prism provides in the NotificationObject base class, DelegateCommands to communicate from the view to the view model, and regions to do the switching of views in the main window.

Summary

You can see that it is not a lot of code, nor a lot of complexity that Prism provides with respect to MVVM and commanding, but it provides the common pieces you need for a clean MVVM application. There is no built in implementation of the ICommand interface in Silverlight, so it provides the DelegateCommand to step in nicely for hooking up views to view model logic. There are other discrete pieces of functionality related to MVVM that Prism supports. I’ll touch on some of those when we get to the navigation services in Prism in a later article. There are also features like the DataTemplateSelector capabilities, which are not as necessary in Silverlight 5 with the addition of implicit data templates, but can still come in handy in other scenarios. Another piece is the interaction request capabilities that allow you to be more decoupled in your view model and not directly present pop ups but leave it up to the view to decide what the appearance of the notification to a user looks like.

In the next article I will expand on the communication by looking at CompositeCommands and loosely coupled events in Prism. You can download the completed code for this article here.

About the Author

Silverlight Show: 10 Laps around Silverlight 5 (Part 5 of 10)

Fri, 18 Nov 2011 16:07:00 GMT

In this article, a discussion of the new text improvements in Silverlight 5 including: Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

Introduction to SL5 – provides a brief history of Silverlight and relevant links.
Binding - Ancestor Relative Source Binding and Implicit Data Templates.
Graphics - XNA 3D API and Improved Graphics Stack.
Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.
Text [This Post] - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.
Operating System Integration Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.
Operating System Integration Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.
Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.
Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.
Other items - In-Browser HTML, PostScript and Tasks for TPL.

Linked and Multi-Column Text

We will use an example that I’ve demonstrated in the past that many have found helpful. The Linked and Multi-Column Text feature enables the text of a RichTextBlock control to overflow from one into the next. Multiple RichTextBlockOverflows can be chained together to spread text across a layout. Let’s go ahead and take a look at a screenshot of a RichTextBlock with a RichTextBlockOverflow working together.

As you can see from this screenshot, we had a RichTextBlock in the upper left and its content overflowed onto the RichTextBlockOverFlow #1, #2 and #3. You can think of this as something that is similar to a newspaper article. As the browser expands or contracts the content fills the available area.

Let’s check out the code that made it happen:

Facebook Graph API and Silverlight Part 2 – Publishing data

editorial@silverlightshow.net (Lazar Nikolov ) — Thu, 17 Nov 2011 14:01:00 GMT

This article is compatible with the latest version of Silverlight.

This is the follow up of my article Facebook Graph API and Silverlight. Don’t miss to check it out to learn more about the Facebook Graph API and how to access Facebook data in the easy way.

More resources...

($9.99)