Silverlight Browser…Building the Foundation

So, in my first and second posts in this series I laid out the justification and high level requirements for a Silverlight browser. In this post I’ll walk through building the basic shell for our browser. This isn’t anything overly cool or sexy, but it has to be done as it’s the foundation for the rest of the project.

First a little housekeeping. I created a Visual Studio solution named Silverlight.Navigation to house the source code for this endeavor. The solution, as you can see below contains three projects.

Silverlight.Navigation.Controls – This is where most of the work will be taking place. This project will contain the necessary controls and infrastructure for the Silverlight browser.

Silverlight.Navigation.Demo – This is a small Silverlight demo application we will use to consume the controls created in Silverlight.Navigation.Controls.

Silverlight.Navigation.Demo.Web – This is the website used to host the Silverlight.Navigation.Demo application.

Also, the UI for this initial portion of the project is intended to look the way it does. This is just an experiment after all and I don’t want anything looking too finalized or polished as it might distract us from what we’re trying to accomplish.

Now that that’s out of the way let’s get to the task at hand. The first thing we need to do is define what exactly it is I’m building in this phase of the project.

1. A navigation container (or toolbar) that can be used to hold all the navigation features (i.e. menus, breadcrumbs, address bar, etc.) that we want to build into the browser. This container should be expandable and it should have some options around when it’s displayed.
2. The browser shell. This will contain our navigation (above) as well as a way to display navigated content.

Ok, easy enough, let’s move on to the implementation. Here’s the structure of the Silverlight.Navigation.Controls project

The first thing I did was to create the navigation toolbar (NavigationToolbar.xaml). The UI is simple enough at the moment. It’s nothing more than an Expander (new to Silverlight 3), with three TextBlock placeholders for where our future features will go. I added an IsExpanded property to the control to allow consumers to control the IsExpanded state of the control’s Expander control

Next up I wanted to create an enumeration that defined the values for when the navigation toolbar was to be displayed. I created an enumeration named DisplayNavigationToolbar (I know, really original) in the Enums.cs file. I gave the enumeration the following values: Always, InBrowser, None, OutOfBrowser.

The last step was to create the browser (Browser.xaml). This is nothing more than a StackPanel with our NavigationToolbar and a TextBlock placeholder for our navigable content. Since we don’t have any content yet, I choose to use the TextBlock placeholder here so you could see where the content will reside when running the app. Once we starting adding some content we’ll replace this TextBlock with a NavigationFrame.I added a couple of dependency properties to the browser. The DisplayNavigationToolbar property allows consumers of the browser to control when the toolbar is display by setting it to one of the values of the corresponding enumeration. The IsNavigationToolbarExpanded property allows consumers to control whether or not hte toolbar is expanded by default.When the browser loads we simply set the NavigationToolbar’s IsExpanded property to the value of the browser’s IsNavigationToolbarExpanded property. We then check whether or not the app is running offline (via App.Current.RunningOffline) and set the visiblity of the NavigationToolbar appropriately. No black magic, pretty straightforward.

That’s it. Seriously. Oh, wait you want to see it work? Ok, let’s wire it up in the demo project. Here’s the structure for the demo project:

Pretty basic at this point. It will start to grow as we add navigable content.

(While not shown here, I did modify the AppManifest.xml to suppor the out of browser experience.)

Main.xaml is the control that contains our browser. As you might expect, I had to add a namespace declaration for Silverlight.Navigation.Controls in the markup in order to get access to our newly created browser control. I thought that was all I would need to do, however, the browser would never render. This was because I also needed to add namespaces for the System.Windows.Controls in the System.windows and System.Windows.Controls.Navigation assemblies, as show below:

Once I did this the browser rendered no problem. As you can see above, I set the navigation toolbar to only display when running out of the browser and to expanded by default.

In Browser Experience:

Out of Browser Experience:

I’ve decided to house the source code for the project on codeplex. The code associated with this post is available here.

I’d say we’ve successfully delivered on phase 1. Next up creating the application map. This will allow us to define the structure of our applications and create controls (i.e. menus) that can consume the map. Stay tuned…