Url: http://wilderminds.blob.core.windows.net/downloads/RemoteMenu.zip
Now that all my courses are updated I wanted to take a little time and craft up a short example of some of the cool features I like in Silverlight 3.
I have created this little example that shows off the following features:
- Local Connections: The ability to have two Silverlight Apps on the same page communicate.
- Navigation Applications: The new application type that allows you to navigate between ‘pages’ that interoperates with the address bar to support forward/back buttons on the browser.
- ChildWindow: New window control for poping up a ‘dialog’-like experience.
The example contains two Silverlight applications that communicate together. One is a Menu and the other is a navigation application. The Menu sends messages to the navigation application to switch the pages of the application.
Local Connection
For a Local Connection, you need two classes: LocalMessageSender and LocalMessageReceiver. In the Menu project I create the Sender like so;
LocalMessageSender sender = new LocalMessageSender("navFrame");
```csharp
The name in the constructor of the LocalMessageSender specifies a name that the two sides will share. This allows for any number of these message pipes to be used on the same page.
In the Navigation project, I create the Receiver like so:
```csharp
LocalMessageReceiver receiver = new LocalMessageReceiver("navFrame");
```csharp
Now that the side sides are ready, we have to tell the receiver to listen. We can do this by calling the receiver's Listen method but also by registering for the **ReceiveMessaged** event:
```csharp
// Handle the Event to Get Messages
receiver.MessageReceived += new EventHandler(receiver_MessageReceived);
// Start Listening
Loaded += (s, e) => receiver.Listen();
```csharp
Once we are ready for messages, our sender can start sending messages. In this case we are just handling the **Click** event of navigation buttons to send a message:
```csharp
// Send the other Silverlight App
// whatever is in the Tag of the button
sender.SendAsync(((Button)s).Tag as String);
What is interesting is that the communication is somewhat bi-directional with only one sender and one receiver in that in the MessageReceived event you can send a response:
void receiver_MessageReceived(object sender, MessageReceivedEventArgs e)
{
// Navigate to a View named the Message with Page.xaml at the end.
this.Frame.Navigate(new Uri(string.Concat("/Views/",
e.Message,
"Page.xaml"),
UriKind.Relative));
// Send a response (which is being ignored)
e.Response = "Got it!";
}
Even though we’re not listening for the response in our sending app, you might use that facility to have a bi-directional pipe. If you need to send messages (not just receive them), you’d need a sender and receiver at both ends.
Navigation Applications
Navigation applications is a new project type in Silverlight 3 that allow you to have page-like navigation that affects the Address-bar of the browser so you can support back/next support as well as saved links. It works by creating a Frame that represents the Shell of your application and calling Frame.Navigate to move from page to page. Here’s a snippet of the Frame XAML:
<navigation:Frame x:Name="Frame"
Source="/Views/HomePage.xaml"
Background="White" /gt;
The Source attribute specifies a Uri that points at a XAML file in the same project. In this case we have all our Views in a subdirectory so this works. When we navigate to a separate page, the URI of the page changes by adding a Bookmark (e.g. http://localhost:8000/default.aspx#/Views/HomePage.xaml ). Notice the # in the URI which is a bookmark (think anchor tag usage in HTML). The Navigation framework uses what is after the # to determine what the current page is. That’s why our example in the Local Connection section where we were using the message and creating a Uri to call **Navigate **worked.
ChildWindow
On the Home page of our example, we have a button that if clicked will throw an exception. When that error occurs, the example uses a ChildWindow derived class (called ErrorWindow) to show the error to the user. It gray’s out the background application and looks and acts like a real popup window. That’s what the ChildWindow class is for…to create you own dialog-window behavior. Check it out.
You can download the source above or see the application here:
