The Luddite Developer

Friday, 30th July 2010

Silverlight Navigation Project (VS2008) – Question

Filed under: Silverlight — theludditedeveloper @ 3:29 PM
Tags: , ,
Silverlight-Navigation-Project

Silverlight-Navigation-Project


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"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:local="clr-namespace:SL3NavTest01"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    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" />
                </StackPanel>
                    <Button x:Name="btnAddToCart" Width="75" Margin="0,30,0,0" Content="Add To Cart"
                     Click="btnAddToCart_Click"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>


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

    Public Sub New()
        InitializeComponent()
    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
http://forums.silverlight.net/forums/t/2684.aspx
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))

requires

Imports System.Windows.Browser

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

 SL3NavTest01.zip

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

SL3NavTest01TestPage.html should be used as the start page.

The Luddite Developer.

About these ads

4 Comments »

  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.

    Comment by Jay — Monday, 2nd August 2010 @ 10:46 AM | Reply

  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”
    pvm.GetReviewProduct()
    vwSingleProduct.DataContext = pvm.ReviewProduct
    End Sub

    Comment by theludditedeveloper — Monday, 2nd August 2010 @ 4:12 PM | Reply

  3. Did you find a good solution to this? I had to end up writing custom code to find the parent page, and that seems a bit ridiculous just to do navigation.

    Comment by Adam — Thursday, 23rd September 2010 @ 8:22 PM | Reply

  4. @Adam

    I found the solution a while ago and it is now contained in the main post.

    see code behind section and look in the btnAddToCart_Click handler, it may not be pretty but it does work without to much work for the developer.

    You can see code in action at http://www.cheap-ipods.com

    Comment by theludditedeveloper — Thursday, 23rd September 2010 @ 10:24 PM | Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

The Rubric Theme. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: