If you haven’t spent the last week in the middle of the Sahara desert or traveling on a sled in the north pole area you should have heard something about the launch of Windows Phone 7 Series (or Windows Phone Series 7, or Windows Series Phone 7 or something like that). Even if you are in the middle of the desert or somewhere around the north pole you may have been reached by the news, since it seems that WP7S (using the full name will kill my available bandwidth!) is generating a lot of buzz in the development and IT communities.

One of the most important aspects of this new platform is that it will be programmed using a new set of tools and frameworks, completely different from the ones used on older releases of Windows Mobile (or SmartPhone, or PocketPC or whatever…).

WP7S applications can be developed using Silverlight or XNA.

If you want to learn something more about WP7S development you can download the preview of Charles Petzold’s book about it: http://www.charlespetzold.com/phone/index.html

Charles Petzold is also the author of “Programming Windows”, the first book I ever read about programming on Windows (it was Windows 3.0 at that time!). The fact that even I was able to learn how to develop Windows application is a proof of the quality of Petzold’s work. This book is up to his standards and the 150pages preview is already rich in technical contents without being boring or complicated to understand. I may be able to become a Windows Phone developer thanks to mr. Petzold.

Mr. Petzold uses some nice samples to introduce the basic concepts of Silverlight development on WP7S. On this new platform you’ll use managed code to develop your application, so those samples can’t be ported on Windows CE R3 as they are, but I would like to take one of the first samples (called “SilverlightTapHello1”) and adapt it to Silverlight for Windows Embedded to show that even plain old native code can be used to develop “cool” user interfaces!

The sample shows the standard WP7S title header and a textbox with an hello world message inside it. When the user touches the textbox, it will change its color. When the user touches the background (Grid) behind it, its default color (plain old White) will be restored.

Let’s see how we can implement the same features on our embedded device!

I took the XAML code of the sample (you can download the book samples here: http://download.microsoft.com/download/1/D/B/1DB49641-3956-41F1-BAFA-A021673C709E/CodeSamples_DRAFTPreview_ProgrammingWindowsPhone7Series.zip) and changed it a little bit to remove references to WP7S or managed runtime.

If you compare the resulting files you will see that I was able to keep all the resources inside the App.xaml files and the structure of  MainPage.XAML almost intact.

This is the Silverlight for Windows Embedded version of MainPage.XAML:

<UserControl

    x:Class="SilverlightTapHello1.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}" Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <!--TitleGrid is the name of the application and page title-->

        <Grid x:Name="TitleGrid" Grid.Row="0">

            <TextBlock Text="SILVERLIGHT TAP HELLO #1" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>

            <TextBlock Text="main page" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/>

        </Grid>

        <!--ContentGrid is empty. Place new content here-->

        <Grid x:Name="ContentGrid" Grid.Row="1" MouseLeftButtonDown="ContentGrid_MouseButtonDown" Background="{StaticResource PhoneBackgroundBrush}">

          <TextBlock x:Name="TextBlock" Text="Hello, Silverlight for Windows Embedded!" 

                     HorizontalAlignment="Center"

                     VerticalAlignment="Center"

                     />

        </Grid>

    </Grid>

</UserControl>

If you compare it to the WP7S sample (not reported here to avoid any copyright issue) you’ll notice that I had to replace the original phoneNavigation:PhoneApplicationPage with UserControl as the root node. This make sense because there is not support for phone applications on CE 6. I also had to specify width and height of my main page (on the WP7S device this will be adjusted by the OS) and I had to replace the multi-touch event handler with the MouseLeftButtonDown event (no multitouch support for Windows CE R3, still).

I also changed the hello message, of course.

I used XAML2CPP to generate the boring part of our application and then added the initialization code to WinMain:

int WINAPI WinMain(HINSTANCE hInstance,

                     HINSTANCE hPrevInstance,

                     LPTSTR     lpCmdLine,

                     int       nCmdShow)

{

    if (!XamlRuntimeInitialize())

            return -1;

    HRESULT retcode;

    IXRApplicationPtr app;

    if (FAILED(retcode=GetXRApplicationInstance(&app)))

        return -1;

    XRXamlSource dictsrc;

    dictsrc.SetResource(hInstance,TEXT("XAML"),IDR_XAML_App);

    if (FAILED(retcode=app->LoadResourceDictionary(&dictsrc,NULL)))

        return -1;

    MainPage page;

    if (FAILED(page.Init(hInstance,app)))

        return -1;

    UINT exitcode;

    if (FAILED(page.GetVisualHost()->StartDialog(&exitcode)))

        return -1;

    return exitcode;

}

You may have noticed that there is something different from the previous samples.

I added the code to load a resource dictionary. Resources are an important feature of XAML that allows you to define some values that could be replaced inside any XAML file loaded by the runtime. You can use resources to define custom styles for your fonts, backgrounds, controls etc. and to support internationalization, by providing different strings for different languages.

The rest of our WinMain isn’t that different. It creates an instances of our MainPage object and displays it.

The MainPage class implements an event handler for the MouseLeftButtonDown event of the ContentGrid:

class MainPage : public TMainPage<MainPage>

{

public:

    HRESULT ContentGrid_MouseButtonDown(IXRDependencyObject* source,XRMouseButtonEventArgs* args)

    {

        HRESULT retcode;

        IXRSolidColorBrushPtr brush;

        IXRApplicationPtr app;

        if (FAILED(retcode=GetXRApplicationInstance(&app)))

            return retcode;

        if (FAILED(retcode=app->CreateObject(IID_IXRSolidColorBrush,&brush)))

            return retcode;

        COLORREF color=RGBA(0xff,0xff,0xff,0xff);

        if (args->pOriginalSource==TextBlock)

            color=RGBA(rand()&0xFF,rand()&0xFF,rand()&0xFF,0xFF);

        if (FAILED(retcode=brush->SetColor(color)))

            return retcode;

        if (FAILED(retcode=TextBlock->SetForeground(brush)))

            return retcode;

        return S_OK;

    }

};

As you can see this event is generated when a used clicks inside the grid or inside one of the objects it contains. Since our TextBlock is inside the grid, we don’t need to provide an event handler for its MouseLeftButtonDown event. We can just use the pOriginalSource member of the event arguments to check if the event was generated inside the textblock.

If the event was generated inside the grid we create a white brush,if it’s inside the textblock we create some randomly colored brush. Notice that we need to use the RGBA macro to create colors, specifying also a transparency value for them. If we use the RGB macro the resulting color will have its Alpha channel set to zero and will be transparent.

Using the SetForeground method we can change the color of our control.

You can compare this to the managed code that you can find at page 40-41 of Petzold’s preview book and you’ll see that the native version isn’t much more complex than the managed one.

As usual you can download the full code of the sample here:

http://cid-9b7b0aefe3514dc5.skydrive.live.com/self.aspx/.Public/SilverlightTapHello1.zip

And remember to pre-order Charles Petzold’s “Programming Windows Phone 7 series”, I bet it will be a best-seller!