Deepwire's Blog

August was an amazing month.  And not just because we finally had some weather appropriate for the word ‘summer’, although as you’ll see, that helped.  No.  It was because thanks to volunteering at 2 separate and (mostly) very different events, I felt I was doing something worthwhile, and had lots of fun while doing it!  Both were week long events, which meant taking time off work.  Given how little satisfaction or enjoyment my current job gives me, this was not something I had a problem with.

The first of these was Young Rewired State, which I signed up for as a Mentor back in 2011.  In short, this is a week long hack event open to anyone under the age of 18, with interest or experience in software development, and the desire to make cool stuff.  The only restriction is that whatever they create must make use of at least 1 piece of open data.  This could be data from the government, a particular company, or even Twitter.  They have free reign over what they make, what platforms/languages they use, etc.  Centres were set up at businesses around the country, with adults acting as Mentors to help them and keep them on track.  Microsoft were kind enough to host a centre in Reading, so that is where I spent my week.

Initially I was worried about this, as while I may have a degree in Computer Science & Cybernetics, I’ve not exactly had to use much of it in the last 3 years since I started work.  I would say that my actual development skills are limited.  I was honestly expecting most of them to know more than me, as my recent development experience has been somewhat basic. Also it would mean working with a group of young people I’ve never met before, helping them come up with ideas, work out how to create them and answering whatever questions they may have.  While I have now been involved in Scouting for 3 years, my primary focus has been on running Beaver Scouts.  That section is for children age 6-8 years old, and involves running games and basic activities once a week.  It doesn’t involve spending all day with them, nor needing to prove and technical knowledge or skills.  To top it off, it was also my first hack event of any kind, so I really didn’t know what to expect.

But it turned out to be a truly awesome week.  The 10 participants at the YRS centre in Reading were all excellent.  It was a pleasant surprise at how mature, eager and professional they were.  Between them they came up with 2 ideas to build over the week.  The first, FeelrBot, is a Twitter sentiment analyser that takes current tweets from Twitter with a specified hashtag, and tells you what the general mood is on that topic.  Not only did they build the software, they also made FeelrBot itself, a .NET Gadgeteer powered robot with a face that smiled or frowned depending on the mood.

The second was Digital Tick.It, a mobile train ticket application built on Windows Phone 7. This linked your train ticket booking reference to timetable and platform information, eliminating the need for a paper ticket.  Through QR codes the app presented a ticket that in theory could be scanned by conductors on the train directly from the phone screen, just as easily as they check paper tickets.

The week of rapid development culminated in a weekend ‘Show and Tell’ final, held at The Custard Factory in Birmingham.  This brought together close to 500 participants from all the YRS centres across the UK to showcase their creations in front of a panel of judges.  Despite a minor technical issue – the failure of an external hard drive prompting the last minute re-write of some FeelrBot code – both ours team presentations went really well.  Digital Tick.It was lucky enough to make it into the final of the ‘Wish I’d Thought of That’ category, but alas, didn’t win.  But the effort and quality of the work that they all put in over the week was outstanding.  Considering many of them haven’t even got to their GCSEs yet, it just shows how far they can go if they decide they want to stay working with technology.  Whether they choose to go to college, university or straight into work, it’s fair to say they’ve all got bright futures ahead!

I had no idea what to expect going in to the week, but came out truly inspired after seeing 10 young people, age 14-17, develop some really cool software in such a short time.  I don’t know how much I helped.  Other than driving to Maplin to buy parts for Feelrbot, I don’t think I helped at all.  But that’s not what matters.  I had such a great time working with them that week, and met so many amazing people.  The week left me with a sense of fulfilment I didn’t think I’d ever have a chance of getting, and an awareness I may have more varied skills than I thought.  Perhaps enough to be able to do something like that full time, if such an opportunity exists.  No matter what, I definitely plan to take part in Young Rewired State again next year, and hope to see some of the same people taking part again, hopefully having encouraged some of their friends to sign up too!

After the final of Young Rewired State I did then have to go back to work.  Although I rarely feel good going into the office, never had I felt more deflated than I did on that Monday morning.  Any good feeling that I was still carrying from YRS was instantly sapped, and I was back in the mundane world I have never really enjoyed.  But there was light ahead.  The following weekend I was then off work for another week, to volunteer again.  This time with our Scout group camping at the Essex International Jamboree.

