C # + introduction to Metro application development in XAML (1)

Knowledge point:

1. Familiar with the development environment

2. Develop a simple Hello Metro application

 

I. Preparations before development

1. Install Windows 8
2. Install the Visual Studio 2012 Development Environment (this article uses Microsoft Visual Studio Express 2012 RC for Windows 8, which can be downloaded and used for free)

Ii. Start writing the Hello Metro application

　　1. Create a project

Open Visual Studio, select File> new project, select the Visual C # template in the new dialog box, and create an empty application Blank App (XAML). You can select the name as needed, click OK to create the project.

 

Figure 1 create a project dialog box

　　2. Introduction to major project documents

View the created Project and the directory structure shown in figure 2. xaml, App. xaml. cs, MainPage. xaml, MainPage. xaml. cs, Common/StandardStyle. xaml, Package. appxmanifest and other core files are briefly introduced.

 

Figure 2 Hello Metro Project Structure Diagram

App. xaml and App. xaml. cs

App. xam is mainly associated with the resources defined by StandardStyles. xaml in the Common folder, as shown in the highlighted part of Code 1.

<Application    x:Class="HelloMetro.App"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:HelloMetro">    <Application.Resources>        <ResourceDictionary>            <ResourceDictionary.MergedDictionaries>                <ResourceDictionary Source="Common/StandardStyles.xaml"/>            </ResourceDictionary.MergedDictionaries>        </ResourceDictionary>    </Application.Resources></Application>

Code 1 App. xaml File

App. xaml. cs is the entry to the Metro application and defines the life cycle of the Metro application. The OnLaunched method creates a rootFrame as the framework of the entire application view, and navigating the initial Page to MainPage, as shown in the highlighted section of code 2.

namespace HelloMetro{    sealed partial class App : Application    {        public App()        {            this.InitializeComponent();            this.Suspending += OnSuspending;        }        protected override void OnLaunched(LaunchActivatedEventArgs args)        {            // Do not repeat app initialization when already running, just ensure that            // the window is active            if (args.PreviousExecutionState == ApplicationExecutionState.Running)            {                Window.Current.Activate();                return;            }            if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)            {                //TODO: Load state from previously suspended application            }            // Create a Frame to act navigation context and navigate to the first page            var rootFrame = new Frame();            if (!rootFrame.Navigate(typeof(MainPage)))            {                throw new Exception("Failed to create initial page");            }            // Place the frame in the current Window and ensure that it is active            Window.Current.Content = rootFrame;            Window.Current.Activate();        }        private void OnSuspending(object sender, SuspendingEventArgs e)        {            var deferral = e.SuspendingOperation.GetDeferral();            //TODO: Save application state and stop any background activity            deferral.Complete();        }    }}      

Code 2 App. xaml. cs

　　MainPage. xaml and MainPage. xaml. cs

The Metro application development of C # + XAML adopts the MVVM mode. MainPage. xaml describes the front-end display view, and MainPage. xaml. cs serves as the view control. Because a blank template is selected during project creation, the view described in MainPage. xaml shows how to display a blank page, as shown in code 3.

<Page    x:Class="HelloMetro.MainPage"    IsTabStop="false"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:HelloMetro"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">    </Grid></Page>

Code 3 MainPage. xaml

MainPage. xaml. the cs Code only provides a basic framework for us. As shown in code 4, we will perform the following operations on MainPage in section 3rd. xaml and MainPage. xaml. cs is modified to implement a simple Hello Metro application.

namespace HelloMetro{    public sealed partial class MainPage : Page    {        public MainPage()        {            this.InitializeComponent();        }        protected override void OnNavigatedTo(NavigationEventArgs e)        {        }    }}

Code 4 MainPage. xaml. cs

StandardStyle. xaml

StandardStyle. the xaml is located in the Common file. After opening it, you can see the definitions of various styles, ememplate, and other resources. With the development, the content will be gradually involved. Now, I have a general impression on it, that is, the resource definition file.

Package. appxmanifest

This is the configuration file of the Metro application, which involves the application Ui, functions, declarations, packaging and other information. In our Hello Metro application, you do not need to deal with it for the moment.

　　3. Write a Hello Metro application

Before developing an application, we first designed the functions of our Hello Metro application. For the sake of simplicity, we designed the following "sign-in" function:

A) enter the name of the signatory in the text box;

B) Click OK;

C) display the name and welcome information of the signatory;

View Design

After clarifying the above functional requirements, we first design the view. Here, Microsoft provides us with powerful visual editing support. You can drag and drop controls using the Toolbox shown in figure 3.

 

Figure 3 toolbox

The final MainPage. xaml is shown in code 5. The highlighted part is the added code.

<Page x: Class = "HelloMetro. mainPage "IsTabStop =" false "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: local =" using: HelloMetro "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" mc: Ignorable = "d"> <Grid Background = "{StaticResource ApplicationPageBackgroundThemeBrush}"> <TextBox x: name = "textboxName" HorizontalAlignment = "Center" VerticalAlignment = "Center" Margin = "0, 0, 60,120 "TextWrapping =" Wrap "Width =" 168 "/> <TextBlock HorizontalAlignment =" Center "verticalignment =" Center "Margin =, 60,200 "TextWrapping =" Wrap "Text =" enter your name "FontSize =" 24 "/> <Button Content =" OK "HorizontalAlignment =" Center "verticalignment =" Center" margin = ", 0, 0,120 "Width =" 100 "type =" codeph "text ="/codeph "/> <TextBlock x: name = "textblockOutput" verticalignment = "Center" HorizontalAlignment = "Center" TextWrapping = "Wrap" Text = "HelloMetro" FontSize = "48"/> </Grid> </Page>

Code 5 View Design

　　Interface Control

In this part, we want to display the user name and related information in the textblockOutput text block when the user enters the name and clicks the OK button, this requires processing in the button click event. Select the button in the view, Click Properties, and add the OnSubmit function of the Click event to the attribute panel shown in 4.

 

Figure 4 properties panel

After the event processing function is added, the system automatically generates an OnSubmit Event Response Function Framework for us. We add our own control code to output the required information in textblockOutput, as shown in code 6, the highlighted code is the part we added.

private void OnSubmit(object sender, RoutedEventArgs e){    textblockOutput.Text = string.Format("Hello {0}, Welcome to Metro World", textboxName.Text);}

Code 6: OnSubmit function in MainPage. xaml. cs

　　Compile and run

5. Select the running environment as Simulator or local computer, and click the Green Arrow to start debugging.

 

Figure 5 compile and run

The final running result 6 is shown.

Figure 6 running result

(Original article, reproduced please note the author schbook: seekerxu@163.com)