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)

What is MVVM, Managed Extensibility Framework (MEF)

1.       Create a Silverlight Application(Version 4). Add web project to it when prompted (call it MySLApplication).

2.       Add a folder called Models in your server project(MySLApplication.Web)

3.       Add an interface called IModel which will be interface for your data Model.

Public Interface IModel

    Function GetData() As List(Of String)

    Sub AddData(ByVal Title As String)

End Interface

4.       Add 2 references to MyApplication.Web, Download MEF Preview 9(link at top) if you have not done already and decompress it, add reference to System.ComponentModel.Composition(which will be in bin\sl\ folder)  

5.       Add a class implementing IModel as follow in same Model Folder you can add another class in same file to instantiate MyDataModel

<Export(GetType(IModel))>

Public Class MyDataModel

    Implements IModel

    Private ReturnData As New List(Of String)

    Public Sub New()

        'Adding data mnaully but you might get it form your database

        ReturnData.Add("Learn Silverlight")

        ReturnData.Add("MEF in Silverlight")

    End Sub

    Public Sub AddData(ByVal Title As String) Implements IModel.AddData

        ReturnData.Add(Title)

    End Sub

    Public Function GetData() As List(Of String) Implements IModel.GetData

        Return ReturnData

    End Function

End Class

Now we have data model ready which is going to be consumed by  a listbox in our silverlight application. We are going to implement Model View View Model pattern to display our data.

6.       So in silverlight client project(MyApplication), Add a folder called ViewModels

7.       Now we are adding a base class for our ViewModels implementing INotifyPropertyChanged. So add a class called ViewModelBase in ViewModels Folder as below

Imports System.ComponentModel

Public Class ViewModelBase

    Implements INotifyPropertyChanged

    Sub New()

        'Anything we want to intialize for all our viewmodels

    End Sub

    Protected Sub OnPropertyChanged(ByVal PropertyName As String)

        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(PropertyName))

    End Sub

    Public Event PropertyChanged(ByVal sender As Object, ByVal e As _

System.ComponentModel.PropertyChangedEventArgs) Implements _

System.ComponentModel.INotifyPropertyChanged.PropertyChanged

End Class

8.  In ViewModels folder lets create a class called MainPageViewModel which we are going to bind to our MainPage

Imports System.ComponentModel.Composition

'probably using constant is better for attribute value

<Export("MainPageViewModel")>

Public Class MainPageViewModel

    Inherits ViewModelBase

    'Name MyModel can be anything, only interface IModel is used to find data

    <Import()>

    Public Property MyModel As IModel

    Sub New()

        CompositionInitializer.SatisfyImports(Me)

        Books = MyModel.GetData()

    End Sub

    Public Property Books As List(Of String)

End Class

9.   

10.   Open MainPage.xaml file and add a list box with binding it to Books

<ListBox Height="100" ItemsSource="{Binding Books}" HorizontalAlignment="Left" Margin="132,98,0,0" Name="ListBox1" VerticalAlignment="Top" Width="120" />

11.   Open MainPage.xaml.cs and modify Sub New as following

Public Sub New()

        InitializeComponent()

        CompositionInitializer.SatisfyImports(Me)

    End Sub

    <Import("MainPageViewModel")>

    Public WriteOnly Property MainPageViewModel As Object

        Set(ByVal value As Object)

            Me.DataContext = value

        End Set

    End Property

12.   Build your application and run it, you will be able to see 2 books listed in listbox

In my next blog I will write about how to handle commands in ViewModel and  also about WCF RIA WCF services.

 Download source application below.

MySLApplication.zip (1.02 mb)