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.

 

image

 

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

 

image

 

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.

 

image

 

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

 

image

 

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

 

image

 

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.

 

image

 

 

 

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.

 

image

 

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.

 

image

 

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.

 

image

 

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.

 

image

 

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

 

image

 

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.

 

image

 

 

 

 

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.

 

image

 

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".

 

image

 

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.

 

image

 

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.

 

image

 

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

 

image

 

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.

 

image

 

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.

 

image

 

 

 

 

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:

 

image

 

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

 

image

 

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:

 

image

 

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:

 

image

 

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:

 

image

 

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:

 

image

 

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.

 

image

 

 

 

 

Download

 

 

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.


If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Twitter , Facebook , Google+ and LinkedIn . I would love to hear your thoughts and opinions on my articles directly. Also, don't forget to share your views and/or feedback in the comment section below.

3 comments

  1. thanks for the great article kunal!!!...keep it up..

    ReplyDelete
  2. Thank you very very much.. its very useful to me.. i change some element value to achieve my want to be output! and it done! :)

    ReplyDelete


 
© 2008-2016 Kunal-Chowdhury.com - Microsoft Technology Blog for developers and consumers | Designed by Kunal Chowdhury
Back to top