[Win8] Windows 8 Development Notes (1): Number-size game

For more information about Win8 development, see this article:

[Win8] How to Use Visual studio2012 for windows8 Project Development

Let's write a small project as an entry-level experiment that is slightly higher than helloworld.

The project requirement is very simple. If you enter a number, the system displays whether the input number is large, small, or accurate.

Now let's get started ~

First, you need to create a blank App Store project, and click File> New or Ctrl + Shift + N:

Now you can check the file structure of this project:

,

Although the project is a blank Application Template, many basic interfaces and background code are included.

• The configuration file (package. appxmanifest) introduces the application (its name, description, tile, start page, and so on) and lists the files contained in the application.
• A set of big and small icons (logo.png and smalllogo.png) to be displayed on the Opening screen ).
• Indicates the image (storelogo.png) of the app in the Windows app store ).
• Displays the initial screen (splashscreen.png) of the application startup time ).
• The application's XAML and code files (App. XAML and App. XAML. CS/. VB ).
• The start page (mainpage. XAML) and the accompanying code files (mainpage. XAML. CS/. VB) run when the application starts.

Double-click mainpage. in the XAML file, you can see a blank screen. According to our needs, we need three controls: 1. prompt box to guide the user to input and operate. You can use the textblock control to implement 2. input box. Users can enter numbers and use the Textbox Control. in the button box, you can press the button to check whether the predicted number is compared with the actual number size. You can use the button control to achieve this.
Before inserting these three controls, let's take a look at this XAML file. XAML is an Application Markup Language Based on HTML but different from HTML. You may not be familiar with it at the beginning. But it is related to wood, and everything is difficult at the beginning. It's easy to get started -. -
The default original code is as follows:

<Page    x:Class="Guess.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:BlogFeeding"    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>

We can see that the key part of the code is the grid tag. So what is grid? In the future, there will be no mystery if we say it too early.
After learning about the default code content, drag a textblock from the toolbox. You have not heard the error. It is drag-and-drop. Do not think that visual operations such as drag-and-drop are not directly targeted at the high-end atmosphere of code on the screen, drag and Drop a simple project is the most direct method. At the same time, it also provides a benefit to help us get familiar with the relevant markup of XAML.
After dragging, the preview window looks like this:

Okay, why is it so small? Don't worry. Let's take a look at what code vs has generated for us:

        <TextBlock HorizontalAlignment="Left" Margin="465,381,0,0"                    TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>

Horizontalalignment refers to the horizontal method, margin refers to the margin, textwrapping refers to the text surrounding, text refers to the content, and verticalignment refers to the vertical alignment. You can also set it in the Properties window on the right.
After understanding the basic form, we can make some adjustments to view the changes in the preview panel and infer the meaning of the corresponding tag. Of course, it is recommended to read Microsoft's official API for learning. API transfer:

Http://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/br211369.aspx

With a simple understanding, we continue to drag the object to the screen. My personal habit is to drag the control first to reduce the workload, then delete unnecessary attribute labels, and gradually modify. Similar to the disadvantages of Dreamweaver, The automatically generated code is inevitably redundant.

The complete page is as follows:

<Page X: class = "numguess. mainpage "istabstop =" false "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: Local =" using: numguess "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC = "http://schemas.openxmlformats.org/markup-compatibility/2006" MC: ignorable = "D"> <grid X: Name = "grid1" background = "{staticresource Applicationpagebackgroundthemebrush} "> <! -- Prompt the user to enter the Region --> <textblock X: Name = "prompttext" horizontalalignment = "center" margin = "0,-, 0, 0 "textwrapping =" Wrap "verticalignment =" center "fontsize =" 72 "text =" Enter the number you guessed "/> <! -- Prompt the user to enter the Region --> <textbox X: name = "inputnumber" horizontalalignment = "center" margin = "431,332,431,356" textwrapping = "Wrap" verticalalignment = "center" fontsize = "48" width = "504" Height = "80" /> <button content = "Guess" horizontalalignment = "center" margin = "535,467,549,216" verticalignment = "center" Height = "100" width = "300" fontsize = "70" fontweight = "normal" Click = "guess_click"/> </GRID> </Page>

The corresponding information is as follows:

It seems similar, so we will continue to add background code for it.

Click the selected button, and then click the lightning tab on the right-side property panel -. -The event handler for the selected element:

Enter guess_click in click, and press enter to automatically jump to the corresponding code page:

Here we can write down the corresponding processing code when the button is pressed.

First, declare a random number in the class:

// Define the random generator random myrandom = new random (); // define the final number private int mynumber;

After the statement is declared, initialize it in the constructor and randomly generate a 0 ~ Integer of 1000:

        public MainPage()        {            myNumber = myRandom.Next(0,1000);            this.InitializeComponent();        }

Then we can write the specific judgment code:

Private void guess_click (Object sender, routedeventargs e) {// determines whether the input complies with the specification if (inputnumber. Text! = "") {// Converts the input to an integer int input = convert. toint32 (inputnumber. text); If (input <mynumber) {prompttext. TEXT = input + "small! ";} Else if (input> mynumber) {prompttext. Text = input +" big! ";}Else {prompttext. Text = input +" correct! ";}} Else {prompttext. Text =" Incorrect. Enter an integer! ";}// Clear the input box inputnumber. Text = "";}

The principle is very simple. It's just an if judgment. Click the run button to test it. That's right. A simple game that guesses numbers is just done.

Download the complete project source code: