Previewing Navigation Pages in Silverlight 4

In this article we will see how we can preview a page without actually navigating to it in Silverlight 4.

Introduction

In this article we will see how we can preview a page without actually navigating to it in Silverlight 4.



Create Silverlight Navigation Application

Fire up Visual Studio 2010, and select Silverlight Business Application Project from the templates. Name the solution as PreviewSample.



The template above will create two sample pages for you. Such as "Home" and "About Us".

We would add a new page as "SlideShow.xaml".



Let's add some images to the page for a mock of slide show.

The following image displays the Slideshow.xaml page.



Now that our page is ready, let's add the link to the Application. Open MainPage.xaml and add the link there as follows.



Now, we can test the application for the navigation purpose.



Now we will add two events such as MouseEnter and MouseLeave to the Hyperlink Buttons in MainPage.xaml.



As you see in above xaml display, Preview_On and Preview_Off are respective event handlers for MouseEnter and Mouse Leave.

We would create a Border and a Popup element to display the Preview.



Now in Preview_On event, we can write the following code.



As you see in the above code display, we are sending the position of mouse and the HyperlinkButtons's NavigateUri property as a string to a method "CreatePreview".

In CreatePreview method we create a Frame and add that to the Popup and display.



In the above code display, the Green blocked property is very much required otherwise you would not be able to see the mouse hovered link.

Let's run the application and see how it would look.



That's it. Worked fine, you can add some good designs for the preview. And for the user you can add a checkbox for preview on or off.

Hope this article helps.