Silverlight Navigation Project (VS2008) – Question



I have created a minimal project to illustrate the problem. I am using VS2008 SP1 and Silverlight 3.

I created a Silverlight Navigation Project, Added a Product Model, A SingleProductView, and a ProductViewModel.

I added 2 new Pages Review.xaml and Cart.xaml.

Review.xaml uses the SingleProductView to display the product details and an [add to cart] button which when clicked should add the product to the Shopping Cart and then navigate to the Cart.xaml page.

The problem I have is in the SingleViewModel.

The SingleViewModel contains a button (btnAddToCart), which should add the product details to the cart (will be a database populated using a web service call) and then it should navigate to the Cart Page (Cart.xaml)

<UserControl x:Class="SL3NavTest01.SingleProductView"
    d:DesignWidth="950" d:DesignHeight="800">
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
            <Image   Source="/SL3NavTest01;Component/Assets/Images/VS2010Ultimate.jpg" Stretch="None" Height="200" Width="200"
											HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <StackPanel Margin="20,0,0,0">
                <TextBlock Text="{Binding Name, Mode=TwoWay}" TextWrapping="Wrap" Margin="0,30,40,0"
									FontFamily="Verdana" FontSize="18" Foreground="Black" FontWeight="Bold" />
                <StackPanel Orientation="Horizontal" Margin="0,30,0,0">
                    <TextBlock Text="Price: " FontFamily="Verdana" FontSize="16"
										Foreground="Black" FontWeight="Normal" />
                    <TextBlock Text="{Binding Price, Mode=TwoWay}"
										FontFamily="Verdana" FontSize="16" Foreground="Black" FontWeight="Normal" />
                    <Button x:Name="btnAddToCart" Width="75" Margin="0,30,0,0" Content="Add To Cart"

Imports System.Windows.Browser
Partial Public Class SingleProductView
    Inherits UserControl

    Public Sub New()
    End Sub

    Private Sub btnAddToCart_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        '   The project has been simplified so as to only include the structure and context of where the
        '   problem exists.
        '   On clicking this button the code should:
        '   1.  Add Product to Shopping Cart (via Web Service)
        '   2.  Then navigate to the Shopping Cart Page (\views\Cart.xaml)
        '   Code to add product to shopping cart (I can do this part!)
        '   ----------------------------------------------------------
        '   Code to navigate to Cart.xaml (This is the problem!!!)
        '   ------------------------------------------------------
        '   I can't find a syntax that would do the equivalent of the following:
        '   ContentFrame.Navigate(New Uri("/Cart", UriKind.Relative))
        '   This is my solution:
        '   I know the view is used on the "Review" page and I want to navigate to the "Cart" page.
        '   Also required Imports System.Windows.Browser
        Dim strNav As String = HtmlPage.Document.DocumentUri.ToString
        strNav = Replace(strNav, "Review", "Cart")
        HtmlPage.Window.Navigate(New Uri(strNav, UriKind.Absolute))
        '   It may be that I should use a Hyperlink button, but I am uncertain as to how I would be able
        '   to Add the Product to the Shopping Cart first then Navigate to the Cart.xaml Page.
        '   I realize that this is not stricly MVVM, but I am looking to get the simple solution working
        '   first.
        '   Feel free to provide references to the "correct/best practice" way to do this.
    End Sub
End Class

Found this thread
which has been read 99,870+ times (may suggest the tiniest of gaps in silverlight functionality or documentation).

My solution is as follows:

        Dim strNav As String = HtmlPage.Document.DocumentUri.ToString
        strNav = Replace(strNav, “Review”, “Cart”)
        HtmlPage.Window.Navigate(New Uri(strNav, UriKind.Absolute))


Imports System.Windows.Browser

I have attached the original simplified project solution zip file so that you can try out various solutions

Download and rename to and see what you can come up with.

SL3NavTest01TestPage.html should be used as the start page.

The Luddite Developer.


4 thoughts on “Silverlight Navigation Project (VS2008) – Question

  1. This problem can be solved by following these steps:

    1. Change type of SingleProductView.xaml to Page. I.e. The SingleProductView.xaml should be
    Silverlight Page and not Silverlight UserControl.
    2. Than on button’s btnAddToCart_Click event, use following code snippet:
    this.NavigationService.Navigate( new Uri(“/Cart”, UriKind.Relative));

    If you use Silverlight Page control, you can have access to navigation context and thus the
    code above will work. In normal Silverlight UserControl, you won’t get this NavigationService context.

  2. Jay

    The point of the excercise was to have the page as Review.xaml and using an MVVM type pattern and have the review page contain the view:
    <local:SingleProductView x:Name=”vwSingleProduct” />

    The view is then populated using code behind in Review.xaml.vb using the following code:

    Protected Overrides Sub OnNavigatedTo(ByVal e As System.Windows.Navigation.NavigationEventArgs)
    Dim pvm As ProductViewModel = New ProductViewModel
    Dim strTest As String = “xyz”
    vwSingleProduct.DataContext = pvm.ReviewProduct
    End Sub

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s