Using Custom Types in XAML of Silverlight 2.0

In this lab, we we try to use “Custom Types” (Classes) in Silverlight XAML (Extensible Application Markup Language).

So, Let’s start by-

1) Creating Silverlight application called “SLUsingCustomTypesINXAML” using Visual Studio 2008.

2) Now, once you have created Silverlight application let’s add two Custom Types (Classes) as shown bellow-

i) Customers.cs-:

public class Customers
{
   public ObservableCollection<Customers>  CustomersList{ get; set; }
   public Customers()
   {
       CustomersList = new ObservableCollection<Customers>();
   }
   public string CustomerID { get; set; }
   public string CustomerName { get; set; }
}

ii) Orders.cs-:

public class Orders
{
   public ObservableCollection<Orders> MyOrdersList { get; set; }
   public Orders()
   {
       MyOrdersList = new ObservableCollection<Orders>();
   }
   public string OrderID { get; set; }
   public string CustomerID { get; set; }
   public string OrderDate { get; set; }
   public string RequiredDateTime { get; set; }
}

Imp. Note-: You must import System.Collections.ObjectModel namespace to get ObservableCollection.

ObservableCollection – This collection provides dynamic notifications you when the Item is add, removed or when the collection list is refreshed.

3) Now to access our custom types in Silverlight XAML code, you will have to import the name to <UserControl/> as shown bellow-

xmlns:localTypes="clr-namespace:SLUsingCustomTypesINXAML"

4) Now open Page.xaml and write down the bellow code-

<UserControl x:Class="SLUsingCustomTypesINXAML.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300"
    xmlns:localTypes="clr-namespace:SLUsingCustomTypesINXAML">
    <UserControl.Resources>
        <localTypes:Customers x:Key="myCustomers">
            <localTypes:Customers.CustomersList>
                <localTypes:Customers CustomerID="PRAV" 
CustomerName="Pravinkumar R. D."/>
                <localTypes:Customers CustomerID="YASH" 
CustomerName="Yash P. D."/>
                <localTypes:Customers CustomerID="PARI" 
CustomerName="Priti P. D."/>
            </localTypes:Customers.CustomersList>
        </localTypes:Customers>
        <localTypes:Orders x:Key="myCustomerOrders">
            <localTypes:Orders.MyOrdersList>
                <localTypes:Orders CustomerID="PRAV" OrderID="ORD1290" 
OrderDate="21/Oct/2009" RequiredDateTime="21/Oct/2009"/>
                <localTypes:Orders CustomerID="YASH" OrderID="ORD1290"

OrderDate="22/Sept/2009" RequiredDateTime="22/Sept/2009"/>
                <localTypes:Orders CustomerID="PARI" OrderID="ORD1290" 
OrderDate="06/Mar/2009" RequiredDateTime="22/Sept/2009"/>
                </localTypes:Orders.MyOrdersList>
           </localTypes:Orders>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="Black">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <ListBox DataContext="{StaticResource myCustomers}"
 ItemsSource="{Binding CustomersList}"
 Height="1170" Grid.Row="0" x:Name="CustList" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                     <StackPanel HorizontalAlignment="Left">
                        <TextBlock Text="{Binding CustomerID}" 
x:Name="txtCustomerID"/>
                        <TextBlock Text="{Binding CustomerName}"/>
                        <TextBlock Foreground="Black" 
Text="---------------------------------------"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <ListBox DataContext="{StaticResource myCustomerOrders}" 
ItemsSource="{Binding MyOrdersList}"
 Height="1170"   Grid.Column="1" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel HorizontalAlignment="Left">
                        <TextBlock Text="{Binding OrderID}" 
x:Name="CustomerID"/>
                        <TextBlock Text="{Binding OrderDate}"/>
                        <TextBlock Text="{Binding RequiredDateTime}"/>
                        <TextBlock Foreground="Black" 
Text="---------------------------------------"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>

5) That’s all !! Hit F5 by making “SLUsingCustomTypesINXAMLTestPage.aspx” as a start up page and see your Custom Types output is working.

Now as you have completed writing the thirteenth Silverlight Lab, let’s have a closer look on fourteenth lab “Working with Background Worker in Silverlight 2.0.”