Android to Windows 8 Part 6: Creating a Second Page

March 26, 2013

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>

ANDROID HINT

The Click attribute is similar to the android:onClick attribute of the Android <Button> element.

 

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

private
void sendButton_Click(object sender, RoutedEventArgs e)

{

 

}

VISUAL STUDIO TIP

You can open a code-behind file for a file you’re working with in design view by pressing F7.

 

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);

}

ANDROID HINT

In Android you would create an Intent and call the startActivity method to navigate to the second page with code similar to the following:

 

public void sendButton_Click(View view) {

Intent intent = new Intent(this, SecondPageActivity.class);

startActivity(intent);

}

 

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