Over the past several weeks I’ve been posting about how to build your first Windows Store application if you’re an Android developer. I want to wrap this series by providing some useful links.

All 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
5. Building a Simple User Interface
6. Creating a Second Page
7. Adding “Back” Navigation

If you would prefer a pdf of all seven posts you can get it here: http://aka.ms/AndroidToWindows8

Additional Windows 8 Development 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

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!

As referred to in lesson four, there is no hardware “Back” button for Windows 8 devices. However, developers can add navigation to their apps using “Back” semantics. In this lesson you’ll learn how to navigate back to MainPage.xaml from SecondPage.xaml.

Start by opening MainPage.xaml and wrapping the <TextBlock> element in a vertical <StackPanel>. You should end up with something like this:

<StackPanel Orientation=”Vertical”>

<TextBlock x:Name=”messageFromUser” />

</StackPanel>

Now add a <Button> element under your <TextBlock> element, specifying the x:Name, Content, and Click attributes like so:

<StackPanel Orientation=”Vertical”>

<TextBlock x:Name=”messageFromUser” />

<Button x:Name=”goBack”

Content=”Go Back”

Click=”goBack_Click” />

</StackPanel>

Note: For the sake of this lesson a string resource was not added to Resources.resw for the message displayed in the <Button> element.

Open the code-behind file for SecondPage.xaml (press F7), and add the following method:

private
void goBack_Click(object sender, RoutedEventArgs e)

{

//Go back to MainPage.xaml if able to

if (this.Frame.CanGoBack)

this.Frame.GoBack();

}

That’s all there is to it. Run your app (F5) and see what happens.

Congratulations! You just built your first Windows Store application. To learn more about building Windows Store apps, continue to follow this series. The next installment is Working with Data.

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
5. Building a Simple User Interface
6. Creating a Second Page

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

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!

In the previous lesson you created a simple UI that accepts text from a user. In this lesson you’ll create a second page in your application to display the user’s input.

Create the Second Page

Right-click the project in Solution Explorer, click Add, and click New Item.

In the Add New Item dialog, select Windows Store under Visual C#.

Select the Blank Page template, give the page a name of SecondPage.xaml, and click Add.

You should now see SecondPage.xaml in Solution Explorer.

If SecondPage.xaml is not open, double-click it.

Add a <TextBlock> element to the <Grid> element. Be sure to specify its x:Name attribute;

<Grid Background=”{StaticResource ApplicationPageBackgroundThemeBrush}”>

<TextBlock x:Name=”messageFromUser” />

</Grid>

Respond to the Send Button

You now need to get the message from the first page to the second page. Start by opening up MaingPage.xaml.

To respond to the <Button> element’s Click attribute to the element

<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=”"

Click=”sendButton_Click” />

</StackPanel>

Open the code-behind file for MainPage.xaml (MainPage.xaml.cs) and add the following method:

private
void sendButton_Click(object sender, RoutedEventArgs e)

{

}

Now you need to do a couple of things. First you need to get the text the user entered, then you need to navigate to the second page. This can be accomplished by adding the following to the sendButton_Click method:

private void sendButton_Click(object sender, RoutedEventArgs e)

{

//Get the message from the <TextBox> element

var message = this.theMessage.Text;

//If the message is empty use a default

if (string.IsNullOrEmpty(message))

message = “Hello World!”;

//Navigate to SecondPage.xaml

this.Frame.Navigate(typeof(SecondPage), message);

}

If you run your app now (F5) and press the button, you’ll notice that you go to the second page. We’ll work on displaying the message in the last part of this lesson.

Display the Message

Now that you’re able to navigate to SecondPage.xaml from MainPage.xaml you need to display the message the user entered.

Open SecondPage.xaml.cs (the code-behind file for SecondPage.xaml).

Locate the OnNavigatedTo method and add the following code:

protected override void OnNavigatedTo(NavigationEventArgs e)

{

//Get the message passed in from MainPage.xaml

var message = (string)e.Parameter;

//Display the message in the <TextBlock> element

this.messageFromUser.Text = message;

}

This simply retrieves the message from the first page and displays it on the second page.

Run the app (F5) 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
5. Building a Simple User Interface

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

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