Getting Started with Windows Phone 8 Programming

Introduction

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.

Tools

Hardware

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.

Software

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.

Coreinfo

Coreinfo is, as quoted from its website:

"a command-line utility that shows you the mapping between logical processors and the physical processor, NUMA node, and socket on which they reside, as well as the cache’s assigned to each logical processor. It uses the Windows’ GetLogicalProcessorInformation function to obtain this information and prints it to the screen, representing a mapping to a logical processor with an asterisk e.g. ‘*’. Coreinfo is useful for gaining insight into the processor and cache topology of your system."

Before downloading VMWare Workstation, it is best to install Coreinfo first and run it to ensure your PC is Hyper-V capable by following the steps outlined here.

VMWare Workstation

If all goes well with Coreinfo, you can download and install VMWare. You can also look at this very comprehensive article on how to set it up.

Windows Phone 8 Project Templates

Figure 1 shows all the available Project templates for Windows Phone 8 projects.

Templates
Figure 1 - Templates

Windows Phone App

A project for creating a Windows Phone application. This template creates a simple one-page project that can be used as a starting point for any app.

Windows Phone Databound App

A project for creating a Windows Phone application that uses list and navigation controls with a basic Model-View-ViewModel architecture.

Windows Phone Class Library

A project for creating a Windows Phone class library. This template creates a project that has no user interface elements. You can use this class library in other Windows Phone apps.

Windows Phone Panorama App

A project for creating a Windows Phone application that uses the Panorama control. The Panorama control is a long horizontal canvas that extends beyond a single screen.

Windows Phone Pivot App

A project for creating a Windows Phone application that uses the Pivot control. The Pivot control lets you switch between views or pages within the app.

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.

From MSDN

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.

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

Code

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:

<phone:PhoneApplicationPage
    x:Class="Family.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">

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

        <!-- LOCALIZATION NOTE:
            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">
            <phone:Panorama.Background>
                <ImageBrush ImageSource="/Family;component/Assets/PanoramaBackground.png"/>
            </phone:Panorama.Background>

            <!--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">
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,-6,0,12">
                                <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Foreground="#FF131313"/>
                            </StackPanel>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </phone:PanoramaItem>

            <!--Panorama item two-->
            <phone:PanoramaItem>
                <!--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}">
                    <phone:LongListSelector.ListHeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="12,0,0,38">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="Details"
                                           Style="{StaticResource PanoramaItemHeaderTextStyle}"
                                           Grid.Row="0" Foreground="#FF151313"/>
                            </Grid>
                        </DataTemplate>
                    </phone:LongListSelector.ListHeaderTemplate>
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <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}" />
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </phone:PanoramaItem>

            <!--Panorama item three-->
            <phone:PanoramaItem Header="pics" Orientation="Horizontal" Background="Black">
                <!--Double wide Panorama with large image placeholders-->
                <Grid>
                    <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"/>
                            
                        </StackPanel>
                     
                    </StackPanel>
                </Grid>
            </phone:PanoramaItem>
        </phone:Panorama>

        <!--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" />-->

    </Grid>
</phone:PhoneApplicationPage>

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

Conclusion

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.



Related Articles

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: November 20, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT Are you wanting to target two or more platforms such as iOS, Android, and/or Windows? You are not alone. 90% of enterprises today are targeting two or more platforms. Attend this eSeminar to discover how mobile app developers can rely on one IDE to create applications across platforms and approaches (web, native, and/or hybrid), saving time, money, and effort and introducing apps to market faster. You'll learn the trade-offs for gaining long …

  • Live Event Date: October 29, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Are you interested in building a cognitive application using the power of IBM Watson? Need a platform that provides speed and ease for rapidly deploying this application? Join Chris Madison, Watson Solution Architect, as he walks through the process of building a Watson powered application on IBM Bluemix. Chris will talk about the new Watson Services just released on IBM bluemix, but more importantly he will do a step by step cognitive …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds