Using ChildWindow in Windows Phone 7 Projects

Url: http://wildermuth.com/downloads/wp7childwindow.zip

Windows Phone 7

I was following a conversation in Twitter about the use of MessageBox in a WP7 application. I hate MessageBox as it usually looks nothing like the rest of my app.  If figured I should try it first and the out of the box look of the MessageBox API is actually pretty good. It includes a Metro look and a decent animation:

MessageBox on WP7

 Not bad, but the limitation of only "OK" and OKCancel" is something I run into sometimes so I recommended my old standby from Silverlight, ChildWindow. I love the ChildWindow class because you derive your own UserControl and you can edit it specifically. Unfortunately, there is not an Item type for the Windows Phone for ChildWindow.  So I headed back to the Silverlight 3 to grab it. The ChildWindow class exists in the System.Windows.Controls assembly so I had to grab that from Silverlight 3.

Once I did this, I created a new UserControl (from the File->Add New Item...).  I changed the root of the XAML file to be ChildWindow and changed the base class in the .cs file too:

<tk:ChildWindow x:Class="WindowsPhoneApplication2.TestChildWindow"
                  xmlns:tk="clr-namespace:System.Windows.Controls;..."
...

public partial class TestChildWindow : ChildWindow
{
  ...

Once I did that, I could use the new ChildWindow class the way I expected:

TestChildWindow wnd = new TestChildWindow();
wnd.Show();

The problem was it was styled with the non-Phone look. So ControlTemplates to the rescue.  By using a ControlTemplate for the ChildWindow I could change the look and feel to better match the Phone.  The look I came up with is ok, but I am no designer:

ChildWindow on the Phone

The problem was editing the ControlTemplate. Normally I'd go to Blend and have them make me a copy of the template and it would bring in the old template. But that doesn't work for some reason.  But the template parts are supported so at first I just figured I'd make it by hand. After some hand-wringing, I went to a full Silverlight project and used blend to create the template and copy/pasted it into the Phone project's app.xaml file. Not perfect but it worked.  Its beta, right?

Once the ControlTemplate was created I could edit my ChildWindow like any other user control:

MessageBox on WP7

(Click for larger version)

Its not very apparent from these static screenies, but the animations in the ControlTemplates are still there so the background is faded and the zoom all works.  Because that behavior is in the ControlTemplate, if you wanted to make the look even more Metro-cized you could edit the template to create a flip animation instead...that's your call.

The source code is here:

http://wildermuth.com/downloads/wp7childwindow.zip

 I've also added an ItemTemplate for the ChildWindow for Windows Phone 7 projects (though the ControlTemplate won't be there).  Use at your own risk. Place it in your VS2010 Item Template directory (e.g. <Your User Docs Folder>\Visual Studio 2010\Templates\ItemTemplates).

http://wildermuth.com/downloads/wp7childwindowtemplate.zip

 

 

Comments

Gravatar

Peter Custance Wednesday, August 18, 2010

Used the template OK but child window does not exist in Windows.Controls. How did you add this to the references or am I missing something here?

Gravatar

Martin Anderson Wednesday, August 18, 2010

I am not too familiar with the Child Window in Silverlight, but is there any way to override or change the animation for it as it appears. I'd like to replicate the Message box, by having the backing dark, the dialog type of interactivity, but use the swivel animation and possibly play a sound effect as it animates on screen?

Gravatar

Shawn Wildermuth Wednesday, August 18, 2010

Peter,

