[Translation] WP7 Quickstart-Article 2-Use XAML to create a Windows Phone user interface

Note: This articleArticleIt is the second article translated from Microsoft's official WP7 Quickstart, describing the XAML under WP. Some of the content is added to your understanding and expression habits. The main purpose of this series is to practice English, and to give yourself an understanding of WP7 development as a bi developer. For some improper translations, I hope you will point out criticism and correction]

Original address: http://create.msdn.com/en-US/education/quickstarts/Creating_the_Windows_Phone_User_Interface_ (XAML)

In Windows Phone, we usually use Silverlight to create an application.ProgramAnd xNa is used to create a game. XAML is a declarative language for creating UI elements in Silverlight. Therefore, many widgets, graphics, and text displayed on the screen can be created through it. If you are familiar with Web programming, you can think that XAML is similar to HTML, but it is more powerful than HTML. Like HTML, XAML is composed of elements and attributes. However, XAML is based on XML, so some XML rules need to be followed, including the formatting requirements. You may ask, "since I have a visual studio or a UI tool like blend, why do I need to care about XAML ?". Even if tools are used to generate these tags, it is often necessary to explore and understand the underlying things. In additionCodeTo manually create the UI.

This part contains the following content ::

XAML example

XAML is only a Process Code

Attribute

XAML and visual tree

Not just static UI

XAMLExample

The following code example is used to create a button.

XAML

<Grid X: Name = "contentpanel" grid. Row = "1" margin = "12,0, 12,0">

<Button Height = "72" width = "160" content = "Click me"/>

</GRID>

The code running effect is roughly as follows:

The button control is specified as the <button> element. The width and height attributes are used to specify the button size. <Grid> it exists when you create a Windows Phone application in Visual Studio and is used to locate objects. For more information about the Silverlight layout, refer to here.

You can use Visual Studio to generate XAML. For example, you can drag a button in the toolbar to design the interface.

The following is the code generated by Visual Studio. (Your may seem slightly different)

XAML

<Grid X: Name = "contentgrid" grid. Row = "1">

<Button content = "button" Height = "72" horizontalalignment = "left"

Margin = "152,273, 160" name = "button1" verticalignment = "TOP" width = ""/>

</GRID>

Note that Visual Studio adds some additional attributes, such as horzontalaligment and margin, to locate the button position. You may not be able to use these additional attributes. Of course, you can also modify them visually in Visual Studio, but in more cases, you may modify them directly in XAML.

The biggest benefit of using declarative languages such as XAML is the separation of UI and code. For example, in your team, the designer designs the UI and then submits the XAML to the developer to fill in the logic code. Even if the designer and developer are the same person (usually both), you can split your UI and code.

XAMLAlso Procedural Code

[Translator's note: Procedural Code? The original Article is procedural code for a more accurate understanding]

XAML elements, such as <button/>, are the same as instantiating an object in the code. For example, the following XAML code:

XAML

<Grid X: Name = "contentpanel" grid. Row = "1" margin = "12,0, 12,0">

<Button Height = "72" width = "160" content = "Click me"/>

</GRID>

The following code is created in C.

// Initialize the button

Button mybutton = new button ();

// Set its properties

Mybutton. width = 160;

Mybutton. Height = 72;

Mybutton. content = "Click me ";

// Attach it to the visual tree, specifically as a child

// The Grid Object (named 'contentpanel '). In other words, position

// The button in the UI.

Contentpanel. Children. Add (mybutton );

For the UI, XAML is easier to read than code writing. However, it is also necessary to dynamically create a UI through code.

Attribute

You can specify the property value of XAML in two ways.

Attribute syntax Element

Property syntax Element

[Note]

Attribute syntax elements are similar to the HTML format mentioned above. Attribute = "value ". The following example creates a red rectangle. Fill defines the color name in the form of attribute.

XAML

<Rectangle fill = "red"/>

Alternatively, you can use the property method to specify.

XAML

<Rectangle>

<Rectangle. Fill>

<Solidcolorbrush color = "red"/>

</Rectangle. Fill>

</Rectangle>

In this example, the solidcolorbrush object is used to assign the fill attribute, rather than the red character. From this example, you may see that the property method is the same way. However, not all values support attribute strings. For example, if you want to specify multiple properties in an object, you must use the property method. The following example creates a rectangle and uses a progressive color.

XAML

<! -- This rectangle is painted with a diagonal linear gradient. -->

<Rectangle width = "200" Height = "200">

<Rectangle. Fill>

<Lineargradientbrush startpoint = "0, 0" endpoint = "1, 1">

<Gradientstop color = "yellow" offset = "0.0"/>

<Gradientstop color = "red" offset = "0.25"/>

<Gradientstop color = "blue" offset = "0.75"/>

<Gradientstop color = "limegreen" offset = "1.0"/>

</Lineargradientbrush>

</Rectangle. Fill>

</Rectangle>

After running the program, for example:

As you can see, the fill attribute uses more complex lineargradientbrush objects to create progressive colors.

XAMLAnd visual tree

In XAML, some elements can contain other elements. This parent-child relationship specifies how to locate similar objects and respond to events. Consider the following example.

XAML

<Grid X: Name = "contentpanel" background = "red" grid. Row = "1" margin = "12,0, 12,0">

<Stackpanel margin = "20" background = "blue">

<Textblock name = "firsttextblock" fontsize = "30"> first textblock </textblock>

<Textblock name = "secondtextblock" fontsize = "30"> second textblock </textblock>

<Textblock name = "thirdtextblock" fontsize = "30"> third textblock </textblock>

</Stackpanel>

</GRID>

The red grid contains the blue stackpanel. Textblock is included in stackpanel. In addition, textblock is arranged vertically in stackpanel.

The following tree structure table names indicate the relationships between them.

In addition to how the content is presented, the visual tree also handles how events are handled. Generally, common events are bubbling to the top of the tree. For example, you can define a left mouse button for stackpanel to Process Code, mouseleftbuttondown:

XAML

<Grid background = "red" X: Name = "contentpanel" grid. Row = "1" margin = "12,0, 12,0">

<Stackpanel margin = "20" background = "blue" mouseleftbuttondown = "commonmousehandler">

<Textblock name = "firsttextblock" fontsize = "30"> first textblock </textblock>

<Textblock name = "secondtextblock" fontsize = "30"> second textblock </textblock>

<Textblock name = "thirdtextblock" fontsize = "30"> third textblock </textblock>

</Stackpanel>

</GRID>

The following code is used to process events.

C #

Private void commonmousehandler (Object sender, routedeventargs E)

{

Frameworkelement fesource = E. originalsource as frameworkelement;

Switch (fesource. Name)

{

Case "firsttextblock ":

Firsttextblock. Text = firsttextblock. Text + "Click! ";

Break;

Case "secondtextblock ":

Secondtextblock. Text = secondtextblock. Text + "Click! ";

Break;

Case "thirdtextblock ":

Thirdtextblock. Text = thirdtextblock. Text + "Click! ";

Break;

}

}

Run the code and click any textblock. The information displayed above changes. The event is bubbling to its parent-level element for processing.

The following shows the event bubbles in the tree.

1. Click textblock.

2. Event bubbling to parent Element

3. Continuously bubbling to the root node

Because the events are continuously bubbling to the root node, it is the same to listen to the mouseleftbuttondown event on the grid.

Not only static UI

In XAML, you can do more than static UIS. You can create animations, integrate videos, or bind data with Markup languages. The following content will be described. Here is a simple animation example. Click rectangle below to see the effect.

XAML

<Stackpanel background = "# fdf5e6">

<Stackpanel. Resources>

<Storyboard X: Name = "mystoryboard">

<Doubleanimationusingkeyframes

Storyboard. targetname = "myrectangle"

Storyboard. targetproperty = "height">

<! -- This key frame resets the animation to its starting

Value (30) at the beginning of the animation. -->

<Lineardoublekeyframe value = "30" keytime = "0: 0"/>

<! -- Spline animations are used to create acceleration. This

Splinedoublekeyframe creates an animation that starts out slow

And then speeds up. The rectangle "falls". -->

<Splinedoublekeyframe keyspline = "0, 0, 0" value = "300"

Keytime = "0: 0. 8"/>

<! -- This spline animation creates the "Bounce" at the end where

The rectangle shortens its length quickly at first and then

Slows down and stops. -->

<Splinedoublekeyframe keyspline = "0.10, 0.21 0.00, 1.0" value = "250"

Keytime = ". 5"/>

</Doubleanimationusingkeyframes>

</Storyboard>

</Stackpanel. Resources>

<Rectangle X: Name = "myrectangle" mouseleftbuttondown = "mouse_clicked" fill = "blue"

Width = "200" Height = "30"/>

</Stackpanel>

C #

// When the user clicks the rectangle, the animation begins.

Private void mouse_clicked (Object sender, mouseeventargs E)

{

Mystoryboard. Begin ();

}

The dynamic effects are defined using XAML. The storyboard defines the attributes of an animation, for example, which element is used to define an animation. The child element defines lineardoublekeyframe and how to execute an animation ]. For more information about animation, see here.