Chapter 1 Markup Language and code: Section 1 first project (2)

This file is composed of Markup languages that follow the "eXtensible Application Markup Language" (XAML) standard. Just like the name, XAML is based on the "Extensible Markup Language" (XML.

In general, you use a XAML file to define all the visualization elements of the page, and then solve the problems that cannot be solved using the markup language in the C # file, such as computing or responding to user input. C # files are always used as the background code files of the corresponding XAML files.

The root element of this XAML file is Page. You should know that it is a class during Windows runtime. However, note that x: Class attributes:

<Page

X: Class = "Hello. MainPage"

The x: Class attribute can only appear on the root element of the XAML file. This attribute defines a MainPage class in the Hello namespace, And the MainPage class inherits the Page class. It is the same as defining classes in the C # file.

Next, this attribute is followed by the IsTabStop attribute of the Page class, which is used to customize the behavior of users when using the Tab key on the keyboard to export data in the control. This setting is not necessary because its default value in the Page class is false.

Next is the definition of a series of XAML namespaces. These Uris do not point to an interesting webpage, but act as a unique identifier created by a company or organization. The first two are the most important:

Xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"

Xmlns: x = http://schemas.microsoft.com/winfx/2006/xaml

When I saw the date 2006, I recalled Microsoft's introduction to WPF, which is exactly the day when the XAML was launched. WPF is part of. NET Framework 3.0. Before it is released, it is always called WinFX, so winfx will be in URI. To a certain extent, if WPF, Silverlight, Windows Phone, and Windows are running, all classes, attributes, components, and XAML files in the environment are fully compatible.

The first namespace without a prefix references the classes, structures, and enumeration types defined during Windows runtime, it contains all the space and everything that can appear in the XAML file, including the Page and Grid classes in some special files. In this URI, presentation is related to a visual user interface, which can be distinguished by other XMAL applications. For example, if you use XAML to write Windows Workflow Foundation (WF) programs, you should use a default namespace URI ending with workflow.

The second namespace has an x prefix. Here, it contains the inherent elements and attributes of XAML, and there are only nine available applications in the Windows runtime. Obviously, the most important thing is the x: Class attribute.

The third statement is very interesting:

Xmlns: local = "using: Hello"

There is a prefix with the Hello namespace local. You can create custom classes in your application and introduce them in XAML with the local prefix. If you need to reference the classes in the background code library, you will need to define another XML namespace Declaration, which will automatically combine the namespace names and class names of these libraries. You will see in the subsequent sections how to do it.

The rest of the namespace declaration is prepared for Microsoft Expression Blend. Expression Blend may insert its own special tags that require other namespace declarations. These should be ignored by the Visual Studio compiler, so the Ignorable attribute will be available. For programs in this book, the three lines of the Page root element can be deleted.

The Page element has a subelement called Grid. This is another class defined in the Windows. UI. Xaml. Controls namespace. Grid will be very familiar in the future. Because it can contain other visual objects, it is called a container. But because it inherits the Panel class, more often it is called layout. In Windows 8 applications, the layout classes that inherit the Panel class play an important role. In the MainPage. xaml file, Visual Studio has already created a Grid for you through the XMAL syntax, with a background color (actually a painter object ). I will explain these syntaxes in Chapter 2 "XAML Syntax.

In general, you can divide a table layout (Grid) into several rows and columns to define some cells (this will be demonstrated in Chapter 5 "control interaction) it is more like an improved version of HTML tables. A table layout without rows and columns is called "independent Cell Layout", which is also very useful.

To display a passage during Windows running, you must use a TextBlock (this is in Windows. UI. xaml. in this way, let's put a TextBlock control in the independent Cell Layout, and then set some attributes. In fact, these attributes are all attributes in the TextBlock class.

Project: Hello | File: MainPage. xaml (excerpt)

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">      <TextBlock Text="Hello, Windows 8!"                        FontFamily="Times New Roman"                        FontSize="96"                        FontStyle="Italic"                        Foreground="Yellow"                        HorizontalAlignment="Center"                        VerticalAlignment="Center" /></Grid>

Note:In this book, the Code has a line of title. You can find the code in the attachment of the downloaded book based on the title. In this way, I can reference only a part of all files, but you can also know where all the content is.

The order of these attributes is irrelevant. Of course, indentation is also irrelevant. If you are in a hurry, you can skip other attributes except the Text attribute. When coding, You can note that Visual Studio's smart sensing function will complete the attribute name and possible values. You can choose what you want. After TextBlock is completed, Visual Studio's design preview interface will give you a preview of the page.

You can also drag a TextBlock space from the toolbox of Visual Studio, and set its attributes in the attribute list. But I will not do this in this book, but describe the process of program establishment through code like a real programmer.

Press F5 to compile and run the program, or select start debugging from the Debug menu. It is best to run this simple program in the Visual Studio debugger. If everything is done, you will see this picture:

The HorizontalAlignment and verticalignment attributes of TextBlock are set to Center. Obviously, it is unnecessary for programmers to determine the screen size and text size. You can set horizontal alignment to left, right, and center, you can also set the vertical alignment close to the top and close to the bottom to locate the position of TextBlock in the Grid. In Chapter 4 "Panel rendering", you can see that visual objects can be precise to pixels in Windows runtime, but you usually rely on the built-in layout function.

The TextBlock control has the attributes of Width, Width, and Height, but you do not need to bother setting two attributes. In fact, if you set the width and height attributes for this TextBlock, you may find that the text is cut or the text is centered on the page. TextBlock is more advanced than you know how big it should be.

You may run this program on devices like tablets that support changing directions. If you do this, you will notice that the page content will automatically change the direction and aspect ratio based on the device. The Grid, TextBlock, and Windows8 layout systems automatically solve this problem.

Stop the Hello program, press Shift + F5 in Visual Studio, or select stop debugging from the Debug menu. You will notice that the program is not only executed, but also deployed in Windows 8. Now it can be started from the Start Screen. If you create a program on your own, its tile may not be very nice. However, the program's tile files are all in the project's resource directory, and you can change them by yourself (projects in the downloaded files all have their own tile files ). Now you can run the program again on the screen from Windows 8.

Another option is that you can run the program in the simulator so that you can control the resolution, direction, and other things. In the Visual Studio toolbar, you will see a drop-down box showing the local machine. It will be OK if you change it to a simulator.