As business applications get built there is usually a need to implement a modal popup to prompt the user for input that is needed before the application can continue. In earlier versions of Silverlight the developer had to roll their own version. In Silverlight 3 the ChildWindow class is used to provide the base functionality needed in a modal popup.
This blog will show you how easy the ChildWindow class is to use to implement a simple modal popup function in your application.
The finished code for this blog is here.
1. Create a Silverlight application project with an ASP.NET web project to host it
2. Add a new item to the Silverlight project, select a Silverlight Child Window and name it MyChildWindow.xaml
The MyChildWindow.xaml.cs class has generated code that responds to the buttons in the MyChildWindow.xaml file. The event handlers set the values for the DialogResult for the ChildWindow. When the values are set the Child Window closes.
3. Add the following TextBlock definition above the Button definitions in the MyChildWindow.xaml file
<TextBlock FontSize="20" TextWrapping="Wrap" Text="Click a button to see the result on the main page..." ></TextBlock>
4. Change the following properties on the ChildWindow control in the MyChildWindow.xaml file
Width="250" Height="200" Title="Pete's Modal Window"
5. Add the following XAML to the LayoutRoot Grid in MainPage.xaml file
<StackPanel HorizontalAlignment="Center" Margin="0,30,0,0" >
<Button x:Name="OpenChildWindowButton" Content="Open Child Window" Width="150" Height="30" Click="OpenChildWindowButton_Click" />
<TextBlock x:Name="ResultTextBlock" FontSize="16" Text="Result:" Margin="0,15,0,0" ></TextBlock>
This code defines a button to open the Child Window when clicked and a TextBlock to display the DialogResult value of the Child Window when it closes.
6. Add the following code to the MainPage.xaml.cs file
private void OpenChildWindowButton_Click(object sender, RoutedEventArgs e)
MyChildWindow myChild = new MyChildWindow();
myChild.Closed += new EventHandler(myChild_Closed);
void myChild_Closed(object sender, EventArgs e)
MyChildWindow myChild = (MyChildWindow)sender;
bool? result = myChild.DialogResult;
ResultTextBlock.Text = "Result: " + result.Value.ToString();
ResultTextBlock.Text = "Result: No value";
This code shows the initialization of an instance of the Child Window class when the button is clicked and the analysis of the DialogResult value of the Child Window when it is closed.
7. Run the application, click the button and click OK, Cancel or the cross in the top right hand corner.
Congratulations! You have implemented your own modal window using the ChildWindow class.
What have we done?
We have implemented our own modal window using the ChildWindow Class.
Using the ChildWindow class we can quickly implement a modal window in our application. The window is closed when the DialogResult property is set in the ChildWindow instance. If the modal popup has values that need to be retrieved if the modal popup captures user input, then the values captured should be exposed via public properties in the ChildWindow class. The closed event handler can then be handled in the calling class and the public properties interrogated to retrieve the user entered values.