Technique SL10:Implementing a Submit-Form Pattern in Silverlight

Example 1: Two form fields with Submit

In this example, the form fields correspond to a data object that implements a view model. Silverlight uses the view model and data annotations to generate some of its UI, notably the names of the fields are bound to the original view model names from the data. This example has a UI defined in XAML and logic defined in C#. The following is the XAML UI , which also includes the binding definitions. Note the Mode=TwoWay, UpdateSourceTrigger=Explicit attributes in the bindings. This is the binding mode to use for the Submit button scenario.

<UserControl x:Class="BasicSubmitButton.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
 <StackPanel x:Name="LayoutRoot" Background="White" Margin="10">
   <Grid>
   <Grid.RowDefinitions>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="Auto"/>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto"/>
       <ColumnDefinition Width="200"/>
       <ColumnDefinition Width="Auto"/>
   </Grid.ColumnDefinitions>
   <TextBlock Text="Form Input" FontSize="16" FontWeight="Bold"
     Grid.Column="1" HorizontalAlignment="Center" />
       <sdk:Label x:Name="NameLabel" Grid.Row="2" Margin="3"
   HorizontalAlignment="Right"
   Target="{Binding ElementName=NameTextBox}"/>
   <TextBox x:Name="NameTextBox" 
     AutomationProperties.Name="{Binding Content, ElementName=NameLabel}"
     Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=Explicit}"
     Grid.Column="1" Grid.Row="2" Margin="3" />
       <sdk:Label x:Name="AgeLabel" Grid.Row="3" Margin="3"
   HorizontalAlignment="Right"
   Target="{Binding ElementName=AgeTextBox}"/>
   <TextBox x:Name="AgeTextBox" 
     AutomationProperties.Name="{Binding Content, ElementName=AgeLabel}" 
     Text="{Binding Age, Mode=TwoWay, UpdateSourceTrigger=Explicit}"  
     Grid.Column="1" Grid.Row="3" Margin="3" />
   <Button x:Name="SubmitButton" Content="Submit" Click="SubmitButton_Click"
     Grid.Column="1" Grid.Row="4" Width="50" Margin="3"
   AutomationProperties.HelpText="Activate this button to submit form."/>
   </Grid>
 </StackPanel>
</UserControl>

The following is the C# logic for the page. Note the SubmitButton_Click handler. This implementation disables the Submit button (representative of a change of context, because now the form cannot be submitted again) and provides user feedback without performing any validation. The test file included in this technique sets up its data object as a purely client side entity and does no validation, so that no service/server is necessary to use the test file. Each element with a binding calls the UpdateSource method, such that the act of pressing the Submit button commits all the form's information all at once. A full implementation might replace this with a server side data object infrastructure. A full implementation might also provide a "Reset" or "Edit" button to enable form submission again if there were issues.

private void SubmitButton_Click(object sender, RoutedEventArgs e)
{
   (sender as Button).IsEnabled = false;
   NameTextBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();
   AgeTextBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();
   TextBlock tb = new TextBlock();
   tb.Text="Thank you, your form information was submitted.";
   LayoutRoot.Children.Add(tb);
}

This example is shown in operation in the working example of Basic Submit Button.