1.Create a lightswitch application or open your existing lightswitch application.
2.Add a new Silverlight class project (VB or C#),
File, New, Add Project and select Silverlight class project, name it something like LightSwitch.CustomControls
3.Create an silverlight user control called LSAutocomplete
4.Add an AutocompleteBox from toolbox to user control (If you do not have AutocompleteBox please download it here )
5. Your xaml should be something like below
<sdk:AutoCompleteBox HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="LSAutocomplete" VerticalAlignment="Stretch" />
6.Press F7 to bring code editor window and Add following properties
private object _ItemsSource;
public object ItemsSource
{
get
{
return _ItemsSource;
}
set
{
if (_ItemsSource != value)
{
_ItemsSource = value;
LSAutocomplete.ItemsSource = (IEnumerable) _ItemsSource;
}
}
}
private string _SelectedItemPath;
public string SelectedItemPath
{
get
{
return _SelectedItemPath;
}
set
{
if (_SelectedItemPath != value)
{
var bindingPath = "Screen." + value;
LSAutocomplete.SetBinding(AutoCompleteBox.SelectedItemProperty, new Binding() { Path = new PropertyPath(bindingPath), Mode = BindingMode.TwoWay });
_SelectedItemPath = value;
}
}
}
7.Build your LightSwitch.CustomControls project
8.Create 2 tables similar to the following in your sql database
Customer Table
CustomerID
CustomerName
CountryID
Country Table
CountryID
CountryName
Add one to many relation (Country Table’s CountryID to Customers Table CountryID) and fill some countries manually(or create screen in LightSwitch to fill in)
9.Create a list and detail screen in lightswitch, refer to how do I videos below.
http://msdn.microsoft.com/en-us/lightswitch/cf7b8a6e-c3fd-4d1f-88d4-095a1d02f6f1.aspx
10.Change Country ‘s control to Custom Control and click Customer Control’s change button on properties panel and add reference as follow.
11.Find the control you built in Add Custom Control window and then press OK
12.Add countries list to screen , click add Data Item, select queries and countries, press OK
13.Now, add following code in CustomerDetail_Loaded event
partial void CustomerListDetail_Loaded()
{
IContentItemProxy proxy = this.FindControl("Country1"); //make sure name of control is country1
proxy.Invoke(() =>
{
var cc = (LightSwitch.CustomControls.LSAutoComplete)proxy.Control;
cc.SelectedItemPath = "CustomerCollection.SelectedItem.Country";
cc.ItemsSource = this.CountryCollection;
}
);
}
You can always change the summary field to Display different column in autocomplete box.
14.That’s All, if everything goes well, you should see something like below. Please find attached code and SQL scripts to generate required tables.
Sources.zip (1.68 kb)