Its in the Silverlight 3 toolkit (you may need to download it if you haven't done so).

Gravatar

Shawn Wildermuth Wednesday, August 18, 2010

Martin,

The animation is in the ControlTemplate (part of the VisualStateManager).

Gravatar

Amit Wednesday, August 18, 2010

Good stuff Shawn, but my only concern is by deviating from the Design Guidance you're creating a new type of experience in the application.

Wouldn't it provide a more consistent experience if instead of a child window you introduced a new Page, and the "close" button would take the user to the previous Page?

Gravatar

Shawn Wildermuth Wednesday, August 18, 2010

Amit,

I don't necessarily disagree but the MessageBox/ChildWindow would be more viable in a 'modal dialog' sort of situation (its not really modal but close).

Gravatar

Martin Anderson Wednesday, August 18, 2010

Amit, The child window could be made to match the MessageBox control, or could animate in like the SIP Keyboard, and that way it would match the experience on the phone.

But if someone came up with a great child window control template, and put it up for download, it could become more of a norm, if lots of devs used it!

Gravatar

Martin Anderson Wednesday, August 18, 2010

Amit, The child window could be made to match the MessageBox control, or could animate in like the SIP Keyboard, and that way it would match the experience on the phone.

But if someone came up with a great child window control template, and put it up for download, it could become more of a norm, if lots of devs used it!

Gravatar

Shawn Wildermuth Wednesday, August 18, 2010

Martin,

Like I mentioned to Amit, its in the ControlTemplate (in the VisualStateManager).

Gravatar

Natallia Tuesday, August 24, 2010

Thank you for your post.
There is only one problem for me: change of orientation. This message box doesn't change it.

Gravatar

Natallia Tuesday, August 24, 2010

One more thing. When I make this way:
var d = new MessageDialog();
d.Show("1");
var a = new MessageDialog();
d.Show("2");
var c = new MessageDialog();
d.Show("3");
MessageBox.Show("4");

I see message box with 4 first, then child window with 3!

Gravatar

Natallia Tuesday, August 24, 2010

One more thing. When I make this way:
var d = new MessageDialog();
d.Show("1");
var a = new MessageDialog();
d.Show("2");
var c = new MessageDialog();
d.Show("3");
MessageBox.Show("4");

I see message box with 4 first, then child window with 3!

Gravatar

Pauliom Monday, September 6, 2010

I tied the 'new page as a dialog' approach and IMO it doesn't work because of handling the hardware back button. Just gets very messy so I'm going with a "popup" too

Gravatar

Geoff Tuesday, October 5, 2010

A little surprised this isn't baked in but very nice. One question - since this isn't a phone application page, how would one go about supporting the child window in both orientations? Obviously SupportedOrientations property is not available but I'm assuming in code behind I can call some API to detect the orientation and manually rotate the child window?

Gravatar

Juan Pablo Tuesday, October 5, 2010

I'll try this on the afternoon (I think is great) and I'm disagree with Amit on page 50 of the UI Design it can be considered a 'Raw Notification' The only difference it's that it appears on the upper part of the screen

Gravatar

MawashiKid Friday, October 8, 2010

Hi Shawn,

Tried your example and worked fine...Thank's

As for Geoff question about SupportOrientations property...it's not available in the case of ChildWindow. though that's a good question...I guess you'd have to detect the orientation from Mainpage and then call a function to rotate the Childwindow manually...though I'm a bit sceptic on how well this solution would respond overall. If someone has a clue on that one I'd be happy to ear about it... Thank's :)

Gravatar

MawashiKid Friday, October 8, 2010

Hi Shawn,

Tried your example and worked fine...Thank's

As for Geoff question about SupportOrientations property...it's not available in the case of ChildWindow. though that's a good question...I guess you'd have to detect the orientation from Mainpage and then call a function to rotate the Childwindow manually...though I'm a bit sceptic on how well this solution would respond overall. If someone has a clue on that one I'd be happy to ear about it... Thank's :)

Gravatar

David Hovel Sunday, October 24, 2010

Thanks a lot! I'm a newbie to Silverlight and didn't have a clue about this, but I was shocked that the WP SDK didn't have a nice, easy to use popup dialog surrogate.

Gravatar

John Tuesday, April 26, 2011

I do have a question. Someone had brought up the hardware back button and how it functions differently than a message box. The back button will close a message box taking you back to a form. With the child window, it's like you hit the back button on that form (which will terminate your app).

Is there a way to catch the hardware back button when the child form has focus and just close it?

Gravatar

vaibhav Wednesday, July 13, 2011

Hi Shawn,

Thanks I tried ur example and it worked.

Gravatar

Alessandro Morvillo Friday, October 28, 2011

Thank you. I've used your example and linked your blog inside my post about ChildWindows in Windows Phone today.

http://www.amdev.it/post/2011/10/28/Usare-le-Child-Window-su-Windows-Phone-7.aspx


Leave a Comment

*
*
*