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" Click="Button_Click"/>
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)); } else { 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:
xmlns:nav="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation">
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:
<Application.Resources> <nav:UriMapper x:Key="uriMapper"> <nav:UriMapping Uri="PageB/{c}" MappedUri="/PageB.xaml?Supplier={c}" /> </nav:UriMapper> </Application.Resources>
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" Grid.Row="1" Grid.Column="1" Source="/Customer_Home.xaml" UriMapper="{StaticResource uriMapper}" />
After running this code you'll see, that the URL is called "...PageB/ followed by the value entered in the AutoCompleteBox
.
Leave a comment