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!

In the comparatively basic Windows Phone 7 app I am currently writing, I wanted to do something I thought would be simple.  It should be simple.  To have a dialog box pop-up and allow me to input data into a text box.  This could be useful to get a username and password, for example, without navigating to a completely different ‘page’ in the app.  Or it could just be to pop-up and display information messages in a different place on the screen, rather than across the top using a ‘MessageBox’.

I could not just use a ‘MessageBox’ because I need to add at least a TextBox control on to the pop-up.  I’ve done this in other software I have written, and those have only been basic applications at best, written in C# (or even at work, the dreaded, depressing VBA!).  But for some reason, for Windows Phone 7, this has been made very difficult!

Silverlight includes exactly the object needed – the ChildWindow.  But although Silverlight for Windows Phone includes the System.Windows.Controls namespace, where ChildWindow is found, that particular feature is absent from the phone version.

Instead, to be able to implement a ChildWindow in a Windows Phone 7 application, you must manually reference the full System.Windows.Controls.dll in your project, from the main Silverlight SDK. (Right Click ‘References’, Click ‘Add Reference’, Click ‘Browse’, then locate and select System.Windows.Controls.dll).  On my machine it was found here: “C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Libraries\Client\System.Windows.Controls.dll” (Please check your machine – the Silverlight SDK may be installed in a different location.)

If you do not have the Silverlight SDK installed, please download it here: http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=18149

This includes the Silverlight 4.0 SDK, and will configure it for use in Visual Studio 2010.

Once you have the correct reference, you are ready to add a Pop-up (ChildWindow) to your Windows Phone 7 application!  If you are familiar with using the ChildWindow from other Silverlight development, you’re sorted.

If not, stay tuned for my next post which will explain specifically how to use this and get a Pop-up dialog box in a Windows Phone 7 application!

So I definitely don’t think I’m interested in game development.  I’ve made no progress on the idea I had for a Windows Phone 7 game since August.  I got so far, but just lost interest when it came to implementing all the mechanics that would make it a playable game.  The core idea behind it is actually more generic, and is something I still plan to use in an app in the near future, just it won’t be a game.  The plan to develop it in to a game was more to kill time before I could progress my other idea, but it just didn’t grab me.

I’ve also not made progress on the Netduino based project I started, also back in August.  There was a reason behind this, and the now abandoned game was meant to fill the wait.

My project calls for wireless connectivity, ideally to a Windows Phone 7 device.  Due to poor implementation on the part of Microsoft, I was unable to use Bluetooth (with a BlueSMiRF module I had already purchased!).  For whatever reason, Microsoft have not included the Serial Port Profile (SPP), so I could not connect the phone to the BlueSMiRF module.

My next option was to use WiFi.  But there are not many options for giving the Netduino WiFi connectivity.  Fortunately, in July I read an article on Engadget detailing a newly developed XBee Wifi Module from Digi.  Previously their modules had implemented Zigbee, a proprietary standard, which would not work with a Windows Phone 7 (or any phone for that matter).

This new XBee WiFi module, with the standard XBee form factor and pin out, was perfect!  It communicates using the UART, over the same pins as the XBee Zigbee modules.  The XBee Arduino Shield from SparkFun would work perfectly (in theory), as the Netduino UART pins are the same as on the Arduino.  All I needed to do was wait for them to go on sale, and get one.

This took a while, but I eventually tracked down the only place in the UK currently selling them, 2001 Electronic Components.  I purchased the XBee 802.11b/g/n WiFi Module with PCB Antenna, and it arrived this week.  I will now connect this to my Netduino using the XBee shield and test it.  When I can send data between the Netduino and my computer (or Windows Phone 7), I will post the results (and maybe some code). Then it’s time to finish building, and reveal more of what I’ve been working on!