LightSwitch – Creating a Masked Password TextBox Control

Overview of Article

The following article explains a method for entering passwords using masked textboxes in LightSwitch.

Data

The data used in this example will be very basic. We’ll simply create a Customer table with ‘Customer Name’ and ‘Password’ fields.

Fig 1 Illustration of Customer table

Screens

Here are the steps required to create a our screen.

Create a ‘New Data Screen’ based on the customer table. By default, a TextBox is created for the password field. Use the dropdown box to change this control from a TextBox into a Custom Control.

Fig 2 Select ‘Custom Control’
On the properties pane for the Password control, click on ‘change’ hyperlink. The following dialog now appears. Expand the System.Windows.Controls node and select PasswordBox

Fig 3 Select PasswordBox from System.Windows.Controls

We now need some code to save the contents of the PasswordBox into the password field of our Customer entity. We’ll do this by handling the ‘LostFocus’ event. Click on the ‘Write Code’ button and write the following code:

Private Sub CreateNewCustomer_InitializeDataWorkspace(ByVal saveChangesTo As Global.System.Collections.Generic.List(Of Global.Microsoft.LightSwitch.IDataService))
    ' Write your code here.
    Me.CustomerProperty = New Customer()
    AddHandler Me.FindControl("Password").ControlAvailable, AddressOf pwdAvailable
End Sub

Private Sub pwdAvailable(sender As Object, e As ControlAvailableEventArgs)
    AddHandler CType(e.Control, System.Windows.Controls.Control).LostFocus, AddressOf PasswordLostFocus
End Sub

Private Sub PasswordLostFocus(sender As Object, e As System.Windows.RoutedEventArgs)
    Me.CustomerProperty.Password = CType(sender, System.Windows.Controls.PasswordBox).Password
End Sub

Here’s the C# equivalent

private void CreateNewCustomer_InitializeDataWorkspace(global::System.Collections.Generic.List<global::Microsoft.LightSwitch.IDataService> saveChangesTo)
{
    // Write your code here.
    this.CustomerProperty = new Customer();
    this.FindControl("Password").ControlAvailable += pwdAvailable;
}

private void pwdAvailable(object sender, ControlAvailableEventArgs e)
{
    ((System.Windows.Controls.Control)e.Control).LostFocus += PasswordLostFocus;
}

private void PasswordLostFocus(object sender, System.Windows.RoutedEventArgs e)
{
    this.CustomerProperty.Password = ((System.Windows.Controls.PasswordBox)sender).Password;
}

Now run the application and open the ‘Create Customer Screen’. Here’s a screenshot of the masked password control that appears.

Fig 4 Create Customer Screen

Conclusion

This example demonstrates how to create a masked input box in LightSwitch. Referring back to figure 3, we can see that there are various other controls in System.Windows.Controls that we can use in a similar fashion inside our LightSwitch application.

A typical password screen may include a second field prompting us to reconfirm the entered password. We can achieve this by creating a string property called ‘Password2’, adding this onto the screen as a PasswordBox and extending the code above to compare ‘Password’ with ‘Password2’.