My Master's Thesis Problems and solutions encountered…


Passing Data and Uri Mapping

It's very simple to pass data from one Silverlight page to another:

Say you have an AutoCompleteBox and a Button on PageA.xaml, and when you press the button, you want to 1) reach PageB.xaml, and 2) print the content of the AutoCompleteBox in to a TextBlock in PageB.xaml.

Step 1: Insert the AutoCompleteBox and a Button. Notice the x:Name, and Click:

<input:AutoCompleteBox x:Name="Supplier"
                            IsTextCompletionEnabled ="True"

<Button Content="Search"

Step 2: Go to PageA.xaml.cs and create the navigate method:

void Button_Click(object sender, RoutedEventArgs e)

            if (Supplier.Text != "") //if user has inserted anything in the AutoCompleteBox

                string supplier = Supplier.Text.ToString(); //Supplier = name of AutoCompleteBox
                NavigationService.Navigate(new Uri(string.Format("/PageB.xaml?Supplier={0}", supplier), UriKind.Relative));
            MessageBox.Show("Enter something");


Step 3: Create PageB.xaml and make a new TextBlock that will contain the content retrived from the AutoCompleteBox on PageA:

<TextBlock x:Name="Supplier_name"/>

Step 4: Go to PageB.xaml.cs and create the method that will accept the value from PageA and insert it into the TextBlock.

protected override void OnNavigatedTo(NavigationEventArgs e)
            string supplier = NavigationContext.QueryString["Supplier"].ToString();
            Supplier_name.Text = supplier;

This will work perfectly, but you will notice that your URL doesn't look very pretty when you reach PageB. So, we will use Uri Mapping to define what we want the URL to look like.

Uri Mapping

Step 1: Go to your App.xaml and insert xml namespace for the navigation framework at the top:


Step 2: Go to PageA.xaml and change your Button_Click method. Inside the string.Format() you add what you want the URL to be called, followed by the value you pass:

string supplier = Supplier.Text.ToString();
NavigationService.Navigate(new Uri(string.Format("PageB/{0}", supplier), UriKind.Relative));

Step 3: Add a new UriMapper to the Application Ressources. The Uri represents what the URL will look like, and the MappedUri where the button links to:

        <nav:UriMapper x:Key="uriMapper">
                <nav:UriMapping Uri="PageB/{c}" MappedUri="/PageB.xaml?Supplier={c}" />

Notice that the string.Format("PageB/{0}"... is identical to the Uri="PageB/{c}", except the value inside the brackets.

Step 4: Go to your Navigation Framework (probably located at your MainPage.xaml), and add the UriMapper property to the Navigation Frame (see line 5):

 <navigation:Frame x:Name="ContentFrame"
                              UriMapper="{StaticResource uriMapper}"

After running this code you'll see, that the URL is called "...PageB/ followed by the value entered in the AutoCompleteBox.

Comments (0) Trackbacks (0)

No comments yet.

Leave a comment

nine − = 8

No trackbacks yet.