Use of ComboBox in LightSwitch 2012

Here we will see how to select an item using a ComboBox in a LightSwitch Application (Visual C#) in Visual Studio 2012.

The following is the procedure for selecting an item using a ComboBox.

Step 1

Open the Solution Explorer.



Step 2

In the Solution Explorer, right-click on the server and choose "Add Table".



Step 3

In this way we will add two tables (one is a Student table and another one is a College table). The table appears.

Student Table



College Table



Step 4

Go to the menu bar, click the "Add Relationship" button.



The "Add New Relationship" dialog box appears on the screen. In that establish a one to many relationship between the two tables.



Step 5

In the Solution Explorer, right-click on the Screens and choose "Add Screen".



Step 6

The Add New Screen dialog box appears. Select the "Editable Grid Screen" from the Screen Template, under screen information, choose "Colleges" under screen data and provide a name for the Screen and click the "OK" button.



Step 7

Once again add a "New Data Screen" and from the Screen Template, under screen information, choose "Student" under the screen data and provide a name for the Screen and click the "OK" button.



Step 8

The Screen Designer appears.



Step 9

For the college table change the DataGrid Control to Custom Control.



Go to the property window, and click on the change link next to the Custom Control. The "Add Custom Control" dialog box appears on the screen.



From the "System.Windows.Controls" namespace, select the ComboBox control.



Step 10

From the screen designer, now click on the Add Data Item button in the menu bar. 



Step 11

The Add Data Item dialog box appears. Choose the "Queries" radio button and select "Colleges-Colleges(All)" from the grid, provide some name and click the "OK" button.



Step 12

Click on the write code button and select the "_Activated event".



The code editor appears.

using System;

using System.Linq;

using System.IO;

using System.IO.IsolatedStorage;

using System.Collections.Generic;

using Microsoft.LightSwitch;

using Microsoft.LightSwitch.Framework.Client;

using Microsoft.LightSwitch.Presentation;

using Microsoft.LightSwitch.Presentation.Extensions;

namespace LightSwitchApplication

{

    public partial class CreateNewStudent

    {

        partial void CreateNewStudent_InitializeDataWorkspace(global::System.Collections.Generic.List<global::Microsoft.LightSwitch.IDataService> saveChangesTo)

        {

            // Write your code here.

            this.StudentProperty = new Student();

        }

        partial void CreateNewStudent_Saved()

        {

            // Write your code here.

            this.Close(false);

            Application.Current.ShowDefaultScreen(this.StudentProperty);

        }

        partial void CreateNewStudent_Activated()

        {

            // Write your code here.

            IContentItemProxy combo = this.FindControl("Colleges");

            combo.SetBinding(System.Windows.Controls.ComboBox.ItemsSourceProperty, "Screen.Colleges2", System.Windows.Data.BindingMode.TwoWay);

            combo.SetBinding(System.Windows.Controls.ComboBox.SelectedItemProperty, "Screen.StudentProperty.College", System.Windows.Data.BindingMode.TwoWay);

        }

    }

}

Step 13

Press F5 to run the application. Open the "New Student Screen" screen. 



Click on the "Add" button to add information and click "OK".