Articles → LIGHT SWITCH 2011 → Adding Silverlight Control In Lightswitch 2011

Adding Silverlight Control In Lightswitch 2011






Software Requirement


  1. Visual studio 2010 is installed on your machine.
  2. Visual Studio 2010 service pack 1 is installed on your machine.
  3. Microsoft Visual Studio Lightswitch 2011 is installed on your machine.

Prerequisite Knowledge


  1. What is Lightswitch?
  2. How to create buttons and how to write the button’s execute events?
  3. Basic programming in Silverlight.
  4. How to create the Lightswitch screens?
  5. How to create the Lightswitch tables?

Why Do We Need Custom Controls In Lightswitch?





Table Creation


Picture showing design view of LoginInformation table
Click to Enlarge




Login Screen


Picture showing the design view of login screen in Lightswitch
Click to Enlarge




Add Silverlight Library Project Type




  1. Right-click on the solution and click on "Add – New Project.."
  2. Select the "Silverlight Class Library" as project type.
  3. Enter "MyControl" in the Name field.
  4. Click on the "Ok" button.
  5. A pop-up message prompts up to select the Silverlight version


  6. Picture showing a pop up to select Silverlight version.
    Click to Enlarge

  7. Select the Silverlight Version as Silverlight 4.
  8. Click "Ok".


Picture showing the project structure once project is created
Click to Enlarge


Add A Password Control


Picture showing PasswordControl XAML file in project explorer window
Click to Enlarge





<UserControl x:Class="MyControl.PasswordControl"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"     
   d:DesignHeight="40" d:DesignWidth="210"><Grid x:Name="LayoutRoot" Background="White"><PasswordBox x:Name="PasswordCtrl" Width="200" Height="30"></PasswordBox></Grid></UserControl>



Add Binding To Password Control






<PasswordBox x:Name="PasswordCtrl" x:FieldModifier="public" Width="200" Height="30"  
   Password="{Binding Path=Screen.LoginInformationProperty.LoginPassword,Mode=TwoWay}"></PasswordBox>





Add A Custom Control In Lightswitch Screen




Picture showing how control is changed to custom control
Click to Enlarge



Picture showing the property window for login password control
Click to Enlarge



Picture showing a popup window for adding Silverlight control in Lightswitch application
Click to Enlarge




Save Value In Database




Picture showing the window for adding records when we run the application
Click to Enlarge




Output


Picture showing the record list as an output
Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Saturday, June 16, 2012

Query/Feedback


Your Email Id
 
Subject
 
Query/FeedbackCharacters remaining 250