Introduction to Windows Mobile 7 Development

Mobiletuts+ will be covering all major mobile platforms – iPhone, Windows, Android and
Blackberry. Today we’ll be taking a look at Windows Phone 7 development. Windows Phone 7
is the latest mobile operating system from Microsoft. It is a clean break from previous Windows
Mobile operating systems, such as WinMo 6.5, and offers .NET developers a chance to get in on
the mobile application explosion that has happened in recent years. This tutorial will introduce
you to the Windows Phone 7 platform, walk you through installing the SDK, and demonstrate
the fundamental code necessary to build a simple application.

About the Platform

Windows Mobile 7 development is done using the .NET framework. The .NET framework is a
software framework created by Microsoft for use in creating Windows applications.
Programmers write applications using one of the several languages supported by the .NET
framework, like C#, and the applications then execute inside of a runtime environment called the
Common Language Runtime. For Windows Phone 7, there are two distinct development
approaches you can take when creating your application.

The first approach is to use Silverlight for Windows Phone. Silverlight was originally envisioned
as a way for developers to create rich internet applications. It has seen a sharp increase in market
adoption in recent years, driven mostly by the fact that Netflix uses Silverlight to stream videos
and NBC used Silverlight for its online broadcast of the Olympic games. A Silverlight
application combines declarative markup (called XAML) to construct the user interface and code
written in a .NET framework language to control an application’s behavior. If you’re developing
a data driven application for Windows Phone 7, you should probably use Silverlight.

Alternatively, you can use the XNA framework to develop your Windows Phone 7 app. XNA is
Microsoft’s game development framework and has been used in recent years to create both
Windows and Xbox 360 applications. If you’re creating a game for Windows Phone 7, you’ll
likely use the XNA framework. The XNA framework is quite powerful, but that power comes
with a considerable learning curve and longer development cycles.
Getting Set Up

Let’s get started by making sure your development environment is set up correctly. You’ll need
to be running Windows Vista or Windows 7 and you need to have a DirectX 10 capable graphics
card installed in your computer. After verifying that you meet these requirements,
visit http://bit.ly/9FXxQC to download the development tools.

Scroll to the bottom of the page and download the file named VM_BOOT\vm_web.exe. Once
the file has downloaded, double click on it to install the complete Windows Phone Developer
Tools package. The package includes:

 Visual Studio 2010 Express for Windows Phone

 Windows Phone Emulator
 Silverlight for Windows Phone
 XNA 4.0 Game Studio

Your computer will likely restart at least once while the tools are being installed. After you’ve
installed the developer tools on your system, you are ready to get started.

Opening Visual Studio

The application you’ll create in this tutorial is a simple one. It displays a simple button that you
can tap. When you tap it, the button rotates around the phone’s interface. We’ll develop this
application using Silverlight for Windows Phone. It should take less than 10 minutes to create.

To begin, open Microsoft Visual Studio 2010 Express for Windows Phone. The easiest way to
find it is to open the Start menu and begin typing “Visual Studio.” The application should show
up in your search result list, similar to the following:
Click on the Visual Studio 2010 item to open up the development environment. If this is your
first time opening the application, it may take a few minutes to start as Visual Studio will
initialize some settings for you.

Creating Your Project

When you open Visual Studio, you’ll be greeted with the application’s start page. There is a lot
of content on this page, including development tips, recent news, and project related actions. It is
sometimes helpful to browse the content here to learn more about the platform, but for now just
click on the “New Project…” link in the left sidebar.

A dialog box will pop up that guides you through creating your new project. Make sure the
“Windows Phone Application” item is selected as your project template. Then, give your project
a name. For this tutorial, I recommend calling your project “Rotating_Button.” Finally, confirm
that the “Create directory for solution” checkbox is selected. This helps to organize your
development efforts. Your settings should match mine:
Click “OK” to create your new project.

Navigating the UI Editor

