Creating modal dialogs_Mastering LOB Development for Silverlight 5：A Case Study in Action-QQ阅读男生武侠网

上QQ阅读APP看书，第一时间看更新

Creating modal dialogs

Modal dialogs are also common components in LOB (Line Of Business) applications and management applications. That is to say, a pop-up window that blocks the rest of the application appears. Once the user has completed the pertinent application, he or she can close it and the application unblocks.

ChildWindow is the implementation of a modal dialog in Silverlight.

Example of modal dialogs

We will continue with the previous example, now adding a ChildWindow control. Also, we will make the modal window host the same content as the main window, adding the UserControl we previously created. Finally, we will communicate with the main page using the modal control. To do so, we will copy the values we entered in the form of the modal window to the form of the main page, as shown in the following screenshot:

To create a ChildWindow, carry out the following steps:

On the Views folder, right-click and select Add | New Item.
Choose the option Silverlight Child Window and name it MyDialogView, as shown in the next screenshot:
Once the project is created, open MyDialogView.XAML and add the following content to customize it. We will also use the UserControl, created in the previous section, to display within the modal dialog. We will proceed as we did in the previous example. The final result will look similar to the following screenshot:

First, add the namespace where the UserControl is located and then reference both using the following lines of code:

<controls:ChildWindowx:Class="Chapter2.Sample.Forms.Views.MyDialogView"
  xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
  xmlns:MyControls="clr-namespace:Chapter2.Sample.Forms.Views"
  Width="400" Height="200" Title="MyDialogView">
  <Grid x:Name="LayoutRoot" Margin="2">
    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <MyControls:MyControlUCView x:Name="myControl"/>
    <Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1"/>
    <Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />
  </Grid>
</controls:ChildWindow>

In the Code-Behind file, let's add public properties to store the name, address, and country ID that the user is going to type in the dialog:

public partial class MyDialogView : ChildWindow
{
  public string MyName { get; set; }
  public string MyAddress { get; set; }
  public int MyCountry { get; set; }
}

In the handler function of the OK button, collect the values of the form shown in the modal dialog, copy them to the properties defined in the previous step, and set the dialog result to true to indicate that the user clicks the OK button using the following lines of code:
```
private void OKButton_Click(object sender, RoutedEventArgs e)
{
  MyName = myControl.txtName.Text;
  MyAddress = myControl.txtAddress.Text;
  MyCountry = myControl.ddlCountry.SelectedIndex;
  this.DialogResult = true;
}
```

Once we have defined our ChildWindow, we still need a few actions to display it:

In the MainPage page, add a btnShowDialog button. When we click the button, the Modal window is displayed.

To do so, associate a handler with the Click event. For this example, we will not need the code we previously added to insert objects in the form from the Code-Behind. We can comment on that code, as shown in the following code:

<UserControl x:Class="Chapter2.Sample.Forms.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:MyControls="clr-namespace:Chapter2.Sample.Forms.Views"
  mc:Ignorable="d"
  d:DesignHeight="300" 
  d:DesignWidth="400">
  <StackPanel x:Name="LayoutRoot" Background="White" Orientation="Vertical" Margin="10" >
    <MyControls:MyControlUCView x:Name="myControl"/>
    <!--<Button x:Name="btnAddUserControl" Content="Add Control" Width="100" Height="30" Click="btnAddUserControl_Click"/>-->
    <Button x:Name="btnShowDialog" Content="Show Dialog" Width="100" Height="30" Click="btnShowDialog_Click"/>
  </StackPanel>
</UserControl>

In the Code-Behind, in response to the Click event, we instantiate the control MyDialogView, show it via the method Show(), and link to the ChildWindow Closed event, using the following code:

private void btnShowDialog_Click(object sender, RoutedEventArgs e)
{
  MyDialogView childwindow = new MyDialogView(myControl);
  childwindow.Closed += new System.EventHandler(childwindow_Closed);
  childwindow.Show();
}

In the Closed event handler, we check if the DialogResult is true (not cancelled) and collect the values to display them on the main page by including the following code:
```
void childwindow_Closed(object sender, System.EventArgs e)
{
  MyDialogView dlg = sender as MyDialogView;
  if(dlg.DialogResult == true)
  {
    myControl.txtName.Text = dlg.MyName;
    myControl.txtAddress.Text = dlg.MyAddress;
    myControl.ddlCountry.SelectedIndex = dlg.MyCountry;
  }
}
```
Let us execute our example and see that when we press the button, the modal dialog appears. If we fill in the controls and click OK, we will see how the values are copied and the Modal window is closed.