Child Windows, also known as modal windows, are used to draw attention to important information or to halt the application flow for user input.  Window applications uses child windows in the form of modal dialogs, such as the MessageBox.  The child window blocks the workflow until the window is closed.  The window stores the result in DialogResult to inform the application of its status upon closing.   Unlike the traditional modal window, Silverlight renders the child window with an animation sequence and renders an overlay background to ensure the user focuses on the window.

In this tutorial, we will show you to create Child Windows for your applications.

Create a Child Window

1. Create a new Silverlight Application.
2. Right-click on the project and select Add New Item.
3. Select Silverlight Child Window template from the Add New Item dialog.

   

4. Open ChildWindow1.xaml.  The following code snippet shows the default output, which prepares the window to contain content and the traditional OK and Cancel buttons.
   

   <Grid x:Name="LayoutRoot" Margin="2">

       <Grid.RowDefinitions>

           <RowDefinition />

           <RowDefinition Height="Auto" />

       </Grid.RowDefinitions>

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

5. Open ChildWindow.xaml.cs.  The OK and Cancel buttons contain events to return the DialogResult values.

Show the Child Window

Child Windows can be displayed using its Show method.  This is not to be confused with WPF's functionality that uses Show to display a window and ShowDialog to display a modal dialog. 

1. Open MainPage.xaml, add a Button to trigger the Click event.
   

   <Button Content="Show Window" Click="Button_Click" />

2. In MainPage.xaml.cs, add the event to open the child window.

   private void Button_Click(object sender, RoutedEventArgs e)

   {

       ChildWindow1 win = new ChildWindow1();

       win.Show();

   }

3. Compile and run the application.  Click on the button to open the child window.  The window opens with a simple yet slick animation rather than displaying the window.  The window can be closed with the Close (upper right corner), Ok, and Cancel buttons. 
   

   

Create a MessageBox

We will extend the ChildWindow to resemble a simple MessageBox with a title and caption text. 

1. The MessageBox needs to be dynamic based on content.  Remove the Width and Height properties from ChildWindow1.xaml.   
2. Add a TextBlock to store the caption text. 
3. Change the OKButton's Content property to Close.  The following code snippet shows the changes in ChildWindow1.xaml.cs.
   

   <Grid x:Name="LayoutRoot" Margin="2">

       <Grid.RowDefinitions>

           <RowDefinition />

           <RowDefinition Height="Auto" />

       </Grid.RowDefinitions>

       <TextBlock x:Name="caption" TextWrapping="Wrap" />

       <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="Close" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />

   </Grid>

4. Add the overloaded constructor with the title and caption string parameters in ChildWindow1.xaml.cs.
   

   public ChildWindow1(string title, string caption)

   {

       InitializeComponent();

       this.Title = title;

       this.caption.Text = caption;

       this.OKButton.Margin = new Thickness(5);

       this.OKButton.HorizontalAlignment = HorizontalAlignment.Center;

       this.CancelButton.Visibility = Visibility.Collapsed;

   }

5. Update the event in MainPage.xaml.cs to call the overloaded constructor.
   

   private void Button_Click(object sender, RoutedEventArgs e)

   {

       ChildWindow1 win = new ChildWindow1("Silverlight", "Child Windows are awesome!");

       win.Show();

   }

6. Compile and run the application.  Click on the button to open the child window. The window displays the custom title and caption.

   

Create an Image Window

The Child Window can be used to place emphasis on a particular item, such as an image. 

1. Add an image to the project and sets the Build Action property to Content and Copy to Output Directory property to Copy if newer.
2. Add an Image control to ChildWindow1.xaml.  The following code snippet shows the changes in ChildWindow1.xaml.cs.
   

   <Grid x:Name="LayoutRoot" Margin="2">

       <Grid.RowDefinitions>

           <RowDefinition />

           <RowDefinition Height="Auto" />

       </Grid.RowDefinitions>

       <StackPanel>

           <Image x:Name="image" Width="320" Height="240" Stretch="Fill" />

           <TextBlock x:Name="caption" TextWrapping="Wrap" />

       </StackPanel>

       <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="Close" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />

   </Grid>

3. Add the overloaded constructor with the Uri parameter in ChildWindow1.xaml.cs.
   

   public ChildWindow1(string title, string caption, Uri uri): this(title, caption)

   {

       image.Source = new BitmapImage(uri);

   }

4. Update the event in MainPage.xaml.cs to call the overloaded constructor.

   private void Button_Click(object sender, RoutedEventArgs e)

   {

       ChildWindow1 win = new ChildWindow1("Silverlight", "There is an image in this window!", new Uri("Butterfly.jpg", UriKind.Relative));

       win.Show();

   }

5. Compile and run the application.  Click on the button to open the child window. The window displays the image along with its caption.

    

Conclusion

Child Windows provide a modal dialog interface for Silverlight applications. The window can be used to draw attention to important information, such as an error message or picture.