The template that you’ve selected provides you with a completely working application. To see it
in action, simply press CTRL+F5 to compile the application and launch it in the Windows Phone
Emulator. The emulator launches with a single page containing an application title and a page
title.

That default UI just won’t do for our application, so let’s make some modifications. Visual
Studio should have opened the file MainPage.xaml for editing when you created the project. If
not, double click the file’s name in the Solution Explorer to open it.

You should see a split screen view. On one side of the development environment you can see
how the current file will look when your application is run. This is design mode. On the other
side you have the XAML markup that declares how your interface should look. Any changes you
make on one side will be represented on the other. This is similar to a WYSIWYG HTML editor
like Dreamweaver.
The first thing we want to do is delete everything inside of the layout grid so we can provide our
own markup. You should see a Grid tag named LayoutRoot. Delete everything inside this tag.
You’ll end up with the following code:

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

</Grid>

The design mode view should show a blank screen at this point.

Creating Your Application’s Layout

You now need to add the UI for your application. Our application consists of a single button that
will rotate around a grid. The grid is 2×2, so let’s go ahead and declare that the layout grid
should have two rows and two columns. Change your layout grid markup to the following:

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

<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
 <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</Grid>

Adding the Button

After you’ve defined your layout grid, it is time to create the button that will be tapped by your
users. You want the button to start in the upper left box of the grid, so you’ll declare that it goes
in Row 0 and Column 0.

In XAML, you tell an element to place itself within a grid by declaring the element and then
assigning it the appropriate row and column indices. Inside of your layout grid, add a button
using the following markup:

<Button
Grid.Column="0"
Grid.Row="0"
Content="Tap Me!"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
/>

This markup says the button should position itself in column and row 0, should stretch both
horizontally and vertically within the grid cell it occupies, and that it should have the text “Tap
Me!”

Your application’s UI code should now resemble the following:

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

<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>

<RowDefinition Height="*" />

 <RowDefinition Height="*" />
</Grid.RowDefinitions>

<Button
Grid.Column="0"
Grid.Row="0"
Content="Tap Me!"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
/>
</Grid>

At this point, you can fire up your application and see that your UI is in place. Just like earlier,
press CTRL+F5 to compile and launch your application in the Windows Phone emulator. If
you’ve done everything correctly, you’ll see a button in your emulator nested firmly in the top
left corner.

You can tap the button by clicking it with your mouse, but nothing will happen. We’ll remedy
that next by adding some event handling code.
Adding Event Handling

Go back to Visual Studio and make sure that you’ve got MainPage.xaml open in design/code
mode. You need to add an event handling attribute to the button that you’ve created. Modify the
button declaration, adding a ManipulationStarted attribute. Make sure you allow Visual Studio to
create an event handling function for you. Your button markup should now look like this:

<Button
Grid.Column="0"
Grid.Row="0"
Content="Click Me!"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ManipulationStarted="Button_ManipulationStarted" />

Now, open the code behind file for MainPage.xaml. It is named MainPage.xaml.cs and you can
find it in the Solution Explorer by clicking the arrow next to MainPage.xaml.

Inside of MainPage.xaml.cs you’ll see the event handler that Visual Studio created. Visual
Studio has most likely named it Button_ManipulationStarted and, for the purposes of this
application, that should be just fine. Change your function declaration to the following:

private void Button_ManipulationStarted(object sender, ManipulationStartedEventArgs e)

{
Button b = sender as Button;

int col = Grid.GetColumn(b);

int row = Grid.GetRow(b);

if (col == row)
{
Grid.SetColumn(b, ++col % 2);
 }
else
{
Grid.SetRow(b, ++row % 2);
}
}

The first thing this method does is create a new variable of type Button and assigns it a reference
to the sender variable. This is important because Button derives from UIElement and the next
few operations require a UIElement object as the parameter. Next, the method gets the current
column and row index by using a static method of the Grid class. Finally, the method uses a
simple algorithm to determine where to move the button and change the row or column index as
appropriate. You know that if the row and column indices are the same, then the column needs to
change. If the row and column indices are different then the row needs to changes. In either case
you use another static method of the Grid class to set the button’s row or column. The
appropriate index is determined using some simple math.

