Snowball - The Blog

Only 10 days ‘till Christmas and thus only 10 more posts after this one to finish my series. In today’s post, we’ll be taking a look at the Local Connection API, a feature introduced with Silverlight 3.

Most of the time, we build full-screen Silverlight applications, meaning that the only function that the HTML still fulfills, is hosting a DIV that will contain the HTML OBJECT tag in which Silverlight will be hosted. However, sometimes Silverlight could be used as an “island” on an HTML page. For example, we could have an HTML page (perhaps rendered by ASP.NET) in which a table of data is shown. The end-user may want a richer experience with this data grid such as reordering rows, efficient paging and so on. We could decide to just convert that specific part to functionality to Silverlight, resulting in a Silverlight island.

To go even further, in some scenarios, it may be needed that two or more of these Silverlight islands live on a single page. Silverlight 2 introduced the HTML Bridge to allow these two Silverlight plug-ins to talk to one another: using Javascript as an intermediate, we could send messages from control 1 to control 2 and vice-versa. While possible, it’s not the easiest way of developing an application.

Silverlight 3 introduced something easier for this particular problem, namely the local connection API. It basically allows two or more Silverlight instances to communicate with each other. These two instances can live on the same page, but can even live on two different browser tabs or even two different browser windows. The API uses a concept of a named pipe: a named sender sends a message into a pipe and a receiver can intercept this message. The message needs to be a string.

The messaging system introduced is based on two types, LocalMessageSender and LocalMessageReceiver, both types that live in the System.Windows.Messaging namespace.

Let’s take a look at an example. The application I built for this post contains two Silverlight controls. The first control contains a few buttons. When clicking on a button, I want to change the background of control n° 2. (Note that these are actually 2 different Silverlight applications hosted on one single page).

The first thing we need to do is creating an instance of the LocalMessageSender class. As parameter, we pass in the name that will be used as the identification (ColorSender), like so:

private LocalMessageSender localMessageSender;

private LocalMessageReceiver localMessageReceiver;

public MainPage()

{

    InitializeComponent();

    localMessageSender = new LocalMessageSender("ColorSender");

}

When we click on a button, we’ll send a message using this instance. In this case, we pass in the name of the color we want:

private void RedButton_Click(object sender, RoutedEventArgs e)

{

  localMessageSender.SendAsync("Red");

}

private void GreenButton_Click(object sender, RoutedEventArgs e)

{

  localMessageSender.SendAsync("Green");

}

private void BlueButton_Click(object sender, RoutedEventArgs e)

{

  localMessageSender.SendAsync("Blue");

}

In the second application, we create a LocalMessageReceiver, passing in the same string, ColorSender, as the name of the sender it should listen to. We then specify the handler for the MessageReceived event, which will trigger when a string is received. The receiver starts listening for values by calling its Listen() method:

private LocalMessageReceiver localMessageReceiver;

public MainPage()

{

  InitializeComponent();

  localMessageReceiver = new LocalMessageReceiver("ColorSender");

  localMessageReceiver.MessageReceived += 

  new EventHandler<MessageReceivedEventArgs>(localMessageReceiver_MessageReceived);

  localMessageReceiver.Listen();

}

Based on the value of the received message, we change the color:

void localMessageReceiver_MessageReceived(object sender, MessageReceivedEventArgs e)

{

  switch (e.Message)

  {

    case "Red": LayoutRoot.Background = new SolidColorBrush(Colors.Red);

                ColorTextBlock.Text = "RED";

                break;

    case "Green": LayoutRoot.Background = new SolidColorBrush(Colors.Green);

                  ColorTextBlock.Text = "GREEN";

                  break;

    case "Blue": LayoutRoot.Background = new SolidColorBrush(Colors.Blue);

                 ColorTextBlock.Text = "BLUE";

                 break;

    default: LayoutRoot.Background = new SolidColorBrush(Colors.White);

             ColorTextBlock.Text = "WHITE";

             break;

  }

}

The code can be downloaded here: SLLocalConnection.zip (97.1 KB)