Click here to Skip to main content
15,886,362 members
Articles / Programming Languages / C#

Pop Search Form Control in Silverlight

Rate me:
Please Sign up or sign in to vote.
4.76/5 (8 votes)
7 Aug 2009CPOL7 min read 42.9K   759   20   13
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.

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

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.

Main control with function descriptions.jpg

Fig 1. Main Control with function descriptions

The pop search form control has datagrid to display data and it has searching function as Fig 2.

Pop search form control with function descriptions.jpg

Fig 2. Pop Search Form control with function descriptions

There are two ways to bring data from datagrid to the main control.

  1. By double click datagrid
  2. By click OK button

Showing double click or button click to bring selected data back to main control.jpg

Fig 3. Bring selected data back to Main control

There is one way to extract data without pop search form.

  1. Types correct ID (key) in first textbox to display Name (Value) data.

Showing types correct ID to display Name.jpg

Fig 4. Types correct ID to display Name

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

In Visual Studio 2008, go File->New->Project then select Sivlerlight Application. You can name whatever name you would like to call. I will name it popFormDemo in this sample as Fig 5.

Create Silverlight project

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.

Add Silverlight Application wizard

Fig 6. Add Silverlight Application wizard

Add New Folder under PopFormDemo Project with name CusControl as Fig 7.

Create new folder in PopFormDemo project

Fig 7. Create new folder in PopFormDemo project

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

Add new Silverlight User Control in CusControl folder

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.

Add ASP.NET Web Application in solution

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.)

Add WCF Service

Fig 10. Add WCF Service

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

IPopDataService.cs and PopDataService.svc

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.

Image 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.

NorthWindDb connection string in web.config

Fig 13. NorthWindDb connection string in web.config

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

Use basicHttpBinding for Silverlight-enabled WCF service

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.

C#
    [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.

C#
    [ServiceContract]
    public interface IPopDataService
    {
        [OperationContract]
        List<PopFormClass> GetSqlCustomersData();
        [OperationContract]
        List<PopFormClass> GetSqlEmployeesData();
        [OperationContract]
        List<PopFormClass> GetSqlProductsData();
    }

Implement interface IPopDataService to the PopDataService.svc.cs.

C#
public class PopDataService : IPopDataService
    {
        private string SqlConString;
        public PopDataService()
        {
            SqlConString = ConfigurationManager.ConnectionStrings["NorthWindDb"].ConnectionString;
        }
        public List<PopFormClass> GetSqlCustomersData()
        {
            List<PopFormClass> list = new List<PopFormClass>();
            try
            {
                list = GetPopData("select CustomerID, CompanyName from Customers order by 1");
            }
            catch (Exception ex)
            {
                throw ex;
            }
            return list;
        }
        public List<PopFormClass> GetSqlProductsData()
        {
            List<PopFormClass> list = new List<PopFormClass>();
            try
            {
                list = GetPopData("select ProductID, ProductName from Products order by 1");
            }
            catch (Exception ex)
            {
                throw ex;
            }
            return list;
        }

        public List<PopFormClass> GetSqlEmployeesData()
        {
            List<PopFormClass> list = new List<PopFormClass>();
            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<PopFormClass>.

C#
        private List<PopFormClass> GetPopData(string strSql)
        {
            List<PopFormClass> list = new List<PopFormClass>();
            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.

PopDataService web

Fig 15. PopDataService Web

Clicking on the url next to svcutil.exe text. You should see the xml similar as 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.

Add Service Reference in Silverlight

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.jpg

Fig 18. Get available service by giving service URL

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

App.config and service reference

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.

Main control layout

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.

Pop search form layout

Fig 21. Pop Search Form layout and XAML

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

Image 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.)

btnPopClose button is using resource definition for style

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.

Image 24

Fig 24. Define resource in App.xaml

Step 8. Implement Code in Silverlight project

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

C#
        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

C#
        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: :

C#
        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:

C#
         private void dgPop_LoadingRow(object sender, DataGridRowEventArgs e)
        {
            e.Row.MouseLeftButtonUp -= _gridClickManager.HandleClick;
            e.Row.MouseLeftButtonUp += _gridClickManager.HandleClick;
        }

2.       From Textbox

C#
        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.

C#
        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<GetSqlCustomersDataCompletedEventArgs>(daoWcf_GetSqlCustomersDataCompleted);
                        daoWcf.GetSqlCustomersDataAsync();
                        break;
                    case "GetSqlProductsData":
                        daoWcf = new PopDataServiceClient();
                        daoWcf.GetSqlProductsDataCompleted += new EventHandler<GetSqlProductsDataCompletedEventArgs>(daoWcf_GetSqlProductsDataCompleted);
                        daoWcf.GetSqlProductsDataAsync();
                        break;
                    case "GetSqlEmployeesData":
                        daoWcf = new PopDataServiceClient();
                        daoWcf.GetSqlEmployeesDataCompleted += new EventHandler<GetSqlEmployeesDataCompletedEventArgs>(daoWcf_GetSqlEmployeesDataCompleted);
                        daoWcf.GetSqlEmployeesDataAsync();
                        break;
                    default:
                        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:

XML
<UserControl x:Class="PopFormDemo.Page"
    xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation">http://schemas.microsoft.com/winfx/2006/xaml/presentation</a>" 
    xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml">http://schemas.microsoft.com/winfx/2006/xaml</a>"
    xmlns:local="clr-namespace:PopFormDemo.CusControl"
>

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

Customer Search

Fig 25 Customer Search

Product Search

Fig 26. Search Product

Fig_27._Employee_Search.jpg

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.

History

  •  2009, August 07 - Update code (Bug Fix). Add Code for Silverlight 3.0

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Taiwan Taiwan
I came to Australian at year 1989. After I finishing my master’s degree in New South Wales University in Sydney, I started my first database designer role in Sydney Water. After working for a few years for several different companies, I had chance to work in Australia’s leading financial company AMP (www.amp.com.au). My role at AMP was an internet banking developer. My main tasks included the design of middle-tier, security, transaction processes, database and front end. Currently, I am working with Taiwan Microsoft as vendor. I have strong software development knowledge in banking/financial institution. My current certifications include MCP, MCSE(Microsoft NT 4.0), MCDBA(Microsoft SQL SERVER 2000), MCSD(Microsoft Visual Studio 6.0), MCAD(Microsoft .NET, Charter Member - one among the first 5000 developers worldwide) and MCSD(Microsoft .NET).

Comments and Discussions

 
Generalissues with IIS Server and Vista Pin
larry11823-Sep-09 5:30
larry11823-Sep-09 5:30 
GeneralWCF-Service Pin
Aaginor20-Aug-09 23:08
Aaginor20-Aug-09 23:08 
GeneralRe: WCF-Service Pin
MIB42624-Aug-09 4:14
MIB42624-Aug-09 4:14 
Generalgood job Pin
Watson Jason11-Aug-09 18:37
Watson Jason11-Aug-09 18:37 
QuestionWhat's this error mean?? Pin
nicholas_pei6-Aug-09 21:56
nicholas_pei6-Aug-09 21:56 
AnswerRe: What's this error mean?? Pin
MIB4266-Aug-09 22:28
MIB4266-Aug-09 22:28 
GeneralRe: What's this error mean?? Pin
StevenHobbs11-Aug-09 12:38
StevenHobbs11-Aug-09 12:38 
GeneralSilverlight 3 Pin
Dewey6-Aug-09 12:17
Dewey6-Aug-09 12:17 
GeneralRe: Silverlight 3 Pin
MIB4266-Aug-09 17:33
MIB4266-Aug-09 17:33 
GeneralRe: Silverlight 3 Pin
Dewey7-Aug-09 10:18
Dewey7-Aug-09 10:18 
GeneralRe: Silverlight 3 Pin
defwebserver10-Aug-09 11:26
defwebserver10-Aug-09 11:26 
GeneralYou got my 5 because of the arrows Pin
defwebserver6-Aug-09 7:02
defwebserver6-Aug-09 7:02 
GeneralRe: You got my 5 because of the arrows Pin
StevenHobbs10-Aug-09 21:00
StevenHobbs10-Aug-09 21:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.