Using the Modal Child WIndow in SL 4.0
In this exercise, you will create a simple registration form that accepts a first and last name. When someone presses the button to register, a modal window will appear with a terms and conditions notice that users must agree to before proceeding. You won't fully code the registration form, you'll just send a result to a TextBlock so you can see what's going on. Let's get started.
1. Create a new SL application in VS 2010 called ModalWindow. Allow VS to create a web application to host the application.
2. In the MainPage.Xaml file, divide the root Grid into five rows and two columns. The height of the first four rows should be 40px, and the fifth row should take up the remainder of the application. The width of the first column should be 150 px, and the second should take up the remainder of the application. In addition, change the d:DesignWidth of the UserControl to 600.
3. In the first row, add a Textblock for a header with the Text "Register for a new Account" that spans both columns. In the Second row, add a TextBlock in the first column with the Text "First Name", and add a TextBox in the second column. Add some Margin and Padding to improve the appearance.
4. In the third row, add another TextBlock in the first column with the Text "Last Name", and add a textBox in the second column. Add some Margin and Padding to improve the appearance. In the fourth row, add a Button to the second column with the text "Register". finally, in the fifth row, add a TextBlock to the second column with the Text blank. Name the TextBlock "Result". Your XAML should look like the following code.
5. Now that you have the main form laid out, turn your attention to the child window. To add a child window to the project, right-cick on the silverlight project and select add new item. From the add new item dialog, select sl child window andname the window Confirm.xaml.
6. when the child window has been added to the project, it will contain the following xaml by default.
7. modify the child window xaml file code, like following code:
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel>
<TextBlock
Text="Please Accept the Terms and Conditions to Continue"
FontWeight="Bold"
FontSize="12" />
<TextBlock
Text="These are the terms and conditions..." />
</StackPanel>
<Button
x:Name="CancelButton"
Content="I Do Not Accept" Click="CancelButton_Click"
Width="125"
Height="23" HorizontalAlignment="Right"
Margin="0,12,0,0" Grid.Row="1" />
<Button
x:Name="OKButton"
Content="I Accept" Click="OKButton_Click"
Width="100"
Height="23" HorizontalAlignment="Right"
Margin="0,12,134,0" Grid.Row="1" />
</Grid>
9.Go ahead and run the application again and then press the Register button to open the Child Window. Notice that the content changes are reflected.Keep in mind that the content of these window controls is completely customizable with XAML. You can add any controls you wish with any layout you want.
10.Now let’s add code to retrieve results from the dialog. Open the MainPage.xaml.cs file and within the Button_Click event handler, wire up another event handler for the Child Window’s Closed() event. In this new event handler, you need to get the Child Window’s instance, which is sent to the handler in the sender object. Once you have the window’s instance, you can retrieve the DialogResult property, which will contain true, false, or null.
private void Button_Click(object sender, RoutedEventArgs e)
{
Confirm confirmDlg = new Confirm();
confirmDlg.Closed += new EventHandler(confirmDlg_Closed);
confirmDlg.Show();
}
void confirmDlg_Closed(object sender, EventArgs e)
{
Confirm confirmDlg = (Confirm)sender;
if (confirmDlg.DialogResult == true)
this.Result.Text = "terms and Conditions Accepted.";
else
this.Result.Text = "terms and Conditions Not Accepted.";
}
11. Run the application.
