Android to Windows 8 Part 5: Building a Simple User Interface

Over the past several weeks I've been working on some content I'm excited to finally share with you through a series of blog posts. This series will introduce you to Windows 8 development from an Android developer's perspective. Through the course of the series you'll create your first app. It won't be anything pretty, but you'll learn the ins and outs of the development environment, how to create a simple user interface, and how to perform navigation. Along the way you'll see some Android Hints that will help make it easier for you to transition your existing skills to the Windows platform. You'll also see some Visual Studio Tips to make you more productive in your development environment. Good luck!

A Windows Store application is simply a collection of pages. A page is the interface seen by the end user.

Each page is designed for the end user to interact with the application. A page is composed of layout controls and various widgets. Only one page can be seen by the end user at a time.

To better familiarize yourself with the user interface components of a Windows Store application the following table maps Android widgets to their Windows Store counterparts:

This is by no means an extensive list. As with many development technologies there are a number of ways to perform the same task. For example, instead of using a ListView to display a vertical list in a Windows Store app I could simply use a StackPanel and set its orientation property accordingly. I could also using a ProgressRing instead of a ProgressBar in a Windows Store app to display changes in progress.

In this lesson you'll learn how to create a simple interface for your Windows Store application.

Add a Text Field

For your UI you'll want a label to tell the user what to do, a field where users can input text, and a button. You'll start by adding the text field.

Open the MainPage.xaml file in the root directory of your project.

Add a <StackPanel> element to the <Grid> element that was added to the page when it was created. Your markup should look like this:

<StackPanel x:Name="theStackPanel"

Orientation="Vertical">

</StackPanel>

Now add a <TextBox> element inside of the <StackPanel> element you just created. Be sure to provide a x:Name attribute for it. You should end up with something like this:

<StackPanel x:Name="theStackPanel"

Orientation="Vertical">

<TextBox x:Name="theMessage" />

</StackPanel>

Add String Resources

Next you'll want to add a label to your page to instruct the user on what to do. You might be tempted to add a <TextBlock> element and sent its Text attribute to the text you want displayed. While this will work, it goes against best practices for localization. Before you add the label to the page, you need to add a resource file to your project to store the text you want to display in the UI.

To add a resource file, start by right-clicking the Project in Solution Explorer, click Add, then click New Folder. This will add a new directory to the project. Name the directory Strings.

Add a subdirectory to the Strings directory entitled en-US.

Right-click the en-US directory, click Add, and click New Item. This will open the Add New Item dialog.

In the tree on the left-hand side of the dialog under the Visual C# node, select General. Then select Resource File (.resw) from the options presented.

Leave the name of the file as Resources.resw and click Add.

You should now see the Resources.resw file under the en-US directory in Solution Explorer.

If the Resources.resw file is not already open double click it.

Add the message you want to display to the user to Resources.resw. You should end up with something that looks like this:

The name of the string resource is important. As you see in the image above it's in two parts. The first part specifies the name of the visual element the resources will be used for (in this case messageLabel). The second part specifies the name of the property of the visual element you want to use the resource for (in this case the text property).

Add a Label

With the Resource file in place you're now ready to add the label to your page.

Open MainPage.xaml if not's not already open and add a <TextBlock> element above the <TextBox> element in the <StackPanel>. In order to leverage the appropriate string resource be sure to set the x:Uid element of the label to the corresponding to the resource name. You should end up with something like the following:

<StackPanel x:Name="theStackPanel"

Orientation="Vertical">

<TextBlock x:Uid="messageLabel" x:Name="messageLabel" Text="" />

<TextBox x:Name="theMessage" />

</StackPanel>

Add a Button

The last thing you'll need to do as part of this lesson is to add a <Button> element to the page so you can send the message the user enters to a second page.

Before you add the <Button> be sure to add a string resource for its Content property in the Resources.resw file.

Now add a <Button> element under the <TextBox> element in MainPage.xaml, being sure to specify the appropriate x:Uid attribute for localization.

<StackPanel x:Name="theStackPanel"

Orientation="Vertical">

<TextBlock x:Uid="messageLabel" x:Name="messageLabel" Text="" />

<TextBox x:Name="theMessage" />

<Button x:Uid="sendButton" x:Name="sendButton" Content="" />

</StackPanel>

Congratulations! You just created your first Windows Store UI. It might not be pretty, but it works. You can run your app now (press F5 or F6 to see the results).

Previous Posts in this Series

1. Setting up the Development Environment
2. Creating Your First Windows Store Project
3. Exploring the Windows Store Project
4. Running the Windows Store Application

Additional Resources

• Resources for Android developers (Windows Store apps)
• API mappings from Android to Windows
• Getting started
• Designing UX for apps
• Developing apps
• Packaging your Windows Store apps using Visual Studio 2012
• Selling apps
• Concepts and architecture
• API reference
• Language reference
• End-to-end apps