Customizing Silverlight ChildWindow Style using Blend

Do you work with Child Window in Silverlight and want to customize the look & feel to match with your application UI? Then this post will help you to understand the process. I am going to discuss with you the customization steps in detail, so that, next time when you want to modify your Child Window UI, you will find it very useful.

In this article, I will guide you through the steps of customization with the help of a sample application. We will need Microsoft Expression Blend for the full customization. Read the complete article to learn about it.

Setting up the Basic Project

Open your Expression Blend and create a new "Silverlight Application" project by specifying proper name, location and target version. Click "OK" and the IDE will create the Silverlight project for you.

Once your project is ready, select the LayoutRoot and from the toolbox click the dropdown arrow as shown in the below screenshot:

This will open the search toolbox tab for you. Search for the "ChildWindow" and select it. Note that, the ChildWindow is part of the System.Windows.Controls.dll assembly.

Now draw the ChildWindow inside the LayoutRoot Grid as shown i the below screenshot:

It will add the ChildWindow inside your XAML page. Resize it properly, so that, it will look good when you run the application.

Now let's run the application and have a look into the default Child Window. It doesn't look good, right? Yes, it is the default look of the Silverlight ChildWindow. Now, we need to customize it by editing the template of the control.

Editing the ChildWindow Template

Lets open the Blend IDE and write click on the ChildWindow control under the objects tab. From the context menu, select the "Edit Template" and from the 2nd level context menu click on the "Edit a Copy..." menu item.

Remember that, for the first time you have to click on the "Edit a Copy..." menu item. But, once you return to this screen and want to customize the existing template, you have to click on te "Edit Currrent" menu item.

This will open the "Create Style Resource" dialog in your screen. Give a proper name to your new style and chose where to store the style resource. Now click "OK" to start modifying the template.

You will see the following template inside your Blend IDE, which consists of several Border controls and Grid. It has some additional controls too. We will now discuss on them, so that, you can understand it properly and in future you will feel it very easy to customize.

Inside the Root grid, we have two more Grid named "Overlay" and "ContentRoot". Overlay grid control actually creates the semi transparent background which makes the ChildWindow as modal dialog. Modal dialog means, you will not able to click on any controls outside when the Child Window is open.

The ContentRoot Grid has 5 different Border controls. First four Border controls are used to create the border shade of the Child Window. If you want to change the shade of the Window, you can modify those accordingly.

For now, we are not worried about the shades. We will customize the other part of the Window.

If you expand the fifth Border control, you will see several levels of Grid and Border controls inside it.

As shown in the below snapshot, you will see that, there are two Borders inside the selected Grid. The Grid control has two rows. In the first row, we have one border control named "Chrome". This is the title bar of your Child Window.

Don't want to change the name of the border named "Chrome". If you rename it or delete it, you will not be able to drag the Child Window inside your application UI.

In the second row we have the actual content placeholder to show any content inside the Window.

Modifying the Style

Select the Border control named "Chrome". Now from the properties panel, change the Background color as per your requirement. Give a gradient brush to your title bar.

Expand the Chrome control and select the CloseButton which is placed inside the title bar. Set a bigger size to it by specifying the height and width of the button. Set the cursor type to "Hand".

You can also change the Close Button template. As you did for the Child Window, right click on the CloseButton control. You will see that the "Edit Current" submenu item of "Edit Template" is enabled. It means that the style is already available and you don't have to create it from scratch.

Click "Edit Current" and it will open the template of the button into the screen.

As shown in the below screenshot, select the path control labelled "X" and set it's height & width. You can also change the color and other look and feel of the close button from this screen. You can also add some animations for states to it for the mouse over or pressed state.

Now you can change the look & feel of the content control, which holds the title of the Child Window.

Select the main border control of the Content Control and give background color to it, as per your UI style. Set a different Foreground color to match the title with the bar background.

Run the application and you will see a nice UI for the Child Window. Now this shows a nonmodal window. To run the child window as a Modal Window, you need to open the control from the code behind.

Modifying the code to show the Child Window

Now from the LayoutRoot, delete the ChildWindow that we added just now before modifying the style. The UI inside the IDE will look as below:

Add a button inside the Layout root and name the control. Have a look into the below screenshot:

Now open the code behind file and add the click event handler for the Button inside the constructor, just after the InitializeComponent() call. Get the style of the custom child window from the page resource by specifying the key to it and store it in a member variable. Here is the code of it:

Inside the button click event implementation, create a ChildWindow by specifying height, width, content to it. Also specify the style to it and call the Show() method to open the Child Window.

Run you application and you will see the button in the screen. Click the "Show Message" button and you will see the Child Window popped up in the screen as shown below:

You can see that the background controls are wrapped with a semi transparent black layer. Thus your window becomes a modal window and you will not be able to click outside the window area.

So, question here will be: Can we be able to change the color of the semi transparent layer? Yes, we can. I already mentioned it earlier in this article that the "Overlay" border does the thing for you. Make sure that you are not changing any name of any control inside the template.

Open the XAML code and find the name "OverlayBrush". You can find it here in the XAML code:

Change the value of the OverlayBrush with a proper color code of your choice. Let us add a bluish color to it. Replace the value with "#7F000055" as shown below:

Let us run it once again. Click the "Show Message" button to show the Child Window into the screen. Hey, you will notice that, this time the background color looks little bluish as per our requirement.

Download

• Custom Child Window Demo Source code (65KB)

End Note

Hope, from this article you got the basic concept of modifying the Child Window template. Next time when you need it, you will be able to change the same very easily. If you like this post, submit a feedback at the end of this post and let me know if you have any questions and/or suggestions.

I also tweet @kunal2383. Follow me there and share the link of this article to your friends and colleagues. Also, don't forget to follow my new site called Silverlight-Zone. You can find Silverlight and Windows Phone 7 related article news there. We also tweet all those articles in Twitter, Facebook and other services. If you want to include your articles, just drop a line to me in the Discussion forum section placed on top menu bar. Cheers.