Creating A First Windows 8 App : Hello World. Step 3 : Modify your start page

What's in the files?

When you create a new project that uses the Blank App template, Visual Studio creates an app that contains a handful of files. To view and edit the files, double-click the file in the Solution Explorer. You can expand a XAML file just like a folder to see its associated code file. By default, XAML files open in a split view that shows both the design surface and the XAML editor.

In this tutorial, we work with just a few of the files listed previously: App.xaml, App.xaml.cs/.vb, MainPage.xaml, and MainPage.xaml.cs/.vb.

App.xaml is where you declare resources that are used across the app. This file contains a ResourceDictionary that has a reference to the StandardStyles.xaml ResourceDictionary located in the Common folder. StandardStyles.xaml provides a set of default styles that gives your app the Windows 8 look and feel.

 

App.xaml.cs/.vb is the code-behind file for App.xaml. Code-behind is the code that is joined with the XAML page's partial class. Together, the XAML and code-behind make a complete class. App.xaml.cs/.vb is the entry point for your app. Like all code-behind pages, it contains a constructor that calls the InitializeComponent method. You don't write the InitializeComponent method. It's generated by Visual Studio, and its main purpose is to initialize the elements declared in the XAML file. App.xaml.cs/.vb also contains methods to handle activation and suspension of the app.

In the MainPage.xaml file you define the UI for your app. You can add elements directly using XAML markup, or you can use the design tools provided by Visual Studio. The Basic Page template uses a LayoutAwarePage. This class extends the base Page class and provides methods for navigation, state management, and view management. The Basic Page also includes some simple content, like a back button and page title.

MainPage.xaml.cs/.vb is the code-behind page for MainPage.xaml. Here you add your app logic and event handlers. The Basic Page template includes 2 methods to where you can save and load the page state.

 public sealed partial class MainPage : HelloWorld.Common.LayoutAwarePage
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// Populates the page with 
        /// provided when recreating 
        /// </summary>
        /// <param name="navigationParameter">
        /// <see cref="Frame.Navigate(Type, Object)"/> 

         /// </param>
        /// <param name="pageState">
        /// session.  
        protected override void LoadState(Object navigationParameter, 

                  Dictionary<String, Object> pageState)
        {
        }

        /// <summary>
        /// Preserves state associated with this page in case the 
        /// page is discarded from the navigation cache.  
        /// requirements of <see cref="SuspensionManager.SessionState"/>.
        /// </summary>
        /// <param name="pageState">An empty dictionary to be populated 
      protected override void SaveState(Dictionary<String, Object> 

                      pageState)
      {
      }

Modify the start page

Let's add some content to your MainPage.xaml file. 

To modify the start page

1. Double-click MainPage.xaml in Solution Explorer to open it in the XAML editor.
2. To change the page title, select the AppName resource near the top of the page.
   Tip  Press Ctrl+F to open the Quick Find box, and search for "AppName" if you have trouble finding it.
3. Under Common in the Properties panel, click the property marker for the Text property. The property menu opens.
   Note  The property marker is the small box symbol to the right of each property value. The Text property marker is green to indicate that it's set to a resource.
4. In the property menu, select Edit Resource. The Edit Resource dialog opens.
5. In the Edit Resource dialog, change the value from "My Application" to "Hello, world!".
6. Click OK.Change the value from "My Application" to "Hello, world!".The XAML is updated like this.
   

       <x:String x:Key="AppName">Hello, world!</x:String>

   7. In the root Grid, immediately before the <VisualStateManager.VisualStateGroups>  tag,    add a StackPanel with a TextBlock that asks the user's name, a TextBox  element to accept the user's name, a Button, and another TextBlock element. 

        <StackPanel Grid.Row="1" Margin="120,30,0,0">
          <TextBlock Text="What's your name?"/>
          <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
           <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
           <Button Content="Say &quot;Hello&quot;"/>
          </StackPanel>
          <TextBlock x:Name="greetingOutput"/>
        </StackPanel> 

8. Press F5 to run the app. It looks like this.