At this point, we’re done with the sample application. Press CTRL+F5 to compile and launch
your application and then try clicking your button. You’ll see it move around the grid each time
you click. Try using the emulator’s controls to change the phone’s orientation and you’ll see that
the application adapts with no problems at all.

Learning More

We’ve only just touched on the subject of Windows Phone 7 development in this tutorial. While
you’re now familiar with the basics of creating an application with Silverlight, you’ll likely want
to learn more about XAML, Silverlight, XNA, and Windows Phone 7 development in general.
Luckily, there are already several resources you can turn to:

 Windows Phone Developer Center

 XNA Developer Center
 Charles Petzold’s Windows Phone 7 Book
 Scott Gu’s Mix 10 Windows Phone 7 Demo
 Build your first Windows Phone 7 app

Windows Phone 7 application development, download the tools and begin building a simple

app from start to finish. From discovering the rich toolset, to writing XAML and C#,

Microsoft MVP Michael Crump has you covered.

 Knowledge needed: General C# and basic XAML

 Requires: Visual Studio 2010 Express, Windows 7 Operating System, Windows Phone 7 SDK
 Project Time: Two to four hours depending upon the speed of your internet connection and
computer
 Whether any of us like to admit it or not, mobile is here. It has been and will continue to
be a core skillset that every developer will need to embrace. But how does someone new
to mobile applications get started in mobile software development? Better yet, what if
you have already built mobile applications on one platform and want to see the process of
building an application on another one? This is what this article aims to accomplish. Get
everyone up to speed with developing their first Windows Phone 7 application from start
to finish.
 Today we are going to get started developing applications for the Windows Phone 7
platform. Whether this is your first journey into mobile application development or you
are just curious to see what developing an application on the Windows Phone 7 platform
is like, then this article is for you. We are going to begin with downloading the tools
required to build Windows Phone 7 applications, then dive straight into code and develop
a simple, yet functional application. Let’s go ahead and get started.
 01. Downloading the tools
 Before we can get started developing for the platform, we will need to download and
install several tools. I have listed the required tools below as well as a few extras to help
speed up your development process.
 Windows Phone Software Development Kit (SDK) 7.1(opens in new tab): This is the
only required download and provides you with all of the tools that you need to develop
applications and games for Windows Phone 7 devices. With the download, you can
install Visual Studio 2010 Express (the IDE) which includes application templates for
phone projects as well as productivity enhancements such as an app profiler and an
improved emulator.
 Windows Phone SDK Documentation: (opens in new tab)When building Windows Phone
apps, you will be referencing pages from this site frequently. It contains documentation
for the entire API as well as plenty of sample code.
 Code Samples for Windows Phone:(opens in new tab) Now that you have the tools and
documentation, you should download some sample applications. This page lists all of the
 sample applications that Microsoft has provided. It is broken down by features, so you
can find the page you are looking for quickly and easily.
02. Our first Windows Phone application
Twitter is everywhere. It has become the new “Hello World” project for anyone learning a new
platform and with good reason. It requires some sort of input control, event and error handling,
web request and responses to formatting the data properly in your application. So, in this app we
will build a Twitter application that allows the user to input a Twitter username and retrieve the
tweets in a simple and easy to read format.

03. Construction begins

Author’s note: The screenshots listed below were recorded using Visual Studio 2010 Ultimate. If
you are using Visual Studio 2010 Express for Windows Phone, then you may see some minor
variations in menu commands or windows. However, the base functionality remains the same.
Now that we have downloaded and installed the tools, it is time to begin our first project. Open
Visual Studio and select File -> New Project. Expand the Visual C# templates and
select Silverlight for Windows Phone. Finally, select Windows Phone Application and give it
a name as shown below.
 Now, click OK and you will see this dialog box:

Dialog box asking the user which phone platform to target

We have two options here:

 Windows Phone OS 7.1: This is for Mango applications and includes an additional set of APIs
for working with the Windows Phone. This is the default setting and should be used for new
applications going forward.
 Windows Phone OS 7.0: This is for the original version of the Windows Phone OS and should
only be used in rare circumstances.
Let’s go ahead and select Windows Phone OS 7.1 and select OK.
 Visual Studio 2010 with a new Windows Phone 7 application loaded

Once Visual Studio 2010 loads up, you will see the above screen.

1. The Toolbox contains Windows Phone Controls that you can add to your application. Samples
includes: TextBox, Buttons, Images and more.
2. The Design View displays what your Windows Phone 7 application looks like real-time as you
build the application.
3. The XAML View displays the current XAML that makes up the screen shown in #2.
4. The Solution Explorer Window displays all of the files that make up your application. This
typically includes images and project files.
5. The Properties Window allows you to change certain characteristics of the controls added to the
phone application.
04. Modify the existing app name and page title
The first thing we need to change is the default Application Name and Page Title to our own.
Navigate inside of your MainPage.xaml (Shown in Figure #3, item #3) and modify
the Text properties of each TextBlock as shown below:
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY TWITTER LOOKUP"
Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="enter user" Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
If you look at the designer window now, then you will see the following figure:

The designer window updated as the application title and page title was modified

05. Adjusting layout and adding controls

The next thing that we will want to do is adjust the layout to allow our controls to fill the screen.

Move your mouse onto the designer and left click on the point shown in the grab below. This
will allow us to fill this space with a TextBox and Button.

Adjusting the grid layout in a Windows Phone 7 application

 Once that is in place, we will want to drag and drop a TextBox, Button and ListBox from the
ToolBox onto the designer window as shown here:

So, what do these buttons do?

 The TextBox is a user input control that will allow our user to type a Twitter username.
 The Button will be pressed when the user is ready to lookup tweets from the user entered into
the TextBox.
 The ListBox will contain the users image as well as the tweet from the user.
Let’s go ahead and make the following modifications to the MainPage.xaml file. Look for
the <!--ContentPanel - place additional content here--> tag and replace the code with the
following:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="74*" />
<RowDefinition Height="533*" />
</Grid.RowDefinitions>
<TextBox Grid.RowSpan="2" Height="72" HorizontalAlignment="Left"
Margin="9,8,0,0" Name="txtUserName" VerticalAlignment="Top" Width="294" />
<Button Content="Lookup" Grid.RowSpan="2" Height="72"
HorizontalAlignment="Left" Margin="296,8,0,0" Name="btnLookupUser"
VerticalAlignment="Top" Width="160" Click="btnLookupUser_Click" />
<ListBox Name="lstTwitter" Grid.Row="1" Margin="10, 10, 10, 10">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="110" Margin="-10,-10,-10,-10">
<Image Source="{Binding ImageSource}" Height="73" Width="73"
VerticalAlignment="Top" Margin="10,10,8,10"/>
 <TextBlock Text="{Binding Message}" Margin="10" TextWrapping="Wrap"
FontSize="18" Width="350" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
You will notice a few differences here if you compare this code snippet to what you already had.

 TextBox: We gave it a name and deleted the Text property. This will allow us to refer to the
TextBox when the user presses the button.
 Button: We also gave it a name and changed the Content property to Lookup. We finally added
a Click event handler to fire when the user presses the button.
 ListBox: This control had the most drastic of changes, we added a name and then
a ListBox.ItemTemplate. The ItemTemplate determines the layout of each item in the list. You
then associate DataTemplates with those data elements to define what UI elements are used to
render them.
In this case, we are using a StackPanel which stacks elements in a direction. We horizontally
stack an image and a TextBlock to display the image of the user and his/her tweet.
06. Time to code
Now that we have added XAML to our project, it is time to add some code behind to our page to
make the application function.

Let’s begin by adding a reference to an existing file built by Microsoft to help us parse the XML
returned by the Twitter API we will be using.

Right click on References, and select Add Reference. Scroll down through the list until you get
to System.Xml.Linq and select OK as shown here:
Add references dialog to Windows Phone 7 project

Now that we have the proper library in place, we will add a new class which contains the Twitter
items.

Right-click on your project and select Add, then Class. Let’s give it the name
of TwitterItem and press return. Inside of that class, we will add two properties as shown below
which will contain our ImageSource and Message.
public class TwitterItem
{
public string ImageSource { get; set; }
public string Message { get; set; }
}
The ImageSource will refer to the location of the image on the web.

The Message will contain the user's tweet.

Go ahead and double click on the MainPage.xaml.cs file and add in the following code snippet
just after the MainPage() constructor:
private void btnLookupUser_Click(object sender, RoutedEventArgs e)
{
WebClient twitter = new WebClient();
twitter.DownloadStringCompleted += new
DownloadStringCompletedEventHandler(twitter_ DownloadStringCompleted);
twitter.DownloadStringAsync(new
Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" +
txtUserName.Text));
}

