Editor’s Note: This is not a new tutorial, it’s been done already by several people in Visual Studio, however there are quite a number of folks out there who use Expression Blend 3 to create Silverlight 3 applications who do not venture into Visual Studio at all that I am aware of out there who have been asking how to do this in Expression Blend 3. So without further interruption here’s how to create ASP.NET like XAML master page applications in Expression Blend 3 for Silverlight 3.

Master Page Concepts

If you have worked in ASP.NET before you have probably heard of Master Pages before.. Many people who don’t use ASP.NET get this all confused with client side technologies for styling how a page looks and works.. The concept is simple. Master pages let you separate dynamic content regions from the actual static regions of content that doesn’t change on the page. This is known as a “template”. Dynamic content usually is content that requires some type of server side processing like a master/details view, etc.…

 

 

In WPF it has always been easy to do this type of navigation, however Silverlight 3 just added a navigation framework that makes this type of functionality now more easily available… Let’s work through this from a designers perspective and how to actually accomplish this.

First let’s create a design template. For the purposes of making this easy we’ll start in Adobe Photoshop. Just to prove you don’t need the entire Adobe Creative Suite for this activity we will start the design in a free work alike to Photoshop and work from there… Let’s start with a home page template..

I will use the free Paint.net for this example, however you can use any garden variety of Adobe Photoshop (as long as it saves out to LAYERED PSD files) this includes Photoshop Elements and Adobe Photoshop CS-CS4..

Let’s choose our page size... For those of you using Expression Web 3, I usually choose one of the page sizes that are defaults in their program..

In this case I will go into paint.net and choose a page size of 955x600 or 1024x768 maximized which still works with most web browsers today as a minimum size for content display.. If you just downloaded it, the product doesn’t come with PSD file import or export directly. We can change this by downloading the plug-in and installing it in the paint.net folder under program files..  You can download Paint.net and the PSD plug-in here..

http://www.getpaint.net

http://frankblumenberg.de/doku/doku.php?id=paintnet:psdplugin

Now I use the tool to create my layered design..

After I am satisfied with the layout I will save the file as a PSD format file..

Next I will import the design into Expression Blend 3 using the PSD format importer..

I open Expression Blend 3 and from the “File” Menu, I select New Project and Select Silverlight 3 Application Plus Web Site..

for this project I will also name the project “MasterPageswith NavigationSL3” and click “OK” to open my project..

Next I have to set the dimensions of my MainPage.xaml file which I will set to my original canvas size..

First I go to the “Objects and Timeline” tab and select the UserControl for the MainPage.xaml file that we are working with in Blend..

 

Next over on the properties tab I set the LAYOUT properties to have a width of 955 and height of 600..

Next I import the PSD file by going to the file menu and selecting.. “Import Adobe Photoshop File..”

Next I select the design and check the layers I wish to import..

After clicking “OK” I have the design imported.. Notice that on the Objects and Timeline each of my layers are neatly imported.

So we have our design template imported.. What’s left to do, well lets create a couple of navigation buttons and create a dynamic content area where we can add different content…

So let’s create buttons. Of course as a designer I’d want to go in and style them to match the design, but for the purposes brevity  I am going to keep the buttons to their “unstyled” versions.. To create buttons I go to the blend controls palette and search for “button”.. For this tutorial I will use a hyperlinkbutton but could use any other button or control, or further more any control such as the hyperlink button…

Next I will create Hyperlink buttons and move them to the design surface for “Home”, “Schedule” and “Register” and finally “Contact”, as I do this they will appear on my layout root and my design screens as shown below. I create them by dragging the “HyperlinkButton” from the controls palette onto the design surface..

Next I name the “HyperlinkButton” controls with a descriptive name, then set there content properties and their foreground color to a yellow to match the other text in my design..

Now that we have our buttons and our master page design nearly complete let’s make a folder and assign our content pages (for this tutorial we will call them VIEWS).. To do this we need to go up to the project tab and select the C# project in our solution and right click on this. From the pop up menu select Add New Folder and then create a new folder called Views..

After your done your Solution should look like this below..

Now with the folder selected we right click on the folder and select Add New Item

From the pop up dialog that comes next select “Page” and in the Name box type Home.xaml  to create our first navigational Home page..

 

Repeat the last two steps until your C# Solution on the project tab looks like this and you have created all of your content pages

Next we will add in the content frame to the “master page”..

From our controls palette we will search for and select the "FRAME”  control..

Next we can go to the design surface and draw in the control…

after drawing it in name the region ContentRegion1 in the properties tab..

You can also verify this from the Objects and Timelines Tab

Next we have to wire up the content pages/views that we created to the frame we have just created and enable the buttons to navigate to and from these views..

Before we do this we have to establish in the frame which page/view we have created is the “Default View” for this frame when it comes up..

To do this we have to set the Source property on the frame..

Notice above I have created a “home.xaml” in the views… After selecting this we will have set the default page it will automatically show in the frame (or content region if you prefer)..

At this point we should save our work for safe keeping..

Next,  after we have done so you will notice that there is nothing has changed.. This is because we have no content in Home.xaml itself.. Let’s add something so we know that we have something there..

so lets open \Views\Home.xaml and add in some content..

open Home.xaml and lets add a TextBlock  control and some text identifying it as a content page (or view)

We should at this point save this and we can run our project to see if this shows up (Hit F5 or Run from the project menu)..

Our default content now shows up in the frame area..

to change the title of the home page or any other page which shows up in the web browser we simply change that page’s title property..

A note about state management (or in ASP.NET vernacular View State):

