Android to Windows Phone–10 Simple Tasks

Date: Wednesday, October 5, 2011, 10:09:24 AM

Tags:

Table of Contents

Starting a New Project

When you start a new Android project in Eclipse you need to select a project type then name the project, application, package and activity that will be used for your application. When you start a new Windows Phone project in Visual Studio Express the process is much the same however there are more preset project templates from which to choose and only a project name must be specified.

The following window is what you'll see when creating a new project within Visual Studio:

clip_image001_thumb

On the left there is a list of template categories from which to choose, here we've selected "Silverlight for Windows Phone." For more information about project templates visit: Project Templates for Windows Phone. If we were creating a graphic intensive game then we could also have chosen the "XNA Game Studio 4.0" category further down the category list which contains some Windows Phone templates designed for that purpose. In the middle of the window we have a choice of nine templates within the selected category, we click on "Windows Phone Application" at the top of the list for a simple phone application. All that remains is to name our project, to accomplish this we simply replace "PhoneApp1" within the Name field with our desired name. The Location and Solution name fields below will update automatically as you type your project name. Click OK and Visual Studio will create the project which can immediately be run in the emulator:

clip_image002_thumb

For a complete introduction of Windows Phone tools for Android developers check this article.

Managing Project Properties

Android applications store project properties within the AndroidManifest.xml file, this includes information such as Package Name, Version Code, Version Name, Application Name and Icon etc. Eclipse allows us to view and edit this information though a user interface or via the raw XML code.

clip_image003_thumb2

clip_image004_thumb5

clip_image005_thumb

The equivalent properties in Visual Studio are accessed by navigating to Project > *Project Name* Properties... (where *Project Name* is the name of your project).

clip_image006_thumb[1]

The "Assembly Information…" button brings up additional fields:

clip_image007_thumb

One thing to note is that Visual Studio, unlike Android/Eclipse, does not distinguish between Version Name and Version Code. While the Android Marketplace uses the version name and code you provide in the manifest to determine if there are updates a user needs to download the Windows Phone Marketplace uses a version number supplied upon application submission to the marketplace. The version information you enter within Visual Studio has no bearing on Marketplace activity.

Adding Controls & Managing Layouts

Within Eclipse with ADT (Android Development Tools) you can navigate to the /res/layout/ folder in your project's Package Explorer and find your layout XML files, these files represent a layout (usually containing controls of some kind) that can be applied to the current activity within the application and displayed to the user. Eclipse allows for adding controls by either dragging and dropping from the Palette or entering the XML view and adding them manually.

Adding controls within Visual Studio is performed in much the same manner. Windows Phone XAML files which each represent a page that can be displayed to the user are similar to the Android layout files but vary slightly in the manner in which they are called/displayed. That being said the controls themselves are added in much the same fashion. Rather than having the graphical and XML views separated by tabs as in Eclipse the Visual Studio default is to display them side by side so that changes made via either method can be seen immediately on the other:

clip_image008_thumb[1]

You can either drag and drop controls from Visual Studio's Toolbox or add controls manually through the XML view. Unlike Android the Windows Phone pages do not rely upon different layout methods for organizing controls, Windows Phone controls are placed in a position relative to their parent container without having to worry about the location of other controls.

The below is the Toolbox used to drag and drop control onto your Windows Phone page:

clip_image009_thumb[1]

If you'd rather add the controls programmatically then the below is an example of the code needed to add a button to a Windows Phone page through the XML view. Keep in mind that if you drag and drop a control this code will be automatically generated for you.

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Button Content="Click Me!" Height="72" HorizontalAlignment="Left" Margin="10,10,0,0" Name="btnTest" VerticalAlignment="Top" Width="160" />
</Grid>

The grid "ContentPanel" is automatically generated during the project creation so all we need to do is add the middle line describing the button control itself. The majority of the properties specified within the line of code are easy to understand:

  • Content is the displayed text on the button
  • Height is the height of the button in pixels
  • HorizontalAlignment indicates the horizontal placement of the button in relation to the ContentPanel grid
  • Name is used to reference the button within the code of the project
  • VerticalAlignment is similar to HorizontalAlignment but manages the vertical placement of the button in relation to the ContentPanel grid
  • Width is the width of the button in pixels
  • Margin specifies the position of the button in relation to its parent control (ContentPanel) and the settings of both HorizontalAlignment and VerticalAlignment using the format "<Left>,<Top>,<Right>,<Bottom>". For example, if the button were set to a Left HorizontalAlignment and a Top VerticalAlignment as above then placing the button in the top left corner of its parent would require a "0,0,0,0" but to move it we place a value between this zero position and the adjacent sides of the control. Therefore if we want the button 20 pixels to the right and 50 pixels down we'd change the value to "20,50,0,0" because the Left and Top sides of the button are facing the zero position.

Android development within Eclipse requires that once a project is created you create your screen layouts from scratch by selecting an appropriate layout for each screen and populating it with controls. When adding a new page within Visual Studio there are templates available for varying types of pages in Windows Phone and making use of these is the easiest way to incorporate the different available styles of user interaction.

Configuring Control Properties

Eclipse with ADT allows a developer to alter the properties of controls by right-clicking on the control in the layout graphical view and selecting the property to be altered or doing so manually within the XML file itself:

clip_image011_thumb[1]

clip_image012_thumb

In this respect Visual Studio isn't much different, by default there is a Property window displayed in the lower right corner of the screen when a control is selected. This window contains all the editable properties of the selected control and they can easily be changed:

clip_image013_thumb[1]

The property window also contains an events tab which can be used to view all the event methods available for the selected control.

The other way to alter control properties is directly through the XML code:

clip_image014_thumb

Changing any of the values here will be reflected within the property window and on the graphical view of the associated page.

Adding a New Page

Within Eclipse with ADT the developer is required to create a layout for the page they wish to display and then either set the content of the current activity to this layout or create a new activity with the layout. Windows Phone treats each page as its own entity, each with a layout unique to that page alone. We can add a page to a project by right-clicking on the project name within the solution explorer in Visual Studio and selecting Add > New Item… as shown here:

clip_image015_thumb[1]

The dialog window that follows displays a list of items that you can add to your project including a few different types of pages:

clip_image016_thumb[1]

Once you've decided which type of page you want to include in your project select it and click the Add button. A new .xaml file will be added to your project and you can begin working with it.

For a more in-depth tutorial on navigating to new pages and passing variables between them visit: Android to Windows Phone - Adding a New Page

Listening for Button Clicks

Android listens for button clicks through the use of the OnClickListener class which when instantiated can be linked to a button using its setOnClickListener method. In Visual Studio for Windows Phone there's no need to manually create this listener. When a button is added to a page we can double-click it to have Visual Studio generate a click event method. For example, if we have a button within our MainPage.xaml file named btnTest we can double-click it and the following method will be generated for us:

private void btnTest_Click(object sender, RoutedEventArgs e)
{

}

The code we wish to execute when the button is pressed can simply be entered between these curly braces.

At the same time this generated code is added to the Mainpage.xaml.cs file there was also an addition made to MainPage.xaml in the form of a reference to this click event:

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Button Content="Click Me!" Height="72" HorizontalAlignment="Left" Margin="149,201,0,0" Name="btnTest" VerticalAlignment="Top" Width="160" Click="btnTest_Click" />
</Grid>

The final property on the button line was automatically generated and added when we double-clicked the button. This property (Click="btnTest_Click") simply identifies the method that should be activated when the button is clicked. Although these two additions were generated and inserted by Visual Studio for us it's entirely possible to alter both files manually with this code to achieve the same result. This same idea applies to all events supported by any control. You can view and manage events from the event tab of the Properties Window:

clip_image019_thumb[1]

Adding External Libraries

Within Eclipse you can add external libraries (.jar files) to your project by right-clicking your project in the package explorer and opening its properties. Within Visual Studio the process is similar and you can start by right-clicking on your project's name in the solution explorer. Select Add Reference from the context menu and a dialog window will appear:

clip_image020_thumb[1]

Select the Browse tab and find the external library you wish to add to your project. In our case the library is located in the Test folder and is named cLib.dll. We select the dll file and click ok. Once done an entry is added to the reference list within our project in the solution explorer:

clip_image021_thumb[1]

As you can see the first entry within the References folder within our project is now "cLib."We then make a reference to this library's namespace within each file where it's needed:

//...
using Microsoft.Phone.Controls;
using cLib;

namespace PhoneApp1
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void btnTest_Click(object sender, RoutedEventArgs e)
        {
            cLib.ExternalLibraryClass myClass = new ExternalLibraryClass();
            txbTest.Text = myClass.externalString;
        }
    }
}

As you can see we've made the reference above by use of the "using" keyword and the name of our library. The remaining code shows a simple program that instantiates a class within this external library, gets a value from within the external class and sets a textblock control on our page to equal its value when a button is pressed.

Displaying Alerts within an Application

Android developers can make use of Toast, Status Bar and Dialog notifications that can be displayed from within any developed application. Windows Phone has similar notification options but apply in different contexts like scheduled events or push notifications. Notifying the user of an event within your application on Windows Phone requires the use of a Message Box.

The Message Box is simple to implement, if we wanted to display a message to the user when a button was click then we need only add a single line of code to the button's click event method:

private void btnTest_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("This is an alert.");
}

MessageBox.Show(String) will display the text within the quotes to the user along with an ok button which they would click to dismiss the message. During the display of this alert focus is taken away from the application that triggered the alert.

For a more in-depth description of alerts along with additional options for customizing them please visit: Android to Windows Phone - Displaying Alerts

Hiding the System Tray

Android provides a method of hiding the "status bar" which sits at the top of the phone's screen and displays battery information etc. This is accomplished by setting the FULLSCREEN flag of the window. Windows Phone provides a similar method for its system tray which displays the same class of information.

Within the generated XAML of the page on which you wish to hide the system tray there is a property called "shell:SystemTray.IsVisible" which by default is set to True. If we set its value to False then the system tray will no longer show when that particular page is active.

<phone:PhoneApplicationPage
    shell:SystemTray.IsVisible="False">

Alternatively the same can be achieved through code. Select the PhoneApplicationPage object and you'll be able to see its properties in the Properties window. Select the Events tab and double-click on the "Loaded" event; this will generate an event method that will be triggered when the page loads.

Add a reference to the Microsoft.Phone.Shell namespace:

using Microsoft.Phone.Shell;

Within the generated loaded event method set the IsVisible property of the system tray to false:

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
    SystemTray.IsVisible = false;
}

Interacting with the Windows Phone Emulator

Just like the Android Emulator the Windows Phone Emulator has keyboard shortcuts designed for easy interaction. The following is a list of useful keyboard shortcuts you can use while testing your application within the emulator:

Keyboard KeyFunction
F1

Equivalent to pressing the hardware BACK button.

F2

Equivalent to pressing the hardware START button.

F3

Equivalent to pressing the hardware SEARCH button.

F6

Camera key (half press). Not supported in all environments.

F7

Camera key (full press). Not supported in all environments.

F9

Volume Up

F10

Volume Down

PAGE UP

Enable Emulator Keyboard

PAGE DOWN

Disable Emulator Keyboard

Additionally the Windows Phone Emulator provides some very useful and interactive methods of providing mock data to your applications. On the Windows Phone Emulator control bar there is a button that will open the Additional Tools dialog window which contains screens for managing both the location and accelerometer data being sent to the emulator while your application is running:

Capture1

The accelerometer view allows you, as a developer, to test your application's reaction to 3-dimensional movement without the need for a physical device. As shown below we can drag the pink circle within the accelerometer view to have the emulator simulate any movement direction we desire:

Capture.2PNG

The location tab allows a developer to provide their application with mock location data as shown here:

Capture3

The Screenshot tab allows you to capture the current state of the emulator's screen and save it to a file. This can be useful for internal documentation or to provide screenshots for your app in the Marketplace.

Capture4

 
blog comments powered by Disqus