LightSwitch, Custom Settings Tables, and a Web Cam
Visual Studio LightSwitch is a relatively new development tool from Microsoft that allows a developer to quickly create database-driven, Silverlight applications. While I won’t give you the full sales pitch in this post – since it is my first post on LightSwitch, I should at least mention that you can find more information here
We’ll take a look at setting control properties from code-behind. Specifically, we’ll see how we might store some settings in a database table, read them, and apply them to a control.
[more]
Setting up the Project
If you’re following along at home, create a new LightSwitch project (File > New > Project, choose the LightSwitch in the project template tree, and select LightSwitch Application (Visual C#)). Name it whatever you want; I named my project “SettingsAndWebCam.”
From the Designer tab, choose “Create new table.”
Call the table “Setting” and create four integer properties called “ResolutionWidth,” “ResolutionHeight,” “ViewFinderWidth,” and “ViewFinderHeight.”
While the Setting table is still visible in the designer, click on the down-arrow next to the “Write Code” button; to expand its menu. Choose “Settings_CanInsert” from the “Access Control Methods” section of the menu.
When the code-behind file opens, write the following code. This simple bit of C# only allows one record in the table and never allows the user to delete a record.
Go back to the designer tab and click the “Screen…” button to create a new screen. I’m sort of partial to the “List and Details Screen” layout, but you could also use the “Editable Grid Screen” layout. Choose “Settings” from the dropdown list under “Screen Data.” Click the OK button to create the screen.
Run your LightSwitch application (press F5) and create a new record in the Setting table. Enter the values in the screenshot below:
Click the OK button and then click “Save” on the screen.
Using the Settings
Now that the settings are ready to go, let’s use them to setup a camera control on another screen.
I’ve created a table called “Member” that has three columns: FirstName, LastName, and Picture. The first two columns are strings and the last one is an image column.
Another thing I’ve done is to include the “Camera Image Control” as an extension in the properties of my project. Shameless plug: you can buy this extension here.
Additionally, I’ve created another List and Details Screen for the Member table.
and I’ve changed the control used for the Picture column to “Camera” so that I can use my web cam to take pictures of people.
Alright, it’s finally time to write some code! If you’re a “coder” like me, here comes the fun part.
In the Solution Explorer, right click on the “SettingsAndWebCam” project and choose “View Application Code (Client)” from the context menu.
Add the following code to the code-behind file.
On the MembersListDetail screen designer, choose “MemberListDetail_Created” method from the “Write Code” drop-down list and add the following code to that method:
When you run the application, you can see the results of your hard work when you start the camera:
Usually, these properties would be set by the LightSwitch developer; through the LightSwitch designer, but that would lock the end-user into using a single resolution and view-finder window size. Because we have used our settings to initialize the camera, the end-user can change the resolution of the camera which adds more flexibility to your application.