My Master's Thesis Problems and solutions encountered…

13May/100

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.

11May/100

DataGrid Control

The DataGrid property allows you to list large amounts of data within a table. With Silverlight, the grid contains rich user functionality, including automatic resizing, reordering and auto-generating of columns.

This post is only relevant, if you want to hardcode data and insert it into a grid. If you want to get the data from a database, you'll need to do it trough a Web Service. See my post called Accessing Data Through Web Services to learn more about this.

Step 1: You need to create a reference to System.Windows.Controls.Data, by right-clicking on your project >> Add Reference >> .Net >> code>System.Windows.Controls.Data. Then, insert the following xmlns at the top of your .xaml page, where you will be inserting your Grid:


xmlns:Data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

Step 2: Insert the DataGrid into your .xaml page.

Notice the IsReadOnly property:


 <data:DataGrid x:Name="dg" IsReadOnly="True" Margin="10"/>

Step 3: Create a new class by right-clicking on the project >> Add >> Class. Populate the DataGrid by building a class that will be bound to the DataGrid. We define a few properties to bind to, and these represent the columns that the DataGrid will contain.

I called the class Data.cs and inserted the following code:


public class Data
    {
        public string Name { get; set; }
        public int Green { get; set; }
        public int Yellow { get; set; }
        public int Red { get; set; }
        public int NA { get; set; }
        public string Certification { get; set; }

    }

Step 4: In the code-behind for the .xaml page that contains your DataGrid, insert the code shown below.

Notice that the List< Data> on line 5 refers to the class, and the dg in the dg.ItemsSource refers to the name you have given the DataGrid.

public Page()
        {
            InitializeComponent();

            List<Data> source = new List<Data>();
            int itemsCount = 15;

            for (int i = 1; i < itemsCount; i++)
            {

                source.Add(new Data()
                {
                    Name = "Company " + i,
                    Green = i + 20 - 7,
                    Yellow = 20 + 7 - i,
                    Red = 0,
                    NA = 0,
                    Certification = "test" + i
                });
            }

            dg.ItemsSource = source;
}

That's it!

Of course, the loop is just practical for creating rows and content fast. In any other case, just delete the loop and repeat the Source.Add(newData) method as many times as needed.

By following the steps above, you'll get a DataGrid like the one shown below: