Introduction
Designing the patterns for your user interface is crucial as far as the user experience is concerned. The need for implementing the Breadcrumb design pattern arises when you need to place an option for the users of the application to know where they really are; for example, in a hierarchical structure where users need to go forward and backward. It’s especially useful when you want to create navigational functionality which will allow users to move several steps forward and backward. There are in general three good positions to place breadcrumbs: Above everything at the top of the page, just below the main navigation bar and just above the headline of the current page, like the screenshot below:
Figure 1: Sample Breadcrumb screenshot
In this article I’ll design this interaction pattern using Expression Blend 3 preview, Silverlight 3 and VisualStudio. Following is the screenshot of the completed application.
I’m going to show you the breadcrumb structure by going through the two menus Home and Albums. This application is still under construction. Hopefully I’ll tell you more about this application after completion. For now I’m going to just concentrate on creating the menus and sub-menus; and the breadcrumb pattern structure for Home and Albums.
Starting the project
I’m assuming that by now you have a clear understanding of what a breadcrumb really is. Let’s delve into practical demonstrations with Silverlight 3 and Microsoft Expression Blend 3 trial. I’m going to create this project with Expression Blend 3 Preview. Open Expression Blend 3 preview if you have it already installed in your machine. Select File->New Project. This will bring up the following dialog box:
Name the application as you like and click OK. You’ll see a MainControl.xaml page with a grid named LayoutRoot as its parent element.
Now go to the Project menu and select add New Item. This will bring up the dialog box below:
Select UserControl and name it BreadcrumbUI, since we are going to create the user interface for the breadcrumb. Click OK to open the UserControl in your Blend workspace.
Creating the Layout
Again you’ll see a Grid named LayoutRoot as its parent element in the Objects and Timeline panel. Select the LayoutRoot object and change the background by selecting the Gradient Brush option in the properties panel.
After selecting the gradient brush option, you’ll be able to see two gradient stops. Add another gradient stop at the middle of the two. Select the first gradient stop and set the value to #FF000000. Select the middle gradient stop and set its value to #FF686868 and finally select the third gradient stop and set its value to #FF000000 like the first gradient stop. This will produce the following output:
Add two rows and columns to the LayoutRoot:
With the parent LayoutRoot element selected go to the toolbox area and select the Border option to add a Border inside your Layout Root.
Double click the Border in the toolbox to add it inside the LayoutRoot. Remember that LayoutRoot must be selected if you want to add a Border inside it by double clicking it from the toolbox. Name the Border brdContent. Place brdContent in the first column of LayoutRoot. After adding Border as a child element of LayoutRoot you’ll notice in the properties panel that the Border’s Width property is set to 100 by default and HorizontalAlignment is set to Left by default. Change the width to Auto, Height to 106, HorizontalAlignment to Center and VerticalAlignment to Top. Also change the CornerRadius to 6,6,6,6, and BorderThickness to 1,6,1,6. Select the Gradient Brush option again to set the color of the BorderBrush to #FF000000, #FFFFFFFF, #FF000000 for 3 gradients respectively. Now your UI should look like in the following screenshot:
Now add a little text effect by adding a TextBlock inside LayoutRoot. It will be just below our menus. Here’s the Xaml for the TextBlock:
You’ll have a text effect like this:
Setting up the links for the Menus
Add a Grid inside named brdContent the Border. Name the Grid grdLink. It’s a good practice to always name a control. This will help you find the control when you have many controls in your application and you need to modify the design or change a property of one of them. This is my personal experience but it has proved handy.
Now set its Width and Height to Auto. Set the HorizontalAlignment to Stretch and VerticalAlingment to Top. Select grdLink in the Objects and Timeline panel and add six columns and two rows. I’m not going into the details of adding columns and rows. I’m assuming that it will be easy for you. So switch to the Xaml view in Blend and paste the Xaml below inside the grdLink:
With the grdLink selected in the Objects and Timeline panel, switch to the Asset Library and select HyperlinkButton. This will add a HyperlinkButton for you.
Double click over the HyperlinkButton you just added in the toolbox. Add Six HyperlinkButtons like this and place six buttons in six columns. Row with index 0 corresponds to the first row.
Select the first HyperlinkButton in the Objects and Timeline panel and set the properties of the HyperlinkButton. Set the Content to Home, FontSize to 16, FontStyle to Bold and Foreground to #FF0AEDF6. Don’t forget to name the button according to its content. For example, the HyperlinkButton which has the content Home should be named btnHome, like this:
Or in Visual Studio in the Xaml View write the following code:
Now select the second HyperlinkButton in the Object and Timeline panel and set its Content to Albums, FontSize to 16, FontStyle to Bold and Foreground to LinearGradientBrush. Value should be exactly like the following:
Select the third HyperlinkButton and set its Content to Artists and the other properties as you did for the first and second HyperlinkButton. Set the Content of the fourth, fifth and sixth HyperlinkButton to Biography, Videos, About and set the remaining properties like the other three HyperlinkButtons. At this point you’ve set the properties of all the Six HyperlinkButtons you’ve added inside the grdLink grid.
You should now have an UI like the screen shot below:
Add a HyperlinkButton in the second column of LayoutRoot and change the content to Login. This will be our Login button. Add another button in the second row of the first column and change the content to Search. Add a TextBox in the second column of the second row. This should produce something like this:
Switch to Visual Studio
You need to switch to Visual Studio by right clicking over the MainControl.xaml.
In fact right clicking over any Xaml page will give you the options of editing the files in Visual Studio. After selecting this option your project will be opened in Visual Studio.
First right click over the project and select Add > New Folder to add a folder in your project. Name the folder Views. Now add a reference to the navigation library by right clicking over References and selecting Add Reference.
This will provide you access to the navigation library in order to get the navigation functionality for your application. In the Xaml view of the BreadcrumbUI add this namespace:
This will provide access the navigation library from Xaml. Inside the root element of the BreadcrumbUI (which in this case is a Grid named LayoutRoot) add a frame by pasting the following Xaml:
The Xaml above creates a Frame element and its HorizontalAlignment and VerticalAlignment are set to Stretch, like HorizontalContentAlignment and VerticalContentAlignment. The Source property has been set to load the HomePage.Xaml as the default page whenever we run the application. This is a crucial property because we need to show the Home page whenever the page loads. Margin has been set to 0,5,0,0 and this frame element has been placed at row 1, which means the second row. We have two rows in our LayoutRoot (the Grid which is being used as parent element). The first row holds the brdContent Border. Inside brdContent there’s the grdLink Grid the six HyperlinkButtons we have added earlier). This will be used as a menu for our site. To complete the menu settings, in the object and timeline panel select grdLink (Grid) which is inside brdContent (Border in the first row of the LayoutRoot).
Note: When you work with a project by opening both Expression Blend and Visual Studio, each time you modify something in Visual Studio and Expression Blend, both the tools will give you the option of saving changes. Something like the screenshot below.
Click Yes to All if you feel that everything is going right and you want to save the changes and see them in Blend. Otherwise click No to All. It depends on you. I’m just showing an example here.
Now add six Grids inside the grid named grdLink by selecting grdLink in the objects and timeline panel of Blend and double clicking the Grid control from the toolbox. Remember you need to first select the grdLink in order to activate it in the object and timeline panel of Blend. This will add all the grids as children of the grdLink. Name each Grid whatever you like. In this case I’ve named them grdmenuItem, grdmenuItem2 etc. We will use these as items of each menu of our Silverlight page.
Now select the first InnerGrid in the object and timeline panel and select a Grid in the Toolbox. Double click over the Grid to add it as a child on the grdmenuItem InnerGrid (the grid we added to serve the propose of creating items for the menu). This is where naming the Control proves extremely handy because we’re using plenty of Grids. Naming the Grids properly will help us finding out which one does what for us. Switch to the Xaml view and add two rows for this Grid by pasting the following Xaml:
The properties of grdMenuItem should be set something like the screenshot below:
If you look carefully at the above screenshot you’ll see that I’ve set the Width and Height of grdMenuItem to Auto, HorizontalAlignment to Center, VerticalAlignment to Stretch.
Here is the completed Xaml for grdmenuItem:
Do the same for the other Grids you’ve added inside grdLink to use as menu items. Set the same properties as you did for the grdmenuItem Grid inside grdmenuItem and for the two HyperlinkButtons. If you follow my instructions exactly, you should have an UI that looks like the following:
In the Objects and timeline panel select the Grids you’re using as menu items:
Then set the Visibility property to Collapsed.
Do the same for the other grids you’re using as menu items. At this point you’ve finished the Menu section of your page.
Creating Pages for structuring the Breadcrumb
Add a folder to your project by right clicking over the project template in the Projects panel of Blend and select Add new Folder.
Name the folder Views. Now right click over the folder and select Add New Item.
Selecting the Add new item option will bring up the following dialog box:
Select the Page option to create a new page for your site. Name the Page as HomePage.xaml. This will be our HomePage which will be shown when we run the application. Add a couple pages. Add Pages for every menu items in order to navigate to those pages. I’m not going into much detail about adding other pages. I’m assuming this will be pretty easier for you. Check out the code for this application if anything looks confusing. Now let’s switch to Visual Studio to wire some interactivity. It is also possible to switch to the code behind in Blend but I feel more comfortable adding C# using Visual Studio. Add a Tag property for all the HyperlinkButtons you’ve added and also define events for the buttons. Here’s the Xaml:
Look at the properties of the above HyperlinkButton named btnHome. It has a Tag property which has been set to /Views/Homepage.xaml. This is an important property of HyperlinkButton since navigation depends on the Tag property. Assign this property to the URL.
Note: The Tag property will point to the location where your pages have been added into the Views Folder. For example, for btnRockBands, it will be /Views/RockBands.xaml.
Adding C# in Visual Studio
Right click over the Click event of the Hyperlink button from your Xaml editor in Visual Studio and select the Navigate to Event Handler option.
This will add an event handler for the HyperlinkButton.
Now add this code inside the event handler:
Look at the above C# code for the btnHome event handler. At first I did a cast to HyperlinkButton with this line:
As you can see the sender is an object declared as one of the event handler parameters in the Home_click routine. In the next line I’ve declared a URL which is of type string and I’ve assigned it to the Tag property of the HyperlinkButton. In the last line I’ve called the Navigate method of the Frame element, which is named Mainframe, and passed the URL I set earlier. Now add an event handler for MouseEnter by doing the same as you did for the Click event. Here’s the MouseEnter event handler:
In this routine I have checked out the condition and assinged the Visibility property of the Grid which we named grdmenuItem. Its Visibility property was set to Collapsed. I’ve set the condition to change the Visibility property to Visible on mouse enter, and assigned all the Grids’ (which were added to use as menu items) Visibility property to Collapsed. The purpose is to make its menu item visible when the mouse is over btnHome. We will do the same for the other menus’ MouseEnter event handlers. Here’s another MouseEnter event handler for the menu Albums:
If you look carefully at the MouseEnter event handler above, you’ll notice that its goal is the same as the Home_MouseEnter event handler, except that grdmenuIteme2’s Visibility property is set to Visible since we need to show the menu items on mouse over.
Designing The Pages For Breadcrumb
Switch to Expression Blend again and design the pages you added in the Views folder. Select the LayoutRoot of the HomePage and add a column. Then set the background like the following:
In the above Xaml I’ve set the Background of the LayoutRoot to a LinearGradientBrush with three GradientStops. After setting the background for the LayoutRoot, add a column to it and then place a Button.
I’m not describing here how I templated the button and HyperlinkButton since we’re only interested in desgning the breadcrumb. It will show the content Home when the HomePage first loaded and this will be the users’ current location of our site. As I told earlier the idea behind the bradcrumb is to show where the user is when he’s browsing a site. The current page won’t be a link.
Here are the properties for btnHome:
Open RockBands.xaml from the Views folder and add three columns for the the root element of the page named LayoutRoot (Grid). In the first column place a HyperlinkButton and set its content to Home; and name it btnHome. This will help us navigate to our HomePage. In the second column add a Button and name it btnRockBands. Then set its content to RockBands. Again you can see that I’m using a button because we don’t need any link for the RockBands page, since we’re currently in the RockBands page and this templated button shows the arrow to to navigate to the next page. It also indicates the location of the current page by showing an underline at the bottom of the button. The idea is to use a Button with this type of template to show where the users are.
Note: The last item will never have an arrow after it. This is one of the specifications of the breadcrumb pattern.
If you’re confused, here’s the format again.
Figure 29: When the page page first loads it shows the Home page
No breadcrumbs is placed here, since this is the topmost page where users will be after entering the site.
In the RockBands page I used a HyperlinkButton (Home) in the first column for navigating to the HomePage from the RockBandsPage. I’ve used Button with the same template in the HomePage’s btnHome to indicate the current location. Remember that in both cases clicking over the button won’t help you navigate to the other pages, because there won’t be any link for the current page. You can see in the above screenshot that there’s no arrow for the last item.
Now open the HeavyMetalBands page in Expression Blend and design it. Add three columns for the three buttons. This time the HyperlinkButton will be in the first and second columns; and a button in the third. Here’s the screenshot of our HeavyMetalBands page:
This page has the btnHome HyperlinkButton to navigate to the Home page and btnRockBands to navigate to the RockBands page. btnMetalBands shows the current location. There’s also a templated button to show the current location to the user.
Now switch to the Xaml view of the RockBands.xaml and set the Tag property of btnHome to /Views/HomePage.xaml. Switch to Visual Studio again and add some C# code for the btnRockBands. Here’s the code:
In this event handler I have declared a HyperlinkButton and assigned it to object. Then I’ve declared a variable of type string and assigned it to the Tag property of the HyperlinkButton. Finally I’ve called the Navigate method of the NavigationService and passed the URL. NavigationService allows us to get access to the Frame control that has navigated to this page. At this point we have wired the click event of the HyperlinkButton named btnHome and added logic to navigate to the Home page.
Switch to HeavyMetalBands.Xaml and set the Tag property for btnHome and btnRockBands to /Views/HomePage.xaml and /Views/RockBands.xaml respectively. Also don’t forget to add Click event handlers for both the buttons and to follow the same process I showed you to add event handlers to the code behind. Something like this:
Add this code inside the event handler for btnHome:
Logic is the same as the RockBands_Click event handler that you added in the previous step for the RockBands page in order to navigate to the RockBands page. Adding this logic inside btnHome will take you to the HomePage. Add the same logic for the btnRockBands Click event handler:
This will help you to navigate to the RockBands page.
btnHeavyMetal is a traditional button and thus it has no link and it’s not possible for us to navigate to anywhere. The reason is that at this point we have reached the end point of our breadcrumb.
For your convenience here’s the completed Xaml of HomePage:
Here’s the screenshot of the page step by step. When we run the app we’ll be at the Home page:
Then we’ll navigate to the sub-menu of Home which is RockBands:
And after RockBands, Home has another sub-menu which is MetalBands:
Designing The Breaedcrumb structure for the Albums menu
Add another page in the Views folder by right clicking over it and selecting Add New Item. Select the page option and name it Albums. This will be our Albums page. When we click over the albums menu this page will be shown. Design the Albums page by pasting the Xaml below:
When you step into the Albums menu you should see a page like the following:
The design is pretty simple and it’s not different from our previous page design. I have just added two columns inside a Grid and placed a HyperlinkButton and a Button. The HyperlinkButton will allow us to navigate to the Home page and the button will show the the current location. Add the following code for the button’s Click event handler:
This will help you to navigate to the HomePage. Open the RockAlbums.xaml page. Paste the Xaml below:
Since the design is the the same as the previous pages, I’m not explaining it again and I hope you’ll be able to understand it. Now you should have page like the following when you navigate to the RockAlbums page, which is a sub-menu of Albums:
Open the HeavyMetalAlbums.xaml page and paste the Xaml below:
Now you should have a page like the following when you navigate to the HeavyMetalAlbums page, which is another sub-menu of the Albums menu:
This page has four columns; three for the 3 HyperlinkButtons and one for a button to show the current location. btnHome in this page will help you to navigate to the HomePage; btnAlbums will help you to navigate to the AlbumsPage; btnRockAlbums will help you to navigate to the RockAlbums page and btnMetalAlbums, which is a traditional button, will show that you’re in the HeavyMetalAlbums page and this won’t be a link. Follow the same format for the other menus to implement the breadcrumb. That’s it.
Conclusion
Breadcrumb is useful when a web site has a lot of pages and users really need to find their way around. Breadcrumb navigation greatly reduces the number of actions users need to take by giving them an option for navigating directly into the section they want. I hope you’ve enjoyed this demonstration of the breadcrumb pattern with Silverlight 3.
About Faisal Khan
 |
Currently working at Vectorform as a Silverlight developer. His passions revolve around creating the next generation desktop application and Rich Internet applications. His goals are to create applications which will serve the user in a friendly and traditional way, but will keep pace with next ge...
This author has published 11 articles on DotNetSlackers. View other articles or the complete profile here.
|
You might also be interested in the following related blog posts
Expression for Art’s Sake – Silverlight and Blend in Wellington, New Zealand
read more
Creating A Form Level 100
read more
Intersoft Solutions Releases WebUI Studio 2009 The Worlds Most Innovative Web Development Toolkit
read more
Telerik Announces Support for Microsoft Silverlight 3
read more
Why Embedded Silverlight Makes Sense
read more
Building A Product For Real
read more
Expression for Art’s Sake – Silverlight and Blend in Wellington, New Zealand
read more
So Much Is Happening The Silence Is Deafening!
read more
Detecting Design Mode in Silverlight
read more
Twilight 1.5: Multiple Views with MVVM
read more
|
|
Please login to rate or to leave a comment.