void twitter_DownloadStringCompleted(object sender,

DownloadStringCompletedEventArgs e)
{
if (e.Error != null)
return;

XElement xmlTweets = XElement.Parse(e.Result);

lstTwitter.ItemsSource = from tweet in xmlTweets.Descendants("status")

select new TwitterItem
{
ImageSource = tweet.Element("user").Element("profile_image_url").Value,
Message = tweet.Element("text").Value
};
}
The first event handler is called btnLookupUser_Click and it will run once the user clicks on
the Lookup button. We are using the built-in WebClient class as it provides common methods
for sending data to and receiving data from a resource. In this case, we are passing the current
username into an API provided by Twitter and it will return an XML file of the data requested.
The twitter_DownloadStringCompleted event uses LINQ to parse through the XML returned
by the API and select the Image URL and Message.
In case you are wondering what LINQ is: LINQ(opens in new tab) is built entirely on general
purpose language features, some of which are new to C# 3.0 and Visual Basic 9.0. Each of these
features has utility on its own, yet collectively these features provide an extensible way to define
queries and queryable APIs.
07. Ready for launch
Now that we have our application built, it's time to launch it and see it in action. The first thing
we are going to need to do is make sure the target is set to Windows Phone Emulator as shown
here:
Setting the target type to Windows Phone Emulator
Note: If you had a Windows Phone device and an App Hub membership, then you could change
the drop-down to Windows Phone Device.

Once the application loads, then you will see the following screen:

The Windows Phone application on first launch

Go ahead and select the TextBox and you will see the software keyboard. You can optionally
press page up to use the keyboard on your computer to type. Give it any valid Twitter Username
and select Lookup. The application will return the tweets from the specified user as shown here:

The final application returning tweets from a username provided by a user

Your users could also switch to the Light theme built into the setting menu of Windows Phone 7
and the application’s colours would adjust automatically as shown below.
The Light Theme displaying our application that we built

It's important to note that this sample application should contain additional error handling. I
excluded them from the demo for the sake of learning purposes.

08. Conclusion
In just f a couple of hours, we have downloaded the tools, became familiar with the IDE and
built our first Windows Phone 7 application. Of course, we have barely scratched the surface of
what's possible with Windows Phone 7. I encourage you to read a few books, look at the samples
and see what the community is doing with the platform. I can assure you that you will be
surprised.
References:-

https://code.tutsplus.com/tutorials/introduction-to-windows-mobile-7-development--
mobile-91

https://www.creativebloq.com/mobile/build-your-first-windows-phone-7-app-3122831

https://www.appventurez.com/blog/mobile-app-distribution-platforms

https://www.webiotic.com/list-of-mobile-app-distribution-platforms/

https://www.geeksforgeeks.org/difference-between-windows-and-android/

https://www.geeksforgeeks.org/difference-between-windows-and-ios/

https://www.codemag.com/article/112061/Getting-Started-with-Windows-Phone-7-

Development