Creating Data Forms in Silverlight 4

Exclusive offer: get 50% off this eBook here
Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

Microsoft Silverlight 4 Business Application Development: Beginner’s Guide — Save 50%

Build enterprise-ready business applications with Microsoft Silverlight 4 with this book and eBook

$32.99    $16.50
by Frank LaVigne | April 2010 | Beginner's Guides Microsoft Web Development Web Graphics & Video

Packt are due to launch a new Enterprise brand, into which future Silverlight titles will be published. For more information on that launch, look here.

In this article by Frank LaVigne, author of Microsoft Silverlight 4 Business Application Development, we shall create a form for allowing users to submit information.

Collecting data

Now that we have created a business object and a WCF service here-http://www.packtpub.com/article/creating-wcf-service-business-object-data-submission-silverlight, we are ready to collect data from the customer through our Silverlight application. Silverlight provides all of the standard input controls that .NET developers have come to know with Windows and ASP.NET development, and of course the controls are customizable through styles.

Time for action – creating a form to collect data

We will begin by creating a form in Silverlight for collecting the data from the client. We are going to include a submission form to collect the name, phone number, email address, and the date of event for the person submitting the sketch. This will allow the client (Cake O Rama) to contact this individual and follow up on a potential sale.

We'll change the layout of MainPage.xaml to include a form for user input. We will need to open the CakeORama project in Expression Blend and then open MainPage.xaml for editing in the Blend art board.

  1. Our Ink capture controls are contained within a Grid, so we will just add a column to the Grid and place our input form right next to the Ink surface. To add columns in Blend, select the Grid from the Objects and Timeline panel, position your mouse in the highlighted area above the Grid and click to add a column:
  2. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  3. Blend will add a <Grid.ColumnDefinitions> node to our XAML:

  4. <Grid.ColumnDefinitions>
    <ColumnDefinition Width="0.94*"/>
    <ColumnDefinition Width="0.06*"/>
    </Grid.ColumnDefinitions>

  5. Blend also added a Grid.ColumnSpan="2" attribute to both the StackPanel and InkPresenter controls that were already on the page.
  6. We need to modify the StackPanel and inkPresenter, so that they do not span both columns and thereby forcing us to increase the size of our second column. In Blend, select the StackPanel from the Objects and Timeline panel:
  7. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  8. In the Properties panel, you will see a property called ColumnSpan with a value of 2. Change this value to 1 and press the Enter key.
  9. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  10. We can see that Blend moved the StackPanel into the first column, and we now have a little space next to the buttons.
  11. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  12. We need to do the same thing to the inkPresenter control, so that it is also within the first column. Select the inkPresenter control from the Objects and Timeline panel:
  13. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  14. Change the ColumnSpan from 2 to 1 to reposition the inkPresenter into the left column:
  15. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  16. The inkPresenter control should be positioned in the left column and aligned with the StackPanel containing our ink sketch buttons:
  17. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  18. Now that we have moved the existing controls into the first column, we will change the size of the second column, so that we can start adding our input controls. We also need to change the overall size of the MainPage.xaml control to fit more information on the right side of the ink control.
  19. Click on the [UserControl] in the Objects and Timeline panel, and then in the Properties panel change the Width to 800:
  20. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide
  21. Now we need to change the size of our grid columns. We can do this very easily in XAML, so switch to the XAML view in Blend by clicking on the XAML icon:
  22. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  23. In the XAML view, change the grid column settings to give both columns an equal width:
  24. <Grid.ColumnDefinitions>
    <ColumnDefinition Width="0.5*"/>
    <ColumnDefinition Width="0.5*"/>
    </Grid.ColumnDefinitions>

  25. Switch back to the design view by clicking on the design button:
  26. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  27. Our StackPanel and inkPresenter controls are now positioned to the left of the page and we have some empty space to the right for our input controls:
  28. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide
  29. Select the LayoutRoot control in the Objects and Timeline panel and then doubleclick on the TextBlock control in the Blend toolbox to add a new TextBlock control:
  30. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  31. Drag the control to the top and right side of the page:
  32. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  33. On the Properties panel, change the Text of the TextBlock to Customer Information, change the FontSize to 12pt and click on the Bold indicator:
  34. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

