First Create Silverlight application

Start -> Programs -> VS2008 -> File -> New -> Project -> SilverlightApplication -> ByDefault application name is SilverlightApplication1 change name as SilverlightDB

Step2: Design Registration form in Page.xaml

Silverlight Grid with 8 Rows and 2 Columns using grid RowDefinition and ColumnDefinition

<UserControl xmlns:controls=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit”  x:Class=”SilverlightDB.Page”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

Width=”400″ Height=”300″>

<Border BorderBrush=”Black” BorderThickness=”1″ >

<Grid x:Name=”LayoutRoot” Background=”White” ShowGridLines=”False” >

<Grid.RowDefinitions>

<RowDefinition Height=”35″></RowDefinition>

<RowDefinition Height=”30″></RowDefinition>

<RowDefinition Height=”30″></RowDefinition>

<RowDefinition Height=”30″></RowDefinition>

<RowDefinition Height=”30″></RowDefinition>

<RowDefinition Height=”30″></RowDefinition>

<RowDefinition Height=”40″></RowDefinition>

<RowDefinition Height=”70″></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”130″></ColumnDefinition>

<ColumnDefinition Width=”270″></ColumnDefinition>

</Grid.ColumnDefinitions>

<StackPanel Grid.Row=”0″ Grid.Column=”0″ Grid.ColumnSpan=”2″ Width=”400″ Background=”Gray” >

<controls:Label  FontSize=”14″ FontWeight=”bold” HorizontalAlignment=”Center”

Content=”Registration Form” Margin=”6,5,-5,5″></controls:Label>

</StackPanel>

<controls:Label Grid.Row=”1″ Grid.Column=”0″ Content=”FirstName” Margin=”10,5,5,5″ HorizontalAlignment=”Center”></controls:Label>

<TextBox Grid.Column=”1″ Grid.Row=”1″ Height=”25″ Width=”150″ HorizontalAlignment=”Left”></TextBox>

<controls:Label Grid.Row=”2″ Grid.Column=”0″ Content=”EmailID” Margin=”10,5,5,5″ HorizontalAlignment=”Center”></controls:Label>

<TextBox Grid.Row=”2″ Grid.Column=”1″ Height=”25″ Width=”150″ HorizontalAlignment=”Left”></TextBox>

<controls:Label Grid.Row=”3″ Grid.Column=”0″ Content=”PhoneNo” Margin=”10,5,5,5″ HorizontalAlignment=”Center”></controls:Label>

<TextBox Grid.Row=”3″ Grid.Column=”1″ Height=”25″ Width=”150″ HorizontalAlignment=”Left”></TextBox>

<controls:Label Grid.Row=”4″ Grid.Column=”0″ Content=”LoginName” Margin=”10,5,5,5″ HorizontalAlignment=”Center”></controls:Label>

<TextBox Grid.Row=”4″ Grid.Column=”1″ Height=”25″ Width=”150″ HorizontalAlignment=”Left”></TextBox>

<controls:Label Grid.Row=”5″ Grid.Column=”0″ Content=”Password” Margin=”10,5,5,5″ HorizontalAlignment=”Center”></controls:Label>

<TextBox Grid.Row=”5″ Grid.Column=”1″ Height=”25″ Width=”150″ HorizontalAlignment=”Left”></TextBox>

<Button Grid.Row=”6″ Grid.Column=”1″ Width=”100″ Height=”25″ HorizontalAlignment=”Left” Content=”Register”></Button>

</Grid>

</Border>

</UserControl>

Run the application

CREATE TABLE [dbo].[Registration](

[registerID] [int] IDENTITY(1,1) NOT NULL,

[FirstName] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,

[EmailID] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,

[PhoneNo] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,

[LoginName] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,

[Password] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,

CONSTRAINT [PK_Registration] PRIMARY KEY CLUSTERED

(

[registerID] ASC

)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]

) ON [PRIMARY]

Create Linq to SQL Classes

Right click in SilverlightDB.Web (see above figure)

-> Add -> New Item -> Linq to SQL classes ->

By Default Linq to SQL Classes (DataClasses1.dbml) change its name into Silverlight.dbml

-> Add -> Then it opens dbml Editor click ServerExplorer ->

Then it display Silverlight (database name in list of Databases)

Choose Silverlight

-> Right click choose Modify Connections (Modify ConnectionString by choosing ServerName : your server name

UserName : your username

Password : your password

Select Database: Silverlight

Then Expand Silvelright database to view tables in Server Explorer (View ->ServerExplorer)

Drag Registration table into Silverlight.dbml Editor then see Solution Explorer it creates Silverlight.dbml with two files

Silverlight.dbml.layout file

Silverlight.designer.cs file

Create WCF Service in Silverlight Project

Right click in SilverlightDB.Web (see above figure)

-> Add -> New Item -> choose Silverlight from Categories -> right side choose

Service-enabled WCF Service

Change Name: Service1.svc into Register.svc then click Add Button it generates below code

Register.svc.cs

using System.ServiceModel;

using System.ServiceModel.Activation;

using System.Collections.Generic;

using System.Text;

namespace SilverlightDB.Web

{

[ServiceContract(Namespace = "")]

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class Register

{

[OperationContract]

public void DoWork()

{

// Add your operation implementation here

return;

}

// Add more operations here and mark them with [OperationContract]

}

}

For inserting data using WCF and Silverlight

namespace SilverlightDB.Web

{

[ServiceContract(Namespace = "")]

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class Register

{

[OperationContract]

public void DoWork()

{

// Add your operation implementation here

return;

}

// Add more operations here and mark them with [OperationContract]

[OperationContract]

public void InsertData(string firstname,string emailid,string phoneno,string loginuser,

string password)

{

//SilverlightDataContext is Dbml file Silverlight.dbml //(SilverlightDataContext)

SilverlightDataContext db = new SilverlightDataContext();

//From Silverlight.dbml.cs file Registeration(sqlserver name table name row

//  [Table(Name="dbo.Registration")]

//public partial class Registration : INotifyPropertyChanging, INotifyPropertyChanged

//{

//    private static PropertyChangingEventArgs emptyChangingEventArgs = new PropertyChangingEventArgs(String.Empty);

//    private int _registerID;

//    private string _FirstName;

//    private string _EmailID;

//Registration from Silverlight.dbml table name

Registration row = new Registration()

{

FirstName = firstname,

EmailID = emailid,

PhoneNo = phoneno,

LoginName = loginuser,

Password = password

};

// Add the new object to the collection.

db.Registrations.InsertOnSubmit(row);

// Submit the change to the database.

db.SubmitChanges();

}

}

}

Add Web Service Reference to Silverlight Application (Pages like Page.xaml…)

Goto SilverlightDB in Solution Explorer -> choose Referenes -> click Add Service Reference

Then the below DailogBox Opens

Click Discover -> It display all WCF services which Created in Project we created only one WCF service i.e. Register.svc it displays all operations included in Register.svc

First it display Register.svc with expand and Collapse + symbol click (+) symbol . Now it displays Register webservice with expand and collapse click (+) symbol

Now it displays Register in Services and right side it displays Operations.

Operations

• DO Work
• Insert Data

Click Ok then it creates Service Reference all Silverlight Pages (page.xaml…)

It creates ServiceReference to Silverlight Application see below figure.

Insert Data into SqlServer using Silverlight Xaml file

Now goto Page.xaml (Registration form)

click in Submit Button right click

Click Navigate to Event Handler

<Button Grid.Row=”6″ Grid.Column=”1″ Width=”100″ Height=”25″ HorizontalAlignment=”Left” Content=”Register” Click=”SubmitRegister_Click” ></Button>

using SilverlightDB.ServiceReference1;

private void SubmitRegister_Click(object sender, RoutedEventArgs e)

{

RegisterClient webservice = new RegisterClient();

webservice.InsertDataAsync(txtFirstName.Text, txtEmailID.Text, txtPhoneno.Text, txtLoginName.Text, txtPassword.Text);

}

Explaination:

RegisterClient webservice=new RegisterClient()

Register is WCF service name

Client is ByDefault is Client Service

So Register+Client = RegisterClient

InsertDataAsync

InsertData = WCF service (Register.svc) Operation (Function) is assigned to insert data into database.

Async = ServiceReference to InsertData

So InsertData+Async = InsertDataAsync

Hit F5 to run the application

XAML page contains one or more elements that control the layout and

behavior of the page.You arrange these elements hierarchically in a

tree.

System.Windows.Application derived class named App with the

associated App.xaml and App.xaml.cs files; as well as a

System.Windows.Controls.UserControl derived class called Page with

the associated Page.xaml and Page.xaml.cs files.

The App class takes care of the initialization and basically you

assign a new instance of your Page class to the App.RootVisual

property and through the power of Silverlight it appears on your

screen. you can set RootVisual as many times you want. So

Application_Startup can be used to call multiple Silverlight

controls.

In this project there are two xaml files and they will be added to

one aspx page(i.e. Default.aspx page)

My Application Name multipleXaml

Xaml Pages are

Page.Xaml
calender.xaml

Page.Xaml Code will look like

<UserControl x:Class=”multipleXaml.Page“
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”200″ Height=”200″>
<Grid x:Name=”LayoutRoot” Background=”White”>
<Ellipse  Fill=”Beige”></Ellipse>
</Grid>
</UserControl>

calender.xaml code will look like

<UserControl

xmlns:basics=”clr-namespace:System.Windows.Controls;assembly=System.W

indows.Controls”  x:Class=”multipleXaml.calender“
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”200″ Height=”200″>
<Grid x:Name=”LayoutRoot” Background=”White”>
<basics:Calendar></basics:Calendar>
</Grid>
</UserControl>

Remember xaml control names

(multiplexaml.calender remove applicationName multiplexaml. then it remains calender so calender.xaml name is calender)

calender.xaml name is calender

Page.xaml name is Page (multiplexaml.Page)

Note : Before adding this two controls in Default.aspx page you have to modify

App.xaml.cs file modify the code in Application_Startup method. This will call all xaml controls using

initParams

//remember InitParams key name is ControlId using this silverlight controls will display in Default.aspx page. In Default.aspx design code you will observer use of ControlId term in Silverlight control  it look like InitParameters=”ControlId=calender”

<asp:Silverlight ID=”Silverlight1” runat=”server”Height=”200px” Width=”200px” InitParameters=”ControlId=calender”

Source=”~/ClientBin/multipleXaml.xap” MinimumVersion=”2.0.30523″></asp:Silverlight>

code will look like

private void Application_Startup(object sender, StartupEventArgs e)
{
this.RootVisual = new Page();

if (e.InitParams.ContainsKey(”ControlId“))
{

switch (e.InitParams["ControlId"])
{

case “calender”:  //this calls from  calender.xaml page

this.RootVisual = new calender();

break;

case “Page”:

this.RootVisual = new Page();

break;

//add more pages like this
//case “dropdown”:
//    this.RootVisual = new dropdown();
//    break;

}

}
}

Now goto Default.aspx Page Add Two Silverlight control from Toolbox.
(In Toolbox Silverlight Tab name contain Silverlight,Pointer and

MediaPlayer control).
Add ScriptManager above of the Default.aspx Page

Sample Design code look like

Default.aspx Page Design

<form id=”form1″ runat=”server”>
<div>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>
<table align=”center”>
<tr>
<td>
<asp:Silverlight ID=”Silverlight1” runat=”server”

Height=”200px” Width=”200px” InitParameters=”ControlId=calender”

Source=”~/ClientBin/multipleXaml.xap” MinimumVersion=”2.0.30523″>
</asp:Silverlight>

</td>
</tr>
<tr>
<td>
<asp:Label ID=”Label1″ runat=”server”

Text=”Label”></asp:Label>

</td>
</tr>
<tr>
<td>
<asp:Silverlight ID=”Silverlight2” runat=”server”

Height=”200px” Width=”200px” InitParameters=”ControlId=Page”

Source=”~/ClientBin/multipleXaml.xap” MinimumVersion=”2.0.30523″>
</asp:Silverlight>
</td>
</tr>
</table>

</div>
</form>

Now Run the application .In Default.aspx Page ,the Page.Xaml control

and calender.xaml control will appear.

Happy coding