LightSwitch – Limiting Item Selections using a ComboBox

Overview of Article

One of the annoyances about the LightSwitch AutoCompleteBox is that there isn’t an option to limit selections to only those items which are shown in the list. Non existent values can be typed in, causing validation errors to occur when a screen is saved.

Fig 1 – Illustration of AutoCompleteBox failing to limit selections.

Fortunately, the Silverlight ComboBox control can limit items to the list and the following article describes how we can use this control on a LightSwitch screen.

In the following example, we’ll create a customer entry screen and allow the user to select from a list of available Countries.

 

Data

The example solution contains a Person table and a Country table. The table schemas and relationships are illustrated in the following images below.

Fig 2 – Illustration of Person table

Fig 3 – Illustration of Country table

Fig 4 – One to Many relationship between Country and Person 

 

Screens

The following section describes the creation of the screens in the project..

1. First of all, create an ‘Editable Grid Screen’ on the Country table to enable some Countries to be added.
2. Create a ‘New Data Screen’ on the Person table.
3. By default, an ‘AutoCompleteBox’ is created on the Country field. Change this to ‘Custom Control’ using the drop down list to the left of the control. After doing so, bring up the properties of the control and click on the ‘Change…’ link next to the ‘Custom Control’ field. In the dialog that appears, select the ‘ComboBox’ control from within the System.Windows.Controls namespace.

    
   Fig 5 – Changing the AutoCompleteBox to a ComboBox

4. We now need to create a data source in order to populate our ComboBox with a list of available Countries. In order to do this, click on the ‘Add Data Item’ button, select the ‘Query’ radio button and select ‘Countries – Country (All)’. Retain the default name of ‘Countries’.

   
   Fig 6 – Creating a data source for our ComboBox
    

5. We now need to write some code to bind our ComboBox to the person entity. Click on ‘Write Code’ button and select the ‘_Activated’ event. Now write the following code:

Private Sub CreateNewPerson_Activated()
    Dim comboControl As IContentItemProxy = Me.FindControl("Country")
    comboControl.SetBinding(System.Windows.Controls.ComboBox.ItemsSourceProperty, "Screen.Countries", Windows.Data.BindingMode.TwoWay)
    comboControl.SetBinding(System.Windows.Controls.ComboBox.SelectedItemProperty, "Screen.PersonProperty.Country", Windows.Data.BindingMode.TwoWay)
End Sub

Here’s the C# equivalent…

private void CreateNewPerson_Activated()
{
    IContentItemProxy comboControl = this.FindControl("Country");
    comboControl.SetBinding(System.Windows.Controls.ComboBox.ItemsSourceProperty, "Screen.Countries", System.Windows.Data.BindingMode.TwoWay);
    comboControl.SetBinding(System.Windows.Controls.ComboBox.SelectedItemProperty, "Screen.PersonProperty.Country", System.Windows.Data.BindingMode.TwoWay);
}

6. Now run our application and open the ‘Create Person’ screen. The list of Countries is now limited to those shown in the list.
   
   Fig 7 – Illustration of final screen showing the ComboBox which can not be typed into.

Conclusion 

This article demonstrates how we can limit drop down choices by using a Silverlight ComboBox. It also illustrates the data binding syntax which is used when binding custom controls. The image below illustrates the relationship between the designer and the call to the SetBinding method. This is particularly relevant when creating a ‘details screen’ as the default entity will be ‘Person’ rather than ‘PersonProperty’.

  

Fig 8 – Illustration of DataBinding Code

 

Technorati Tags: LightSwitch ComboBox,Limit to List,Control DataBinding