Introduction
In this article, I have created a Silverlight application that asks users to
enter choices & moves to specific pages depending on the choices. I have shown
here how to use merged resource dictionaries. We can also see how to create
controls dynamically. Finally, this application consumes a WCF service to store
data in the database using LINQ to SQL.
My application contains four parts:
- Creating the database
- Creating the Silverlight application
- Creating the WCF service
- Silverlight application consuming the service
Creating the database:
Step 1: Open the SQL Server Management Studio & connect to the server.
Step 2:
Add a new database.
Step 3:
Give a name to the database (In our case it is UrmiDatabase).
Step 4:
Add a new table to the database.
Step 5:
Here I have created a table with two columns:
EmpName [nvarchar(50)]
EmpID[nchar(10)]
Step 6:
Save the table & give it a name (In our case it is Employee).
You can add some data to the table if you want.
Step 7:
Create one more table (in our case it is Student table) by following the
previous steps.
My Student table has two columns
StudentName [nvarchar(50)]
RollNo[int]
Creating the Silverlight Application:
Step 1:
Open Visual Studio 2010 & create a new Silverlight application. (I have given a
name MySilverlightApplication)
Step 2: Click OK.
Step 3:
Now in MainPage.xaml, add one StackPanel and inside the StackPanel add two radio
buttons.
The MainPage.xaml will be
<UserControl
x:Class="MySilverlightApplication.MainPage"
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"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid
x:Name="LayoutRoot"
Background="White">
<StackPanel
Height="38"HorizontalAlignment="Left"
Margin="21,20,0,0"
Name="stackPanel1"VerticalAlignment="Top"
Width="198"
Orientation="Horizontal">
<RadioButton
Content="Employee"
Height="16"
Name="radioButton1"
Margin="10"/>
<RadioButton
Content="Student"
Height="16"
Name="radioButton2"
/>
</StackPanel>
</Grid>
</UserControl>
Step 4:
Now right click on the Silverlight project and add a new folder.
Step 5:
Give a name to the folder (in my case it is MyResrc)
Step 6:
Right click on the folder & add a new item.
Step 7:
Add a Silverlight Resource Dictionary & give it a name (in my case it is
MyRDictionary.xaml)
Step 8:
In MyRDictionary.xaml add the following namespace.
<ResourceDictionary
xmlns:system="clr-namespace:System;assembly=mscorlib"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</ResourceDictionary>
We are adding this namespace so that in future we can extract string, double
etc. as resources.
Step 9:
Now go to the MainPage.xaml & set the Background property of the Grid (LayoutRoot)
from the property window,
Now the MainPage.xaml is
<UserControl
x:Class="MySilverlightApplication.MainPage"
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"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid
x:Name="LayoutRoot">
<StackPanel
Height="38"HorizontalAlignment="Left"
Margin="21,20,0,0"
Name="stackPanel1"VerticalAlignment="Top"
Width="198"
Orientation="Horizontal">
<RadioButton
Content="Employee"
Height="16"
Name="radioButton1"
Margin="10"/>
<RadioButton
Content="Student"
Height="16"
Name="radioButton2"
/>
</StackPanel>
<Grid.Background>
<LinearGradientBrushEndPoint="1,0.5"StartPoint="0,0.5">
<GradientStop
Color="Black"
Offset="0"
/>
<GradientStop
Color="#FFC0C3AB"
Offset="1"
/>
<GradientStop
Color="#FFB9BCA5"
Offset="1"
/>
<GradientStop
Color="Gold"
Offset="0.066"
/>
</LinearGradientBrush>
</Grid.Background>
</Grid>
</UserControl>
Step 10:
Now go to the App.xaml & the following code.
<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="MySilverlightApplication.App"
>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="MyResrc/MyRDictionary.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
Now a merged resource dictionary enables you to declare the contents of a
resource dictionary by referencing an external file. Here the external file is
MyRDictionary.xaml.
Step 11:
Now go to the MainPage.xaml & select the Grid. Then go to the property window &
right click on the Background property. Now select Extract Value to Resource.
Step 12:
Now give a name to the Key (in my case it is MyBackground) & choose your
Dictionary (here it is MyRDictionary.xaml).
Step 13:
Now if you go to the MainPage.xaml , you can notice the following change. The
Background property has changed automatically.
<UserControl
x:Class="MySilverlightApplication.MainPage"
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"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid
x:Name="LayoutRoot"Background="{StaticResource
MyBackground}">
<StackPanel
Height="38"HorizontalAlignment="Left"
Margin="21,20,0,0"
Name="stackPanel1"VerticalAlignment="Top"
Width="198"
Orientation="Horizontal">
<RadioButton
Content="Employee"
Height="16"
Name="radioButton1"
Margin="10"/>
<RadioButton
Content="Student"
Height="16"
Name="radioButton2"
/>
</StackPanel>
</Grid>
</UserControl>
Step 14:
Now again select the grid & go to the property window. Right click on the
Background property & select Go to Value Definition.
Step 15:
You can see the changes to the MyRDictionary.xaml.
<ResourceDictionary
xmlns:system="clr-namespace:System;assembly=mscorlib"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<LinearGradientBrush
x:Key="MyBackground"EndPoint="1,0.5"StartPoint="0,0.5">
<GradientStop
Color="Black"
Offset="0"
/>
<GradientStop
Color="#FFC0C3AB"
Offset="1"
/>
<GradientStop
Color="#FFB9BCA5"
Offset="1"
/>
<GradientStop
Color="Gold"
Offset="0.066"
/>
</LinearGradientBrush>
</ResourceDictionary>
Step 16:
Now add a new item to the Silverlight project.
Step 17:
Add a new Silverlight page to the project (Here it is Page1.xaml)
Step 18:
Now just add the highlighted code to Page1.xaml.
<navigation:Page
x:Class="MySilverlightApplication.Page1"
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:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="640"
d:DesignHeight="480"
Title="Page1
Page">
<Grid
x:Name="LayoutRoot"Background="{StaticResource
MyBackground}">
</Grid>
</navigation:Page>
We are not adding any control to this page as we will do it dynamically.
Step 19:
Now add one more Silverlight page (Here it is Page2.xaml) by following the steps
16, 17 & 18.
Step 20:
Now go to MainPage.xaml.cs & write down the following code.
using
System;
usingSystem.Collections.Generic;
usingSystem.Linq;
using
System.Net;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Documents;
usingSystem.Windows.Input;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Animation;
usingSystem.Windows.Shapes;
namespace
MySilverlightApplication
{
publicpartialclassMainPage
: UserControl
{
public
MainPage()
{
InitializeComponent();
Loaded
+= newRoutedEventHandler(MainPage_Loaded);
}
voidMainPage_Loaded(object
sender, RoutedEventArgs e)
{
radioButton1.Checked += newRoutedEventHandler(RB_Checked);
radioButton2.Checked += newRoutedEventHandler(RB_Checked);
}
voidRB_Checked(object
sender, RoutedEventArgs e)
{
RadioButtonrb
= e.OriginalSourceasRadioButton;
if
(rb.Content.ToString().ToUpper() == "EMPLOYEE")
this.Content
= newPage1();
else
this.Content
= newPage2();
}
}
}
Explanation of the code:
In the MainPage constructor we have declared a loaded event handler. In the
loaded handler, we have declared one common checked event handler for the two
radiobuttons. In the checked event hadler, we are checking the content of the
checked radiobutton. According to the content value, we are moving to respective
pages.
Step 21:
Add a new item to the Silverlight project.
Step 22 :
Add a new class (in our case it is MyLogic.cs).
Step 23 :
Add the following code in MyLogic.cs
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Documents;
usingSystem.Windows.Ink;
usingSystem.Windows.Input;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Animation;
usingSystem.Windows.Shapes;
namespace
MySilverlightApplication
{
publicclassMyLogic
{
publicstaticButton
b1;
publicstaticButton
b2;
publicstaticTextBox
t1;
publicstaticTextBox
t2;
publicstaticStackPanel
SetForm(string[] args)
{
StackPanelsp
= newStackPanel();
sp.Orientation = Orientation.Vertical;
t1 = CreateTextbox(sp, args[0]);
t2 = CreateTextbox(sp, args[1]);
b1 = newButton();
b1.Content = "Submit";
b1.Height = 20;
b1.Width = 50;
sp.Children.Add(b1);
b2 = newButton();
b2.Height = 20;
b2.Width = 100;
b2.Content = "Back To Form";
sp.Children.Add(b2);
returnsp;
}
privatestaticTextBox
CreateTextbox(StackPanelsp,
stringss)
{
TextBoxtxtbx
= newTextBox();
txtbx.Height = 20;
txtbx.Width = 100;
sp.Children.Add(txtbx);
TextBlock
txt = newTextBlock();
txt.Text = ss;
sp.Children.Add(txt);
returntxtbx;
}
}
}
Explanation of the code :
In this class , we are creating the controls dynamically. It has four static
members & two static member functions. In the SetForm function we are creating
one Stackpanel control, two TextBox controls & two Button controls. Then we are
adding the controls to the Stackpanel & returning the Stackpanel control to the
caller. This function takes a string array as an argument. This string array
actually contains all the fields of the database table where we want to add
data.
The CreateTextbox function creates one TextBox control & one TextBlock control.
We are defining this function for code optimization.
Step 24:
Now add the following code to Page1.xaml.cs
using
System;
usingSystem.Collections.Generic;
usingSystem.Linq;
using
System.Net;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Documents;
usingSystem.Windows.Input;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Animation;
usingSystem.Windows.Shapes;
usingSystem.Windows.Navigation;
namespace
MySilverlightApplication
{
publicpartialclassPage1
: Page
{
public
Page1()
{
InitializeComponent();
Loaded
+= newRoutedEventHandler(Page1_Loaded);
}
void
Page1_Loaded(object sender,
RoutedEventArgs e)
{
StackPanelsp
= newStackPanel();
string[]
args = { "Employee Name",
"Employee ID" };
sp = MyLogic.SetForm(args);
LayoutRoot.Children.Add(sp);
MyLogic.b1.Click
+= newRoutedEventHandler(b1_Click);
MyLogic.b2.Click
+= newRoutedEventHandler(b2_Click);
}
privatevoid
b2_Click(object sender,
RoutedEventArgs e)
{
this.Content
= newMainPage();
}
privatevoid
b1_Click(object sender,
RoutedEventArgs e)
{
}
}
}
Explanation of the code :
Here we are calling the SetForm function which return a StackPanel control. We
are attaching the Stackpanel to the Grid control of Page1.xaml. We have defined
the click handler of one button also. It simply returns to the MainPage.
Step 25:
Here add the following code to Page2.xaml.
using
System;
usingSystem.Collections.Generic;
usingSystem.Linq;
using
System.Net;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Documents;
usingSystem.Windows.Input;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Animation;
usingSystem.Windows.Shapes;
usingSystem.Windows.Navigation;
namespace
MySilverlightApplication
{
publicpartialclassPage2
: Page
{
public
Page2()
{
InitializeComponent();
Loaded
+= newRoutedEventHandler(Page2_Loaded);
}
void
Page2_Loaded(object sender,
RoutedEventArgs e)
{
StackPanelsp
= newStackPanel();
string[]
args = { "Student Name",
"Roll No" };
sp = MyLogic.SetForm(args);
LayoutRoot.Children.Add(sp);
MyLogic.b1.Click
+= newRoutedEventHandler(b1_Click);
MyLogic.b2.Click
+= newRoutedEventHandler(b2_Click);
}
privatevoid
b2_Click(object sender,
RoutedEventArgs e)
{
this.Content
= newMainPage();
}
privatevoid
b1_Click(object sender,
RoutedEventArgs e)
{
}
}
}
Now we have finished creating a basic Silverlight application.
Creating the WCF service:
Step 1 :
Right click on MySilverlightApplication.Web & add a new item.
Step 2:
Add a Silverlight enabled WCF service.
Step 3:
Again add a new item to MySilverlightApplication.Web.
Step 4:
Add a LINQ to SQL class .
Step 5:
Go to the server explorer & add a database connection.
Step 6:
Enter the server name, select database name (here it is UrmiDatabase) & click
Test Connection.
Step 7:
Drag & drop the Employee & Student table to the middle pane.
Step 8:
Add the following code to service1.svc.cs
using
System;
usingSystem.Linq;
usingSystem.Runtime.Serialization;
usingSystem.ServiceModel;
usingSystem.ServiceModel.Activation;
namespaceMySilverlightApplication.Web
{
[ServiceContract(Namespace =
"")]
[AspNetCompatibilityRequirements(RequirementsMode
= AspNetCompatibilityRequirementsMode.Allowed)]
publicclassService1
{
[OperationContract]
publicboolAddEmployee(string
nm, stringuid)
{
try
{
DataClasses1DataContext
context = newDataClasses1DataContext();
Employeeemp
= newEmployee();
emp.EmpName = nm;
emp.EmpID = uid;
context.Employees.InsertOnSubmit(emp);
context.SubmitChanges();
returntrue;
}
catch
{
returnfalse;
}
}
[OperationContract]
publicboolAddStudent(string
nm, intrl)
{
try
{
DataClasses1DataContext
context = newDataClasses1DataContext();
Studentstd
= newStudent();
std.StudentName = nm;
std.RollNo = rl;
context.Students.InsertOnSubmit(std);
context.SubmitChanges();
returntrue;
}
catch
{
returnfalse;
}
}
// Add
more operations here and mark them with [OperationContract]
}
}
Explanation of the code:
Both of the functions create objects of the data model classes & add that object
to the data context. Thus insertion of data takes place in the database using
LINQ.
Step 9:
Right click on Service1.svc & select View in Browser.
Step 10:
Our service is running now.
Copy the URL.
Silverlight Application consuming the WCF service:
Step 1:
Right click on the Reference of the Silverlight project and add a service
reference.
Step 2:
Paste the URL & click Go.
Step 3:
Now go back to Page1.xaml.cs & add the button click event handler.
privatevoid
b1_Click(object sender,
RoutedEventArgs e)
{
string
nm = MyLogic.t1.Text;
stringuid
= MyLogic.t2.Text;
Service1Client
proxy = newService1Client();
proxy.AddEmployeeCompleted += newEventHandler<AddEmployeeCompletedEventArgs>(proxy_AddEmployeeCompleted);
proxy.AddEmployeeAsync(nm, uid);
}
privatevoidproxy_AddEmployeeCompleted(object
sender, AddEmployeeCompletedEventArgs e)
{
bool
bb = Convert.ToBoolean(e.Result);
if
(bb == true)
this.Content
= newMainPage();
}
Explanation of the Code:
The click event handler takes the value entered in the textboxes into string
variables. Then it creates proxy object of the service & call the operation
contracts.
Step 4:
In Page2.xaml.cs add the following event handler.
privatevoid
b1_Click(object sender,
RoutedEventArgs e)
{
string
nm = MyLogic.t1.Text;
intrl
= Convert.ToInt32(MyLogic.t2.Text);
Service1Client
proxy = newService1Client();
proxy.AddStudentCompleted += newEventHandler<AddStudentCompletedEventArgs>(proxy_AddStudentCompleted);
proxy.AddStudentAsync(nm, rl);
}
privatevoidproxy_AddStudentCompleted(object
sender, AddStudentCompletedEventArgs e)
{
bool
bb = Convert.ToBoolean(e.Result);
if
(bb == true)
this.Content
= newMainPage();
}
Step 5:
Now rebuild the solution.
Step 6:
Click the Employee button.
Step 7:
Enter data to the TextBoxes& click submit button.
Step 8:
Select the Student radiobutton.
Step 9:
Enter data to the TextBoxes& click Submit.
Step 10:
The database has been modified by the changes you made.
Step 11: