Pop Search Form Control in Silverlight

Introduction

Silverlight is a new and powerful browser plug-in that works with Mac OS, Windows and Linux. It helps you create rich web application that is safe, secure and scalable cross-platform. This article will use Visual Studio 2008 to create Silverlight pop search form control.

System Requirement

* This application requires the user to have copy of Visual Studio 2008
* Microsoft Silverlight 2 Tools for Visual Studio 2008 SP1 (http://www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en)
* Northwind database in MS SQL Server

The article assumes a familiarity with C#, as well as with using Visual Studio 2008 to create Silverlight applications. Elementary knowledge of WCF, Web Service, LINQ would be beneficial but not absolutely necessary to fully understand the content of this article. 

Design Requirement

The main control is combining with two textboxes and one button as Fig 1. The first textbox has ability to display data and enter data. The button will show up pop search form. The second textbox has ability to display data only. 

Create Silverlight and WCF Project

Once we know control's functionalities, now we can start to create our project in Visual Studio 2008. Let's create all the projects we need, then we will tackle each project to achieve goal.

**Please download the code and walkthrough it with each step


Step 1. Create Silverlight Application

Fig 5. Create Silverlight project

You should see the wizard window after you click OK in step 1. We will leave it in default setting as Fig 6.

Fig 6. Add Silverlight Application wizard

Fig 7. Create new folder in PopFormDemo project

Under CusControl Folder, add New Silverlight user control with name PopForm as Fig 8.

Fig 8. Add new Silverlight User Control in CusControl folder

Step 2. Create WCF service project

There are few ways to pass data from database to Silverlight control. The common technologies are either web service or WCF. I am going to use WCF in this sample.

Under solution, add new ASP.NET Web Application and rename to DaoWcf as Fig 9.

Fig 9. Add ASP.NET Web Application in Solution

Under DaoWcf web project, add new WCF Service and rename to PopDataService as Fig 10. (You can delete Default.aspx or you can leave it)

Fig 10. Add WCF Service

Now you should have IPopDataService.cs and PopDataService.svc in the DaoWcf project as Fig 11.

Fig 11. IPopDataService.cs and PopDataService.svc

Step 3. Configuration in WCF service project

In the DaoWcf project, right click Properties. You need to use Local IIS Web server in the Web tab as Fig 12. 

Fig 12. Set Local IIS Web server in DaoWcf Project

In the web.config, add NorthWindDb connection string in connectionStrings tag as Fig 13.

Fig 13. NorthWindDb connection string in web.config

In the web.config, modify service binding from wsHttpBinding (default) to basicHttpBinding as Fig 14.

Fig 14. Use basicHttpBinding for Silverlight-enabled WCF service 

Notes:

A Silverlight-enabled WCF Service is very similar to a "normal" WCF Service. The only difference is that Silverlight only supports calls to WCF services configured with BasicHttpBinding. More advanced profiles are not supported at the moment. It is also possible to take a "normal" WCF Service, to reconfigure it to work with BasicHttpBinding, and to call it from Silverlight.

Step 4. Implement Code in WCF service project

In the PopDataSerivce.svc.cs, PopFormClass has ID and NAME properties with DataContract attribute. DataContract attribute describe data structures that are used by the service to communicate with client. 

[DataContract()]

public class PopFormClass

{

[DataMember]

public string ID { get; set; }

[DataMember]

public string NAME { get; set; }

}

In the IPopDataService.cs, the IPopDataService interface has 3 abstract methods with ServiceContract attribute. ServiceContract describe the functional operations implemented by the service. 

[ServiceContract]

public interface IPopDataService
{
[OperationContract]
List GetSqlCustomersData();

[OperationContract]
List GetSqlEmployeesData();

[OperationContract]
List GetSqlProductsData();
}

 Implement interface IPopDataService to the PopDataService.svc.cs 

public class PopDataService : IPopDataService
{
public PopDataService()
{
SqlConString = ConfigurationManager.ConnectionStrings["NorthWindDb"].ConnectionString;

}
public List GetSqlCustomersData()
{
List list = new List ();
try
{
list = GetPopData("select CustomerID, CompanyName from Customers order by 1");
}
catch (Exception ex)
{
throw ex;
}
return list;
}

public List GetSqlProductsData()
{
List list = new List ();
try
{
list = GetPopData("select ProductID, ProductName from Products order by 1");
}
catch (Exception ex)
{
throw ex;
}
return list;

}

public List GetSqlEmployeesData()
{
List list = new List ();
try
{
list = GetPopData("select EmployeeID, LastName, FirstName from Employees order by 1");
}
catch (Exception ex)
{
throw ex;
}
return list;
}
}

The GetPopData(string strSql) method will get data from database then insert data into List

private List GetPopData(string strSql)
{

List list = new List ();

using (SqlConnection con = new SqlConnection(SqlConString))

{

con.Open();

SqlCommand com = new SqlCommand(strSql, con);

IDataReader dr = com.ExecuteReader();

while (dr.Read())

{

PopFormClass pf = new PopFormClass();

pf.ID = Convert.ToString(dr[0]);

pf.NAME = Convert.ToString(dr[1]);

list.Add(pf);
}
}

return list;
}

Step 5. Check WCF service is working properly

Now, you can use IE to check whether the WCF is working correctly. Right click DaoWcf project, then select "Set as StartUp Project". Run Start Without Debugging (Ctrl-F5). You should see service web as Fig 15. 

Fig 15. PopDataService Web

 Clicking on the url next to svcutil.exe text. You should see the xml similar as Fig 16.

Fig 16. WSDL for PopDataService

Step 6. Add Service Reference in Silverlight Project

To invoke WCF service, firstly you need to generate a configuration file and proxy class, and second, write code that uses the proxy class to invoke the service. In PopFormDemo project, right click the Reference and then select Add Service Reference from the context menu as Fig 17. This will launch as dialog box show in Fig 18. 

Fig 17. Add Service Reference in Silverlight

 In the Address, give service Url as you created before then click go. This dialog calls the svcutil utility to create a source file that implements the proxy class.

Fig 18. Get available service by giving service URL 

It also creates an app.config file with a node that stores the address, binding, and contract information necessary to call the endpoints as Fig 19.

Fig 19. App.config and service reference

Step 7. Create Pop Search Form Control UI

In the main control, create 2 Textboxes and 1 Button as Fig 20. 

Fig 20. Main control layout and XAML

 The pop search form is inside of Border control as Fig 21. So it can use Visibility to hide or show the pop search form.

Fig 21. Pop Search Form layout and XAML

Initially, the pop search form control is set to Visibility = "Collapsed" as Fig 22

Fig 22. Set Border to Visibility = "Collapsed"

I am using resources to define styles for top right close button as Fig 23. (Its kind like CSS for web application.)

Fig 23. btnPopClose button is using StaticResource for style

I define resources in App.xaml as Fig 24. That's because very element has access to the resources. You can also define resources in page level, and then all the elements on that page can use it.

Fig 24. Define resource in App.xaml

Step 8. Implement Code in Silverlight project

There 5 main properties in PopForm.xaml.cs as below: 

public string DataProvider { get; set; }

public string TitleName { get; set; }

public string PopId { get; set; }

public string PopName { get; set; }

public string OpacityValue { get; set; }

DataProvider : It tells which data you would like to show on pop search form
TitleName : Title name on the top of pop search form
PopId : Label ID text on the pop search form
PopName: Label NAME text on the pop search form
OpacityValue : Opacity level for the pop search form

As mentioned before, there are two ways to get data

1. From pop search form

a.By click OK button

private void btnPopEnter_Click(object sender, RoutedEventArgs e)

{

if (popBoder.Visibility == Visibility.Visible)

{

PopFormClass pf = dgPop.SelectedItem as PopFormClass;

txtId.Text = pf.ID;

txtName.Text = pf.NAME;

popBoder.Visibility = Visibility.Collapsed;

}

}

b. By Double click on Datagrid

The double click idea from MouseClickManager.Assign double click event with ResultSelected in the construct as below:

public PopForm()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(PopForm_Loaded);

_gridClickManager = new MouseClickManager(200);

_gridClickManager.DoubleClick += new MouseButtonEventHandler(ResultSelected);

}

private void ResultSelected(object sender, MouseButtonEventArgs e)

{

if (popBoder.Visibility == Visibility.Visible)

{

PopFormClass pf = dgPop.SelectedItem as PopFormClass;

txtId.Text = pf.ID;

txtName.Text = pf.NAME;

popBoder.Visibility = Visibility.Collapsed;

}

}

Assign double click event on each row in datagrid as below: 

private void dgPop_LoadingRow(object sender, DataGridRowEventArgs e)

{

e.Row.MouseLeftButtonUp -= _gridClickManager.HandleCl
e.Row.MouseLeftButtonUp += _gridClickManager.HandleClick;
}

2. From Textbox 

private void txtId_MouseLeave(object sender, MouseEventArgs e)

{
if (!string.IsNullOrEmpty(txtId.Text))
{
var eData = from eFilter in popData
where eFilter.ID == txtId.Text
select eFilter;

if (eData.Count() > 0)
{
txtName.Text = eData.First().NAME;
}
else
{
txtName.Text = string.Empty
}
}

}

code that uses the proxy class to invoke the service 

private void dgPop_Loaded(object sender, RoutedEventArgs e)
{

lblPopTitle.Text = string.IsNullOrEmpty(TitleName) ? "" : TitleName;

lblPopId.Text = string.IsNullOrEmpty(PopId) ? "ID: " : PopId;

lblPopName.Text = string.IsNullOrEmpty(PopName) ? "NAME: " : PopName;

if (!string.IsNullOrEmpty(DataProvider))

{

switch (DataProvider)

{

case "GetSqlCustomersData":

daoWcf = new PopDataServiceClient();

daoWcf.GetSqlCustomersDataCompleted += new EventHandler(daoWcf_GetSqlCustomersDataCompleted);

daoWcf.GetSqlCustomersDataAsync();

brbeak;

case "GetSqlProductsData":

daoWcf = new PopDataServiceClient();

daoWcf.GetSqlProductsDataCompleted += new EventHandler(daoWcf_GetSqlProductsDataCompleted);

daoWcf.GetSqlProductsDataAsync();

break;

case "GetSqlEmployeesData":

daoWcf = new PopDataServiceClient();

daoWcf.GetSqlEmployeesDataCompleted += new EventHandler(daoWcf_GetSqlEmployeesDataCompleted);

daoWcf.GetSqlEmployeesDataAsync();

break;

dedfault:

break;
}

}
}

Step 9. Apply pop search form control to page

Firstly, we need to map pop search form control namespace to Page.xaml as below: 

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

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

xmlns:local="clr-namespace:PopFormDemo.CusControl">

I apply 3 pop search form control on the Page.xaml as below:

Fig 25. Customer Search

 Fig 26. Product Search

Fig 27. Employee Search

Moving Forward

I am placing this code into the public domain without restriction. It doesn't have the best pattern design or coding style. Anyone can use it for any purpose, including in commercial products. If you can improve the code or even make it more clear, please let me know. I will update the code to make it more useful. Thank you all. 

Sample Project Source
 

Download source files -1036 kb

Download source files -1109 kb