Join Walt Ritscher for an in-depth discussion in this video Showing child windows, part of Silverlight 5 Essential Training.
- View Offline
Silverlight provides several windowing solutions. In this movie I'll look at the ChildWindow class. Later you'll see how to create a native operating system window. For this demonstration, I'm using Visual Studio in a project called ShowingChildWindows. Adding a child window to a project is easy. I'll go to my project and right- click on it in the Solution Explorer and choose Add > New Item. Then I'll select Silverlight Child Window, and I think I'm going to call this one PrintDialog. The idea is that would ask the user for the number of copies they want to print. Click Add.
You can see that I get a title bar, a Close button in the upper right-hand corner, and an OK and a Cancel button. And I also get an area where I can add any Silverlight content that I would like. Now to show this dialog, I need to write two lines of code. I'll do that in MainPage.xaml, in this Show Child Window button. I'll double-click on this button to stub in the code, and then I'm going to say var child = new PrintDialog, which is the class I just created.
And then to show the Child window, I say child.Show. I said it was easy. Now let's run the application and see what it looks like. I'll press F5, and then I'll click on this button, and there's my PrintDialog. The Child Window floats over the existing Silverlight application. It is contained within the boundaries of the application. If I unmaximize this window and drag the dialog around, now you can see that it is inside the boundaries of the Silverlight application. I'll maximize it.
It is also modal, which means that I cannot change focus to the main window without dismissing the child Window. If I try to click on these buttons, I'm not permitted to do that. I have to dismiss the dialog by clicking on the Close button or the OK or Cancel button. There are a few properties that are interesting to look at. I'll go back to PrintDialog.xaml and then up here in the controls area, I'm going to add some properties. I'm going to clean up my code layout a little bit. I'll do a Ctrl+K, Ctrl+D to rearrange my XAML according to the formatting rules, and then here I'll say OverlayBrush =. I'm going to choose an Orange brush.
This is the color of the overlay that's between my child window and the Silverlight application. And then I can choose the transparency level of this overlay with the OverlayOpacity and do .7 for 70%. I can also customize the title. Currently, it's a string. I'll show you in a few minutes how to customize it with your own elements. Press F5 to run the application, and now you can see I have a fairly opaque orange background. For customization purposes, I already have this FinishedChildWindow example.
In my XAML, you can see that I'm using the property element syntax ChildWindow.Title to define a customized header. Within my header I have a Stackpanel with an image and a text block. I'm also no longer hard- coding the opacity level. I'm doing the binding to another element on this page which is called the overlayslider, here. It looks like this. Here's my nice header, and then I can control how opaque or transparent is the overlay.
This kind of shows you the range of colors that you can have for the background. The child window has all the basics for showing a dialog. If you want to customize the return values--in other words you don't want to just have an OK or Cancel and you want to read these information here like these radio button values--you need to add your own properties. That's the topic of the next movie.
- Installing the toolkit and setting up the development environment
- Using Expression Blend vs. Visual Studio 2010
- Creating a Silverlight page
- Compiling an application
- Exploring the relationship between XAML and .NET
- Using C#
- Working with XAML
- Digging into the Dependency Property System
- Deploying and debugging code
- Creating sophisticated layouts with panel elements
- Managing Visual State with Visual State Manager
- Transforming the user interface (UI) with templates
- Understanding the event model
- Working with text
- Using business data in a binding
- Creating an out-of-browser (OOB) application
- Exploring trust levels
- Playing audio and video
- Handling errors
- Exploring animations
- Working with application windows
- Integration with XNA