LightSwitch – Creating a Masked Password TextBox Control

Overview of Article

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


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


Here are the steps required to create a our screen.

  1. 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’
  2. 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
  3. 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;
  4. 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


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’.


About dotnettim

Tim Leung is a Microsoft .Net / SQL Server developer based in England.
This entry was posted in LightSwitch. Bookmark the permalink.

14 Responses to LightSwitch – Creating a Masked Password TextBox Control

  1. Angie xu says:

    I get an error witn your code, in the line “Me.CustomerProperty = New Customer()”, why?

  2. Angie xu says:

    The error: ‘CustomerProperty’ is not a member of “LightSwitch Application.CustomersListDetail”

    • Amberly says:

      I can already tell that’s gonna be super helflup.

    • skriver:Vilken fin gest. Min kompis bor i Norge sÃ¥ vi brevväxla med riktiga brev. Man fÃ¥r ett brev ca 1 gÃ¥ng varannan vecka och dÃ¥ är det mellan 10-15 sidor lÃ¥ngt där vi gÃ¥r igenom den senaste veckan detaljerat. Hur roligt som helst

  3. Johnnie says:

    We’re a group of volunteers and opening a new scheme in our community. Your website offered us with valuable information to work on. You have done an impressive job and our entire community will be grateful to you.

  4. I like this blog very much, Its a very nice office to read and receive information.

    “Anger is a signal, and one worth listening to.” by Harriet Lerner.

    • Loren says:

      / Someone necessarily help to make sigfniicantly articles I’d state. This is the first time I frequented your website page and to this point? I surprised with the research you made to create this particular post amazing. Great job!

  5. serps says:

    I would like to thank you for the efforts you have put in writing
    this website. I am hoping to see the same
    high-grade content by you later on as well. In truth, your creative writing abilities has motivated me to get my
    own site now 😉

  6. says:

    I can’t get the description property of the passwordbox to work. any tips?

    • dotnettim says:

      Unfortunately, there isn’t a simple way to display the description property as a tooltip over the password box, in the same way as the other controls behave. One way to implement this would be to write your own custom control. However, this would involve quite a fair amount of work for a relatively simple gain in funcationality.

  7. hello, I read from here simple and easy discriptive way of using maked text box

  8. Maria says:

    Designing the blog on paper gives you much more creative freedom as you aren’t bound by graphical limitations of a theme or confused by too
    many themes that you see on the screen. Your tags can be anything that has to do with the link you are adding.

  9. Alfonso says:

    A person way to do this is by carving time from your currently busy lifestyle to appreciate some kind
    of standard training. You might have experience eating beans and have poor gastrointestinal disturbances
    after. Your body makes an extremely important hormone called melanocyte stimulating hormone (MSH).

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s