Deepwire's Blog

In my last post, I explain how to get the correct Silverlight assembly referenced in developing a Windows Phone 7.5 application, so you can implement the ChildWindow object. This allows you to add Pop-up dialogue boxes to your application that by default are not possible!

Now, I’m going to show you how to implement the ChildWindow, design your pop-up, and use it in your Windows Phone 7 app. I have tried to keep it simple, and focus on implementing the ChildWindow only. I have not included the other functionality I use in my app. There are many developer resources available that can help you can learn Windows Phone development, such as here at the Windows Phone App Hub, but these resources do not include the ChildWindow class I am explaining here.

First, add a new Windows Phone User Control to your project, and name it, for example ‘Popup.xaml‘. (Right click your project, Click Add -> New Item. Choose Windows Phone User Control from Silverlight for Windows Phone). This will create your control and display the visual and code XAML editors side by side.

XAML Editor side by side view.

You can design your control whichever way you prefer. You may drag controls from the toolbox onto the visual side, or you may type this in the code editor. As it is a pop-up, you should probably keep it simple. I have used just 2 TextBlocks, 1 TextBox and 2 Buttons.

The next step is very important. You must change the XAML to reference ‘System.Windows.Controls‘ and change it from a UserControl to a ChildWindow. It is also important to set the size and position relevant to the screen size. Remember, Windows Phone 7 handsets currently have a 480 x 800 (in portrait) resolution. I have created the pop-up to be 440 wide, not quite the full width of the screen, and only 200 high. (If you were designing your app to work in landscape, you would need to adjust the width and height to be appropriate.) I have positioned it towards the top of the screen, so that the software touch screen keyboard does not cover it. If you have the pop-up too low, it would be behind the keyboard and difficult to use.

Your Popup.xaml code outline should look like this:

<tk:ChildWindow x:Class="ExampleProject.Popup"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:tk="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    VerticalAlignment="Top"
    HorizontalAlignment="Center"
    Margin="0,40,0,0"
    HasCloseButton="false" Height="200" Width="440">

    <Grid x:Name="LayoutRoot">
	<!--LayoutRoot is the root grid where all page content is placed-->
    </Grid>

</tk:ChildWindow>

Next, for any Buttons you have used, make sure the Button Click events have been generated. Now go into ‘Popup.xaml.cs‘, and begin by adding reference to ‘System.Windows.Controls‘ at the top with the line ‘using System.Windows.Controls;‘. Change the base class for your pop-up from ‘UserControl‘ to ‘ChildWindow‘.

The outline of Popup.xaml.cs will now look like this:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace ExampleProject
{
    public partial class Popup : ChildWindow
    {
        public string HostName { get; set; }

        public Popup()
        {
            InitializeComponent();
        }
    }
}

I am using my pop-up to input a network device Host name, which is then used to set the destination server of a UDP socket when broadcasting data. I have defined that as a public variable in Popup.xaml.cs, so it can be set, and then read back in my main app. I store this as a setting in my app, so it can be saved to memory, and loaded in future. I also have two buttons, ‘OK’ to set the Host name, and ‘Cancel’ to close the Pop-up without doing anything.

I use a Connect button in MainPage.xaml.cs to create an instance of the pop-up and display it. The existing value of Host name is loaded from ‘settings’ and passed to the pop-up window. Important: If you are developing a ‘Silverlight and XNA Application‘, as I am here, you may need to turn off the XNA rendering to display the Pop-up. When I first tried this, my pop-up would not display over the XNA graphics I was rendering at the time.

Opening the Pop-up from MainPage.xaml.cs:

    private void btnConnect_Click(object sender, RoutedEventArgs e)
    {
        // Set the sharing mode of the graphics device to turn off XNA rendering
        SharedGraphicsDeviceManager.Current.GraphicsDevice.SetSharingMode(false);

        Popup popup = new Popup();
        popup.HostName = settings.HostName;
        popup.Closed += new EventHandler(OnPopupShow);

        popup.Show();
    }

In Popup.xaml.cs, it then takes the current Host name, and puts it into the text box:

protected override void OnOpened()
{
    base.OnOpened();

    this.txtHostName.Text = this.HostName;
    this.txtHostName.SelectAll();
}

Finally the two buttons in Popup.xaml.cs control how it functions in MainPage.xaml.cs:

private void btnOK_Click(object sender, RoutedEventArgs e)
{
    // Value is good so close this childwindow
    this.HostName = this.txtHostName.Text.Trim();
    this.DialogResult = true;
}

private void btnCancel_Click(object sender, RoutedEventArgs e)
{
    this.DialogResult = false;
}

Back in MainPage.xaml.cs I use the OnPopupShow event that occurs when the pop-up is closed, to decide what to do with the Host name. If the ‘OK’ button was pressed, the pop-up will return ‘true’, and so the Host name entered in the TextBox will be used and saved into the app settings. If ‘Cancel’ was pressed, the pop-up returns ‘false’, and so my application ignores any text that was entered, and will continue to use the existing saved Host name. Important: As we turned off XNA rendering to allow us to display the Pop-up correctly, you can now turn it back on as the Pop-up has closed.

Handling the result of the Pop-up with the OnPopupShow event:

private void OnPopupShow(object sender, EventArgs e)
{
    Popup popup = sender as Popup;

    if (popup.DialogResult == true)
    {
        settings.HostName = popup.HostName;
        settings.Save();

        // Set the sharing mode of the graphics device to turn on XNA rendering
        SharedGraphicsDeviceManager.Current.GraphicsDevice.SetSharingMode(true);
    }
}

Example ChildWindow Pop-up in the Windows Phone Emulator.

This is a simple implementation of a ChildWindow in a Windows Phone 7 application, used to get the destination Host name for a UDP socket. As I said at the start, I have focussed just on the ChildWindow to display and use a pop-up, and left out the other functionality of my application.

This should now allow you to create your own Pop-up, with whatever controls you need, and use it in your own application. Another application of it could be entering a username and password.

Have fun developing Windows Phone 7 apps – hopefully you will find this useful. If you have any questions, or get stuck, post a comment and I’ll try to help!