Modal Child Window in Silverlight

2011-08-23


We often see the modal child window when we visit some websites. The modal child window will disable all other content on screen but just activate current child window.

In Silverlight, we are able to use modal child window feature now.

In Visual Studio 2010, create a new Silverlight application, and named the project "SLModalWindow":

slmodalwin00

In MainPage.xaml, we add a Button which we will use it to open a modal child window; then add a Textbox which will accept modal child window return stuff. and also add a TextBlock indicates related text with TextBox:

<UserControl x:Class="SLModalWindow.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:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Button Content="Click to open a modal window" Height="23" HorizontalAlignment="Left" Margin="99,84,0,0" Name="button1" VerticalAlignment="Top" Width="200" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="99,206,0,0" Name="tbReturn" VerticalAlignment="Top" Width="200" />
        <TextBlock Height="23" HorizontalAlignment="Left" Margin="99,177,0,0" Name="textBlock1" Text="Modal Window Return:" VerticalAlignment="Top" Width="200" />
    </Grid>
</UserControl>

The following is design view in Visual Studio 2010:

slmodalwin01

Now we add a Child window in our Silverlight project:

Right click the SLModalWindow project and add a new item, select "Silverlight Child Window" in template list:

slmodalwin02

A new Child window will be added into SLModalWindow project, there are 2 buttons already included in this child window: OK button and Cancel button:

slmodalwin03

Let’s go back to MainPage.xaml, double click the button1 (the content text is ‘Click to open a modal window’) to generate click event code. we add child window popup code in this button click event method:

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            ChildWindow1 childWin = new ChildWindow1();

            childWin.Show();
        }

Then we just build our solution and run it, when you click the button, you can see a modal child window popup, very easy and cool!

slmodalwin04

Now we try to catch return information from child window and show on Main Page:

The child window will be closed what ever user clicks OK button, Cancel button or Close icon. So we can consider put return information in Child window’s close event.

So when we new a Child window instance in button1_Click event, we can generate a child window closed event. We change button1_Click method in Main Page as following:

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            ChildWindow1 childWin = new ChildWindow1();

            childWin.Closed += new EventHandler(childWin_Closed);

            childWin.Show();
        }

The childWin.Closed event is following:

        void childWin_Closed(object sender, EventArgs e)
        {
            ChildWindow1 childWin = (ChildWindow1)sender;

            if (childWin.DialogResult == true)
            {
                this.tbReturn.Text = "User clicked OK button";
            }
            else if (childWin.DialogResult == false )
            {
                this.tbReturn.Text = "User clicked Cancel button";
            }
        }

When user click OK button, Main page can catch the return information which indicates user clicked OK button, otherwise, main page will know the cancel button or close icon has been clicked.

slmodalwin05