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.

image
Fig 1 Illustration of Customer table

Screens

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

About these ads

About dotnettim

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

11 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”

  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.

  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. abeniang@yahoo.com 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

    http://geeksprogrammings.blogspot.com/2013/10/maskedtextboxin.NET.html

  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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s