[ Send this article ]
Your message has been sent.
How would you like to send this article:
[ Save this article ]
Save this article to your account for easy access.
This article has been saved to your account.
Go to my account
This article has been emailed to your Kindle.
Send this article
Complete the form below to send this article, Creating Data Forms in Silverlight 4, to a friend (or to yourself). We will never share your details (or your friend's) with anyone. For more information, read our Privacy Policy.
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.
- 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:
- Blend will add a <Grid.ColumnDefinitions> node to our XAML:
- Blend also added a Grid.ColumnSpan="2" attribute to both the StackPanel and InkPresenter controls that were already on the page.
- 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:
- 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.
- We can see that Blend moved the StackPanel into the first column, and we now have a little space next to the buttons.
- 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:
- Change the ColumnSpan from 2 to 1 to reposition the inkPresenter into the left column:
- The inkPresenter control should be positioned in the left column and aligned with the StackPanel containing our ink sketch buttons:
- 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.
- Click on the [UserControl] in the Objects and Timeline panel, and then in the Properties panel change the Width to 800:
- 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:
- In the XAML view, change the grid column settings to give both columns an equal width:
- Switch back to the design view by clicking on the design button:
- 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:
- 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:
- Drag the control to the top and right side of the page:
- On the Properties panel, change the Text of the TextBlock to Customer Information, change the FontSize to 12pt and click on the Bold indicator:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.94*"/>
<ColumnDefinition Width="0.06*"/>
</Grid.ColumnDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
- The MainPage.xaml should look like the following:
- Double-click the TextBlock icon on the toolbox again and drop this into the top-left of column 2, row 2.
- On the Properties panel, change the text of the TextBlock to Name. This will serve as the label for our Name textbox control:
- Repeat this process, adding Phone Number, Email Address, and Date of Event labels, and rearranging them on the page as illustrated.
- Right-click the TextBlock icon in the toolbox again and choose the TextBox control:
- 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:
- 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:
- 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:
- 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:
- 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:
- 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:
- Select our Submit button and in the Properties panel click on the Events icon:
- Double-click inside of the Click event field to have Blend auto create the event handler for the button click event:
- 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:
- Set the Visibility of the btnSend control to Collapsed:
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.
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 :
- Navigation Widgets and Styles in Microsoft Silverlight 4
- Understanding Expression Blend and How to Use it with Silverlight 4
- Control templates, Visual State Manager, and Event Handlers in Silverlight 4
- Animation in Silverlight 4
- Creating a WCF Service, Business Object and Data Submission with Silverlight 4
- Data Validation in Silverlight 4
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
|
|
|
Post new comment