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. Blend will add a <Grid.ColumnDefinitions> node to our XAML:

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

3. Blend also added a Grid.ColumnSpan=”2″ attribute to both the StackPanel and InkPresenter controls that were already on the page.
4. 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:



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



6. We can see that Blend moved the StackPanel into the first column, and we now have a little space next to the buttons.



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



8. Change the ColumnSpan from 2 to 1 to reposition the inkPresenter into the left column:



9. The inkPresenter control should be positioned in the left column and aligned with the StackPanel containing our ink sketch buttons:



10. 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.
11. Click on the [UserControl] in the Objects and Timeline panel, and then in the Properties panel change the Width to 800:

12. 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:



13. In the XAML view, change the grid column settings to give both columns an equal width:

<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>

14. Switch back to the design view by clicking on the design button:



15. 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:

16. 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:



17. Drag the control to the top and right side of the page:



18. On the Properties panel, change the Text of the TextBlock to Customer Information, change the FontSize to 12pt and click on the Bold indicator: