Getting Started with Windows Phone 8 Programming


Today we will create a very basic Windows Phone 8 application. The whole purpose of this article is to identify all the tools we need, as well as creating a small app just to show you you the ropes. Let’s get started.

By now, everyone should know what a Smartphone is, and how desperate Microsoft is to get into the mobile platform market. At this stage Android devices are the leaders in Smartphone technology, and I would go as far as to say that Samsung is leaving everyone behind. Now, let’s forget about Android and Blackberries for a while and see how to get into Windows Phone 8 development.



The tools we need in order to develop for Windows Phone 8 differs greatly with the likes of Android and yes, even Blackberry. With Android and Blackberry all we need is Java Eclipse, and the appropriate SDK. With each SDK the simulators as well as tools (Java Eclipse), APIs etc., are included. This means that you only have to download one file, and you can get started. Logic would tell you that it would be the same with Windows Phone 8. The answer is: Yes, and No.

Sadly, as mentioned above, getting started with Windows Phone 8 programming is not easy. Why? Beats me, but the main problem people are facing are the limitations that are set up. If you have a look at the following list, you might also frown a bit on it, and quickly scramble to see how capable your machine is in order to program Windows Phone 8 programs.

The following is a list of what is needed before starting Windows Phone 8 development:

  •  64bit host operating system.
  • At least 8GB of RAM for the host machine so that you can assign 4GB to the Virtual Machine
  • 30-40GB of free space.

The free space is not really a problem, usually. The 64 bit operating system, hmm, yeah, I suppose I can understand that if I try really hard; but the fact that I will need a VMware machine bothers me a bit. The problem is: If you are running a machine with an AMD processor, you will not be able to load the Windows Phone 8 emulator, but, you can still program with the use of Visual Studio 2012 Ultimate or VS Express for Windows Phone 8 though.

This puts a lot of people off, even me. Why? Well, this means if I have an AMD machine, I either need to buy an INTEL processor, or even a new PC (depending on your resources), just to be able to load Hyper-V on my machine to use the Windows Phone 8 emulator.


You will also need

  • Windows 8
  • Windows Phone 8 SDK
  • Coreinfo
  • VMWare Workstation 9 or higher

But, only the first two items really make sense, you say. Me too.

Windows Phone 8 SDK

You can obtain the Windows Phone 8 SDK here. This download can become 1.6GB depending on your selected options. The SDK does include the emulator and VS Express for Windows Phone 8.



Windows Phone XAML and Direct3D App

A project for creating a Windows Phone managed application with native components. This project type is new in Windows Phone SDK 8.0.

Windows Phone XAML and XNA App

A project for creating a Windows Phone XAML application that’s capable of rendering graphics using the XNA Framework. This project template is available only for projects that target Windows Phone OS 7.1. You cannot create projects that target Windows Phone OS 8.0 for this project type.

Windows Phone HTML5 App

A project for creating a Windows Phone application that uses primarily HTML content.

Windows Phone Audio Playback Agent

A class library project for creating a background agent to play audio. You can use this class library in other Windows Phone apps.

Windows Phone Audio Streaming Agent

A class library project for creating a background agent to stream audio. You can use this class library in other Windows Phone apps.

Windows Phone Scheduled Task Agent

A class library project for creating a background agent to perform a periodic or resource-intensive task. You can use this class library in other Windows Phone apps.


Our Project – Windows Phone Panorama App

I have chosen this template as it is the nicest (in my opinion) to play around with. Our project is very basic and will contain very little code, if any, as this article’s purpose is just to get you started. Let us have a look at the design.


Right, you know which project template to choose, so give it a proper name. I gave mine a name of Family. This little app will have photo’s of my wife, daughter, two dogs and myself. Think of a scrapbook, but just on your phone.

Once the project has been created, you will be greeted with the design window. Be careful here as the design window (specific for this type of app) is a bit difficult to know where you are. The default Panorama screen will be divided into three sections (screens). The first screen will be the main screen, whereas the other two screens (functions as one) will be a bit hidden from view. You will have to click on the desired screen’s outline in order to manipulate it. I have designed my three screens as follows:

Screen 1
Figure 2 – Screen 1

Screen 2
Figure 3 – Screen 2

Screen 3
Figure 4 – Screen 3


You could go through the painstaking process of manually adding all your photos, or you could just simply add them in manually inside the XAML code window. The code that produces the above look is as follows:

    d_DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x_Name="LayoutRoot" Background="Transparent">
            <RowDefinition Height="129*"/>
            <RowDefinition Height="71*"/>

            To localize the displayed strings copy their values to appropriately named
            keys in the app's neutral language resource file (AppResources.resx) then
            replace the hard-coded text value between the attributes' quotation marks
            with the binding clause whose path points to that string name.

            For example:

                Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"

            This binding points to the template's string resource named "ApplicationTitle".

            Adding supported languages in the Project Properties tab will create a
            new resx file per language that can carry the translated values of your
            UI strings. The binding in these examples will cause the value of the
            attributes to be drawn from the .resx file that matches the
            CurrentUICulture of the app at run time.

      <!--Panorama control-->
        <phone:Panorama Title="Family and Friends" Grid.RowSpan="2">
                <ImageBrush ImageSource="/Family;component/Assets/PanoramaBackground.png"/>

            <!--Panorama item one-->
            <phone:PanoramaItem Header="Close Family" Background="Black">
                <!--Single line list with text wrapping-->
                <phone:LongListSelector Margin="0,0,-22,0" ItemsSource="{Binding Items}" Foreground="#FF151414">
                            <StackPanel Margin="0,-6,0,12">
                                <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Foreground="#FF131313"/>

            <!--Panorama item two-->
                <!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
                <phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding Items}">
                            <Grid Margin="12,0,0,38">
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                <TextBlock Text="Details"
                                           Style="{StaticResource PanoramaItemHeaderTextStyle}"
                                           Grid.Row="0" Foreground="#FF151313"/>
                            <StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
                                <!--Replace rectangle with image-->
                                <Image Source="/Family;component/Assets/IMG_0010.JPG" Width="99" Height="99" />

                                <StackPanel Width="311" Margin="8,-7,0,0">
                                    <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" Foreground="#FF171515" />
                                    <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />

            <!--Panorama item three-->
            <phone:PanoramaItem Header="pics" Orientation="Horizontal" Background="Black">
                <!--Double wide Panorama with large image placeholders-->
                    <StackPanel Margin="0,4,16,0" Orientation="Vertical" VerticalAlignment="Top">
                        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                            <Image Source="/Family;component/Assets/IMG_0078.JPG" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Image Source="/Family;component/Assets/IMG_0097.JPG" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Image Source="/Family;component/Assets/20130330_114659.jpg" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Image Source="/Family;component/Assets/20130621_165858.jpg" Height="173" Width="173" Margin="12,0,0,0"/>



        <!--Uncomment to see an alignment grid to help ensure your controls are
            aligned on common boundaries.  The image has a top margin of -32px to
            account for the System Tray. Set this to 0 (or remove the margin altogether)
            if the System Tray is hidden.

            Before shipping remove this XAML and the image itself.-->
        <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0" Grid.Row="0" IsHitTestVisible="False" />-->


You can now add any code in your VB file to make it more interactive. I will leave that part up to you.


I hope that you have learned how to get started with Windows Phone 8 programming and wish you much joy in your future endeavours. Until next time, this is me signing off.

Hannes DuPreez
Ockert J. du Preez is a passionate coder and always willing to learn. He has written hundreds of developer articles over the years detailing his programming quests and adventures. He has written the following books: Visual Studio 2019 In-Depth (BpB Publications) JavaScript for Gurus (BpB Publications) He was the Technical Editor for Professional C++, 5th Edition (Wiley) He was a Microsoft Most Valuable Professional for .NET (2008–2017).

More by Author

Must Read