Previewing Navigation Pages in Silverlight 4


Introduction

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

Previewing1.gif

Create Silverlight Navigation Application

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

Previewing2.gif

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".

Previewing3.gif

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

The following image displays the Slideshow.xaml page.

Previewing4.gif

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

Previewing5.gif

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

Previewing5.1.gif

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

Previewing6.gif

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.

Previewing7.gif

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

Previewing8.gif

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.

Previewing9.gif

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.

Previewing10.gif

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.


Similar Articles