LightSwitch Custom Controls Sizing

When I was working on my last post I couldn't figure out how to get my custom control to auto size when the screen was resized. After looking at this a little closer I found the trick to doing this. First in the custom control's XAML change the column sizes so they are relative.

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="1*" />
  <ColumnDefinition Width="1*" />
  <ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>

After you have re-built the control return to the designer for the CreateNewEmployee screen. Click on the Name control and then scroll to the bottom of the properties list and set the Content Size to Stretch.

Now the textboxes in the custom control will stretch when the page is re-sized.

Basic LightSwitch Custom Controls

Out of the box LightSwitch comes with a limited set of visual controls, but since the UI is rendered in Silverlight you can include other Silverlight controls including your own custom controls. Here I will provide a simple example of how to make your own custom control, its easier then you might think. To do this you will need to install LightSwitch on top of a full version of Visual Studio 2010. I am going to start with a simple table, then add a Create New Employee screen to the application. I am going to create a custom control that formats the First, Last and Middle name text boxes in a different way.

1. In your LightSwitch solution add a new Silverlight 4 Class Library project. I am going to call it EmployeeDbControls.
   
   
2. To the new project add a Silverlight User Control item. I am going to call it NameControl.
   
   
3. Here is the XAML I am going to add to that control:
   

   <Grid x:Name="LayoutRoot" DataContext="{Binding Screen.EmployeeProperty}">
   
   <Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition />
   </Grid.RowDefinitions>
   
   <Grid.ColumnDefinitions>
    <ColumnDefinition Width="150" />
    <ColumnDefinition Width="150" />
    <ColumnDefinition Width="150" />
   </Grid.ColumnDefinitions>
   
   <TextBlock Grid.Column="0" Grid.Row="0">First</TextBlock>
   <TextBlock Grid.Column="1" Grid.Row="0">Middle</TextBlock>
   <TextBlock Grid.Column="2" Grid.Row="0">Last</TextBlock>
   <TextBox Margin="5" Grid.Column="0" Grid.Row="1" Text="{Binding FirstName,Mode=TwoWay}"></TextBox>
   <TextBox Margin="5" Grid.Column="1" Grid.Row="1" Text="{Binding MiddleName,Mode=TwoWay}"></TextBox>
   <TextBox Margin="5" Grid.Column="2" Grid.Row="1" Text="{Binding LastName,Mode=TwoWay}"></TextBox>
   
   </Grid>
   

   This will create three textboxes laid out in a grid. The important thing to note here is the data binding properties. First we need to set a DataContext so I am did this on the grid so that all the controls in the grid can use it. In the DataContext binding the EmployeeProperty comes from the editor for the Create New screen, you can see it just above the field names:

   

   
   

   The second part of the binding is in the textboxes. Here we simply bind to the field names in the record. Note that the mode must be set TwoWay so we can edit and display.



4. Once the control is complete, build the project.
   


5. Return to the designer screen for the Create New screen and remove the FirstName, MiddleName and LastName fields.
   
   
6. Click on the line that says "(TOP ROW) Vertical Stack", then click the Add Layout Item menu and select Custom Control. You will see this screen:
   

   

   
   
7. Click Add Reference… and select the EmployeeDbControls project.
   


8. Drill down on the EmployeeDbControls reference and select NameControl. Click OK to close the References screen.
   

   

   
   
9. Click and drag the NameControl up above the Address field.
   
   
10. Make sure the NameControl is selected, then in the property window change the Display Name from ScreenContent to Name.
    
    
11. Run the application. When you open the CreateNewEmployee screen you will see the new control.

If I wanted to I could create a Details Screen for the Employee table and add the new name control to that screen so we have the same control when we are editing a record.

This is a very basic example but will get you started with designing custom controls for LightSwitch.

LightSwitch Table Relationships

In my last post I introduced Microsoft's new RAD tool called Visual Studio LightSwitch. In the example in that post I showed how to create an application with a single table, now I’ll explain how to do table relationships.