Microsoft Silverlight 4 Business Application Development: Beginner’s Guide Build enterprise-ready business applications with Microsoft Silverlight 4 with this book and eBook
Published: April 2010
eBook Price: $32.99
Book Price: $54.99
See more
Select your format and quantity:
  1. The MainPage.xaml should look like the following:
  2. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  3. Double-click the TextBlock icon on the toolbox again and drop this into the top-left of column 2, row 2.
  4. On the Properties panel, change the text of the TextBlock to Name. This will serve as the label for our Name textbox control:
  5. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  6. Repeat this process, adding Phone Number, Email Address, and Date of Event labels, and rearranging them on the page as illustrated.
  7. Duplicating Controls
    If you click on a control in the Objects and Timeline panel, you can make a copy of the control by holding down the Alt key, left-click the mouse, and drag the copy into the new position.

    Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  8. Right-click the TextBlock icon in the toolbox again and choose the TextBox control:
  9. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  10. Double click the TextBox control, which adds a new textbox to the page. Drag this control next to our Name label and resize it to maximize the available space:
  11. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  12. Name the textbox customerName in the Properties panel, and set its MaxLength to 40. The MaxLength can be found by typing MaxLength in the search field of the Properties panel:
  13. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  14. Create textbox controls for both the Phone Number and Email Address fields and name them phoneNumber and emailAddress respectively; position them on the page next to the appropriate labels. Set the MaxLength of the phoneNumber field to 15 and the MaxLength of the emailAddress field to 120:
  15. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  16. To make date entry easier for our users, we will add a DatePicker control to our page to allow the user to page through a calendar and select the date of their event. To add a DatePicker control, click the Assets button, type the word date into the search field and select the DatePicker control:
  17. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  18. Double-click on the DatePicker in the toolbox to add it to the page, drag the DatePicker next to the TextBlock label for Date of Event and name the control eventDate:
  19. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  20. Add a button control to the page, drag down below the input controls, name the button submitButton and change the Content of the control to Submit:
  21. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  22. Select our Submit button and in the Properties panel click on the Events icon:
  23. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  24. Double-click inside of the Click event field to have Blend auto create the event handler for the button click event:
  25. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  26. We added a new Submit button, so now we need to hide the Send Sketch button. Select the btnSend button from the Objects and Timeline panel:
  27. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

  28. Set the Visibility of the btnSend control to Collapsed:
  29. Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

    Be sure to save your work throughout the development process, you would not want to lose all this effort!

What just happened?

We modified an existing control and added several input controls in order to collect some information from a potential customer. We learned how to add columns to a Grid and used Blend to create an event handler for our submit button.

By using Blend, we are able to set up our input controls very quickly and have visual feedback of our progress the entire time. Hand coding of all this XAML, while possible, is just not what most developers are going to want to spend their time doing, not when there is code to write!

Summary

In this article, we discussed how to create an input form in Silverlight.


If you have read this article you may be interested to view :

Microsoft Silverlight 4 Business Application Development: Beginner’s Guide Build enterprise-ready business applications with Microsoft Silverlight 4 with this book and eBook
Published: April 2010
eBook Price: $32.99
Book Price: $54.99
See more
Select your format and quantity:

About the Author :


Frank LaVigne

Frank LaVigne has been hooked on software development since he was 12, when he got his own Commodore 64 computer. Since then, he's worked as developer for fi nancial fi rms on Wall Street and also in Europe. He has worked on various Tablet PC soluti ons and on building advanced user experiences in Silverlight and WPF. He lives in the suburbs of Washington, DC. He founded the CapArea.NET User Group Silverlight Special Interest Group and has been recognized by Microsoft as a Tablet PC MVP. He blogs regularly at www.FranksWorld.com.

 

Books From Packt


Microsoft Silverlight 4 Data and Services Cookbook
Microsoft Silverlight 4 Data and Services Cookbook

.NET Compact Framework 3.5 Data Driven Applications
.NET Compact Framework 3.5 Data Driven Applications

Django 1.1 Testing and Debugging
Django 1.1 Testing and Debugging

Django 1.2 E-commerce
Django 1.2 E-commerce

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages
Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Moodle 1.9 Theme Design: Beginner's Guide
Moodle 1.9 Theme Design: Beginner's Guide

3D Game Development with Microsoft Silverlight 3: Beginner's Guide
3D Game Development with Microsoft Silverlight 3: Beginner's Guide

SketchUp 7.1 for Architectural Visualization: Beginner's Guide
SketchUp 7.1 for Architectural Visualization: Beginner's Guide


Your rating: None Average: 1 (1 vote)
You are right by
Many good posts here.

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
G
P
Z
s
C
H
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software