Silverlight Child Windows (Modal Windows)

Silverlight Child Window provide functionality to pop up a window and it will disable the rest of the application until the window is closed.(Introduced with Silverlight 3).  

Create Sample Application

1. First create a new silverlight application and named it as SilverlightChildWindow.
2. Right Click on silverlight project and add a new ChildWindow from Add New Item dialog.

3. Now we will design our MainPage.xaml layout as below.

<UserControl x:Class="SilverlightChildWindow.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"
    mc:Ignorable="d"
    d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>
        <TextBlock x:Name="lblInfo" Margin="10" FontSize="13" TextWrapping="Wrap">
            Please Enter your user information.
        </TextBlock>
        <Button Content="Enter Your Information" Height="23" Grid.Row="1" HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" VerticalAlignment="Top" Width="150" Click="button1_Click"  />
    </Grid>
</UserControl>

4. After that we will design our ChildWinodw.xaml page as below.

<controls:ChildWindow x:Class="SilverlightChildWindow.ChildWindow1"
           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"           
           Title="ChildWindow1">
    <Grid x:Name="LayoutRoot" Margin="2">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        
        <TextBlock Grid.Row="0" Grid.Column="0" Margin="3">First Name:</TextBlock>
        <TextBox  x:Name="txtFirstName" Grid.Row="0" Grid.Column="1" Margin="3" Width="150"></TextBox>
        <TextBlock Grid.Row="1" Grid.Column="0" Margin="3">Last Name:</TextBlock>
        <TextBox  x:Name="txtLastName" Grid.Row="1" Grid.Column="1" Margin="3" Width="150"></TextBox>


        <Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Left" Margin="3" Grid.Row="2" Grid.Column="1" />
        <Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="3" Grid.Row="2" />
    </Grid>
</controls:ChildWindow>

5 . To show a Child Window, we need to create an object of the child window and call its Show() method. Here the Show()  method act as as asynchronous call and it returns immediately, since that we will not get the result from the dialog using this method. So we need to implement the Closed event from the Child Window and check the DialogResult there. So we will implement this in MainPage.xaml.cs page.

using System;
using System.Windows;
using System.Windows.Controls;

namespace SilverlightChildWindow
{
    public partial class MainPage : UserControl
    {
        private ChildWindow1 childWindow = new ChildWindow1();

        public MainPage()
        {
            InitializeComponent();
            childWindow.Closed += new EventHandler(childWindow_Closed);
        }

        void childWindow_Closed(object sender, EventArgs e)
        {
            if (childWindow.DialogResult == true)
            {
                lblInfo.Text ="Hi " +childWindow.UserName+",";
            }
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            childWindow.Show();
        }
    }
}

6. Also we need to add property to ChildWindow.xaml.cs.

using System.Windows;
using System.Windows.Controls;

namespace SilverlightChildWindow
{
    public partial class ChildWindow1 : ChildWindow
    {
        public ChildWindow1()
        {
            InitializeComponent();
        }

        private void OKButton_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = true;
        }

        private void CancelButton_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = false;
        }

        public string UserName
        {
            get { return txtFirstName.Text + " " + txtLastName.Text; }
        }
    }
}

7 . Now you can Run the application and if everything work fine you will get following type pop up after you click on button.

Download source Code Here.