While the purpose of this tutorial is to create navigable content regions, when the content regions (aka “Pages”) are loaded up in the “frame” they are loaded up and initialized as if they were new, in other words if you navigate away from a view, all the content will not automatically get cached, so if you navigate away to another page the information is lost unless you keep track of this information yourself (usually in the code). However you can pass information to and from these views through the URL just as you could from an ASP.NET page..

Now let’s continue by wiring up our navigation buttons..

Click on the “Home” hyperlink button.. Notice because the hyperlink button is a special “Navigation Button” it exposes a new property that regular buttons don’t have called the NavigateURI property in the properties tag..

from there we can just simply select a page we want this to button to navigate to…

We can then on each hyperlink button select the corresponding xaml page on each of the buttons (Home.xaml for home, Schedule for Schedule, etc.) and the frame content will instantly appear when we click on the button.. 

If we hit F5 and run the project again we will see that all of the pages are navigable. Also the URL in the web browser address bar changes when we hit each XAML page or view making this very SEO (Search Engine Optimization friendly for content)..

The URL below appears in the web browser address bar after we have navigated to the schedule page for instance:

http://localhost:4395/Default.html#/Views/Schedule.xaml 

Let’s say you wanted to use a graphic or a regular button or a graphic that we have turned into a button that isn’t a "navigation control” like the hyperlink button is..

How would we do this with the special NavigateURI property unavailable?

Well we can thanks to the “Tag” property and a little code which is available from all button types including graphical buttons..

Let’s add a regular graphical button to the design and name it (we’ll call this button “NotaHyperLinkButton”) and in the Tag property we’ll add a relative path to one of the pages in the “Views” folder..

(note: you could add a custom style to this but for the purposes of this tutorial I am not..)

Next we need to wire this button up to the navigation framework..

So we will need to add references in our project to the navigation framework and add some code to tell the button to call the navigation framework when the button is clicked..

first we have to look in our project and make sure that System.Windows.Controls.Navigation is present in the C# project references.. It should be already there, and if it is we are good to go..

If not we need to add it by right clicking on the References folder and clicking “Add Reference” then adding System.Windows.Controls.Navigation.dll which can be found in:

C:\Program Files\Microsoft SDKs\Silverlight\V3.0\Libraries\Client\System.Windows.Controls.Navigation.dll  (on x86 Windows)

or

C:\Program Files(x86)\Microsoft SDKs\Silverlight\V3.0\Libraries\Client\System.Windows.Controls.Navigation.dll   (on 64-bit Windows editions)

The Tag Property to the Rescue

Next we click on the new button again and find the “Tag” property on the Properties Tab in Blend.. You will find it in the “Common Properties” section..

We can point it at one of the content XAML pages in the “Views” folder by typing in the relative path to it. For this example button I am going to have it go to our registration content page..

“/Views/Register.xaml”

By adding this to the tag property we have just referenced the proper content page we have asked for, but we still need to set up the “Click” event on the button so the event fires up properly to send us to the appropriate registration content page.. Let’s do this now..

Firing the Click Event from the Button

After selecting the button we have just created, I go over to the properties tab (panel) and click on the EVENTS button  ..

 

then I add a click event for that button by typing a name for it in the click event property box..

We will call this “NavigateButton_Click”

and hit ENTER

This will bring us to our code behind window

Make sure that there is a reference to System.Windows.Controls at the top

Next we will add our code to navigate the button to the page specified in the “Tag” property that we set up a bit earlier..

Inside the NavigateButton_Click event handler that Expression Blend 3 just added for us we can add a few lines of code.. Note this code is written to work with one or all buttons generically on the page and route them each to their appropriate page based on the path to that page found in the tag property..

private void NavigateButton_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            // TODO: Add event handler implementation here.
            Button btn = sender as Button;
            string url = btn.Tag.ToString();
            this.ContentRegion1.Navigate(new Uri(url, UriKind.Relative));
        }

Let’s walk through the code…

Button btn = sender as Button (this addresses the “Button” or Buttons that we have on the page generically

The second line of this code creates a string variable called “url” and pulls the value we have in the Tag property for the button and converts it to the string giving us “/Views/Register.xaml” back as a string so we can feed it as a string to our navigate command on the next line

string url = btn.Tag.ToString();

string url = btn.Tag.ToString();

The next line actually does the navigation..

this.ContentRegion1.Navigate(new Uri(url, UriKind.Relative));

This last line specifies our Frame which we named ContentRegion1 as the place to insert our content at and the rest of the line just tells it the content page we are to place in that content region (or frame control)

Now that we are done our code window should look like this…

Hitting F5 should now run our project and the code should all be wired up and working..

Passing information through the URL

It is possible to pass information such as a customer ID and different information to the URL.. Such as a customer ID to use with databound information to create a Detail View.. To do this you can simply use the “Tag” property to set up a databinding to a specific data bound item using the “Tag” property. This allows you to pass a value into the view and interpret it based on the binding..

In the case of the hyperlink buttons like we used before we simply setup our databinding directly to the “Tag” property..

In this case the XAML would look something like this..

<HyperlinkButton FontSize=”24” Content=”{Binding LastName}”  Tag=”{Binding ID}” Click=”HyperlinkButton_Click”/>

You can setup this databinding right inside the Blend DataBinding option by clicking on the Tag Property Divot to enable advanced DataBinding in Blend as well.. Since this isn’t a tutorial on databinding and creating master/detail views I will leave more on this subject to a follow up posting..

Anyway that’s my Blend 3/ Silverlight 3 Navigation Tutorial in Expression Blend 3 hope you find it useful and helpful..