Other than also involving young people, 19 of our Scouts, this was completely different to YRS. There were no computers (other than a netbook to occasionally check emails and charge phones).  There was no software development.  There was no office.  Instead, there was the great outdoors, tents, gas stoves, dodgy showers and 9000 other people to share the experience with.  I knew a few of the Scouts from having helped at their meetings a few times, but I went in to the week hardly knowing any names.   But by the end of the week we all knew each other really well.

This was my first time camping with the Scouts, and also my first Jamboree (I had never been to any when I was in Scouts).  Because all of the activities for the Scouts (and there were loads!) were run by the Jamboree staff, we were there mainly to look after our Scouts, put up the tents, cook all their food, and make sure they had the best time possible.  I definitely didn’t expect to find the experience as awesome as I did.

The atmosphere there was like nothing I’d experienced before.  It was comparable to a music festival, but much friendlier, without the problems you get when thousands of drunk people gather in one place.  Everyone there, of any age, was there because they are part of Scouting or Guiding, and so there is this shared connection.  It means you can easily talk to anyone and know you have something in common.

We were extremely lucky that other than a few short showers, the sun was shining for the entire week.  As I’m writing this my ears are still slightly painful from the sunburn, although fortunately they were the only part of me to get sunburnt.  During the week I was able to go to some of the activities with the Scouts, and spent most of that time taking pictures.  I’ve got some great shots of some of them body-zorbing in the Challenge zone, wearing fake wounds from the Casualty Simulation in the Survival zone and engraving glass in the Creative zone.  If you follow me on Twitter you may have seen some of these show up on Twitpic, which you may still see on the sidebar of this blog.  I even managed to go kayaking during the water activities, which given the high temperatures that day was definitely worth it.

It was the longest time I had spent camping in a tent that I can remember, and it was great just to disconnect for a week and be away from technology.  I’m not complaining that they provided shower facilities though, so it wasn’t completely roughing it, and while they weren’t perfect (low water pressure and ever-changing opening hours), I was one of the rare few to shower every morning.  I wouldn’t normally be bothered on shorter camps, but as it was a week long, and sunscreen was essential, it was really good to start each day clean.  Sunscreen is definitely important, and certainly stopped me from burning, but I really dislike how it makes you feel greasy all day.  Being able to shower that off made it much more bearable.

Both of these events left me with such a great feeling inside, knowing that in some small way I helped them have a great week, and enjoyed myself while doing it.  After the Jamboree the back to work thud was even worse, as I had now had 2 weeks I had truly enjoyed (in one month too!), and knew that wasn’t likely to happen again.

Recently some friends have suggested I become a primary school teacher.  They know I enjoy running Beaver Scouts, and think it would be something I’d be good at.  But I don’t want to go in to education like that.  One of the key differences between both Young Rewired State & the Jamboree, and school, is that the young people who took part in those events wanted to be there.  They made a choice to go.  They were committed to taking part, learning, helping out if it was asked.  Yes there was some messing around – afterall, they’re not adults.  But there were no fights.  There was no deliberate disruption.  School is different.  School is a requirement.  School is somewhere they have to go, whether they want to or not.  In school it’s all to easy for the ones who want to be there to be overshadowed by the ones who don’t.

It’s one of the reasons I didn’t enjoy school much.  Once I got to college (6th form), it was fine.  By then, the ones who didn’t want to be in education, weren’t.  They’d leave as soon as they’d got through their GCSEs.  But I don’t think I’d want to teach at that level either.  Being a teacher, on any level, is something that has never appealed to me.

But both of those weeks have shown me how much I enjoy working with young people, above and beyond running a Beaver Scout Colony once a week.  Whether that’s doing something that involves technology, which has always been one of my passions, or something else, such as in Scouting.  But what they haven’t shown me is how I can do that full time.

I know from experience that it’s all to easy to let the buzz from something like this to fade. Ideas that seem perfect when formed at these events at how to be able to do similar things more often or even for a job quickly die out and get forgotten, as people return to work and the enthusiasm fades.  Certainly there have been some great ideas out of YRS that could lead somewhere, provided all those involved work together to keep the buzz and enthusiasm going. I just really hope that this time it’s different.  That this time there are enough of us to keep the idea alive, and let it grow into something cool.  With this newfound insight into what I like doing & might actually be good at, next year I could be doing something totally different!

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!