Creating Data Forms in Silverlight 4

0
78
3 min read

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here