Last time I created an employee table. Now I want a table that lists the work history for each employee. First add a new table called WorkHistory. You will notice that I did not put a foreign key on the WorkHistory table to relate it to the Employee table; LightSwitch will take care of this for you.

A note on table naming. LightSwitch tries to be very helpful in naming your tables. The name you type at the top of the table editor is actually the entity name, it represents a single thing. The name that shows up in the Solution Explorer is the table name which LightSwitch will try to pluralize for you. So the WorkHistory entity creates a table called WorkHistories. For this reason do not pluralize the entity name. If you were to enter WorkHistories as the entity name you would end up with a table called WorkHistoriesSet.

Once you have created the table you need to setup the relationship by clicking the Relationship… button which brings up the relationship designer:

The options are set at the top of the screen and relationship will be displayed both graphically and in plain English. The Navigation Property is the name of the property that will be created on each table to manage the relationship.

The change will not automatically show up in the Add New screen I created last time, so the easy fix is to delete that screen and add a new one. When you select Employee for the Screen Data you will now get the option of including the Employee WorkHistories on the screen.

When you run the application you will now have an Add New screen where the employee's details and work history can be edited.

Microsoft Visual Studio LightSwitch Beta 1

LightSwitch is a new tool from Microsoft for doing rapid application development of data driven applications. It's sort of like Microsoft Access but with a much more robust underlying architecture. The design tool is actually a version of Visual Studio 2010 that has been simplified to allow even someone without programming skills to build a database and the front end application to manipulate it without having to write any code. On the back end LightSwitch can use SQL Server (including SQL Express), SQL Azure or SharePoint for data storage, and uses Silverlight 4 either in our out of browser for the user interface.

LightSwitch Beta 1 is currently available to MSDN subscribers, and will be available to the general public on August 23^rd, 2010.

Installation

LightSwitch is currently being provided as a DVD ISO image. Installation is very simple. Currently the only option during install is where you want to install the program. The installer will install any pre-requisites that you need along with an instance of SQL Server 2008 Express edition. If you already have Visual Studio 2010, LightSwitch will be integrated into the existing install. I have installed this on a Windows XP system that already had VS 2010, and a Server 2003 machine that did not and both install worked without any problems.

Building an Application

It is extremely easy to get an application up and running. I created a little employee tracking application with the ability to search records, add new records and edit existing ones in literally less the 5 minutes.

When you startup Visual Studio there will be two new project types one for Visual Basic and one for C#.

Next you will be prompted to Create new table or Attach to external database. When you select Create new table you get a classic table editor screen. Here you can enter your field names; select their data type and indicate if they are required fields. You can also change some of the other field settings using the property window. This process has been made very user friendly. If there is something it doesn’t like about a field name as you are typing it you will immediately get a tooltip explaining the error. The data types have been simplified from what you would see in SQL Server, for example no VarChar, NVarChar, or Text, just a String data type. There are also special data types for things like e-mail addresses and phone numbers.

Once your table is complete click the Screen… and you will be able to add the visual parts of your application. I added two screens, a New Data Screen to add records and a Search Data Screen to search for records. You simple select the screen type, and then select the table it will work with from the Screen Data drop down.

At this point you have a fully working application that you can execute.

Here’s a screen shot of the add screen:

And here is the search screen

Initial Reaction

I am not a big fan of tools like this that dumb down the development process. They tend to get you 80% of the way to what you want to build, but leave no way of getting the remaining 20% that would truly make the application useful. The tools is good for entering data, but the only current option for output is Excel export. It could really use a simple point and click report designer. For me the jury is still out on this tool. What is currently there is very nicely done, but it is still very limited. If Microsoft continues to improve the functionality this could be a great alternative to developing applications in Access.

More information

Here are some links to get more information on LightSwitch:

Office MSDN LightSwitch Site

Jason Zanders Weblog: Introducing Microsoft Visual Studio Light Switch

Jason Zanders Weblog: LightSwith Architectural Overview