Windows Phone Note (12) Basic XAML knowledge

ArticleDirectory

• 1. XAML Overview
• 2. Use code to create a UI element
• 3. property inheritance in XAML
• 4. Property-element syntax
• 5. Resource set
• 6. Reference resources in code
• 7. Use the XAML Style

1. XAML Overview

In the previous notes, we usedUse the Silverlight for Windows Phone framework to develop Windows PhoneApplicationProgram, Where we useXmal (eXtensible Application Markup Language)To describe the application UI. By introducing the XAML in the first note, we know: XAML is a new type created by Microsoft to build an application user interface.DeclarativeLanguage (declarative:XAML can display the hierarchical relationship between multiple objects by using a language structure, and supports type extension by using a Backup Type convention to initialize objects and set object attributes.), Based on and fully compatible with XML. In the general Windows Phone application development process based on Silverlight:

Build a visible User Interface (UI) element using declarative XAML markup,BackgroundCodeIt is used to respond to and process all user input and all events generated by controls.

This is the same as that in. the common development models in net development are similar. It separates the background logic of the program from the code on the user interface, facilitating the collaboration between developers of uidesigners during the development process. The syntax of XAML is based on XML. All developers can quickly master the language as long as they have the corresponding programming basics, however, since XAML is a new declarative language extended on the basis of XML, there must be some differences between them. This is also worth special attention during the learning process.

 

2. Use code to create a UI element

Building visible UI elements with Xmal tags is not our only choice. We can also use background Code, although this is not a common method, but this makes us better understand Xmal. In. net, most of the Xmal elements have their own classes, and the features of these elements correspond to the attributes in the class. The following uses a simple example to demonstrate how to use background code to build UI elements.

Main Parts of mainpage. xaml ui:

 1 <! -- Contentpanel-place other content here -->2 <Grid X: Name = "  Contentpanel  " Grid. Row = "  1  " Margin = "  12, 0, 12, 0  " > 3 <Stackpanel X: Name = "  Textblocklist  " > 4 <Button content = "  Create blocktext  " Height = "  72  " Horizontalalignment = "  Center  "   5 Name = "  Btn_createblk  " Click = " Btn_createblk_click  " > 6 </Button> 7 </Stackpanel> 8 </GRID>

 

Mainpage. Xmal. CS background processing section:

 1           ///   <Summary>  2           ///  Click Create textblock Element  3           ///  </Summary>  4           ///   <Param name = "sender"> </param>  5           ///   <Param name = "E"> </param>  6           Private   Void Btn_createblk_click ( Object  Sender, routedeventargs E)  7   {  8 Textblock newtextblock = New  Textblock ();  9 Newtextblock. Text = "  Hello World  "  ;  10 Newtextblock. fontsize = 28  ;  11 Newtextblock. horizontalalignment = Horizontalalignment. Center;  12 Newtextblock. Margin =New Thickness ( 0 , 10 , 0 , 0  );  13   14               This  . Textblocklist. Children. Add (newtextblock );  15 }

In the preceding example, you only need to click the button to add a textblock element to the container element named textblocklist on the page by calling its click event.

 

3. property inheritance in XAML

We know that the framework and page hierarchy of the Windows Phone application are generally like this:

If we define this attribute in the phoneapplicationpage tag of mainpage. XAML:Fontstyle = "italic", We can see that the property set in this label will apply to all textblock elements on the entire page. This is called:Property inheritance)OfFeatures (as a feature of Silverlight).

You can also set the text style in textblock directly: <textblock fontstyle = "normal" text = "hello"/> we can see that the font is restored to the default state, this is because the local setting of textblock has a higher priority than the property inheritance. Through these settings, we can see that the priority of attributes acting on elements is as follows:

• Highest priority set locally
• The style priority is lower than the local setting.
• Center property inheritance priority
• The default value has the lowest priority.

 

4. Property-element syntax

In our XAML code, the attribute of an element is usually set as follows, for example:

1<Textblock fontstyle ="Normal"TEXT ="Hello"Fontsize ="36"Foreground ="Red"/>
 

 

However, we know that XAML is based on XML, so we can continue to split the previous Code:

1<Textblock text ="Hello"Foreground ="Red">2<Textblock. fontstyle> normal </textblock. fontstyle>3<Textblock. fontsize>36</Textblock. fontsize>4</Textblock>
 

The effect is exactly the same as the previous one. The current textblock contains the following name:Textblock. fontsizeIn the middle of its starting tag is its value, which isProperty-element syntax,This is a very important component of XAML. Some terms related to. NET and XML can be further clarified by introducing the attribute element Syntax:

• Element Object-XML-based. Net object
• Property Attribute-the. NET attribute set through XML features
• Property element-a. Net attribute represented by an XML Element

WeNote:Is:Anything else in the attribute element tag is invalid and it is not allowed to set attribute features and attribute elements for the same attribute.

 

5. Resource set

The Xmal file in the Windows Phone program we wrote previously has many duplicate tags, such as margin, horizontalalignment, and verticalignment. In fact, we can use CSS in HTML, use the Silverlight style in XAML ). However, there is a prerequisite for implementing the Silverlight style: a more common sharing mechanism:Resource (resrouce)(PS: the previous note resource refers to the image resource embedded in the application ).

Xmal resources are usually used as an instance of a special. Net class or struct, either an existing class or struct, or a custom class. When a specific class is defined as an Xmal resource, the system will only create an instance of this class, And the instance will be referenced to share the objects of this resource.

A single instance of any element derived from uielement cannot be used for multiple times, and all elements cannot appear as resources.

To support resource storage,FrameworkelementDefinesResourcedictionaryTypeResources Properties. In our app. XAML file, an emptyResource segment (a resource set within a resource range can be called a resource segment Resource Section):

 
<! -- Application resources --> <application. Resources> </application. Resources>
 

Resources defined in the app. XAML file can be used in the entire application, while resources defined in the resource set of frameworkelement can only be used in the frameworkelement element and its child element.

Next, let's take a look at a specific example-to share the same resource with all elements with the fontsize attribute.FirstTo understand this attribute, we need to know what type it belongs to. The fontsize attribute belongs to the double type. The double struct is based on the double data type of C # And is defined in the system namespace, however, this namespace is not available in the generated XAML file. We need to do some additional work: declare an Xmal namespace for the system namespace:

Xmlns: system ="CLR-namespace: system; Assembly = mscorlib"
 

 

ThenTo add a double type Resource:

 
1<System: Double X: Key ="Fontsize">2683</System: Double>
 

 

Finally, the defined resource is used. For example, you can reference this resource for a textblock element:

<Textblock text ="Hello"Foreground ="Red"Fontsize ="{Staticresource fontsize}"/>
 

Here we need to pay attention to the X: key feature. The keys of each resource are unique (different resource sets can be reused, and the higher priority will overwrite the lower priority resources ), we also use this key to reference the corresponding resources.

 

6. Reference resources in code

By simply indexing the resourc attribute of the resource name, we can use the XAML resource in the code, but this must be accessed only after the initializecomponent method calls the constructors of the code hidden file. For example, we use the previous section in the code to directly define<Phone: phoneapplicationpage. Resources>:

This. BTN. Margin = (thickness)This. Resources ["Margin"];
 

 

If the resource with this name cannot be found in the resource set of the preceding element, the program will continue to retrieve the resource set of the app class. If it still cannot be found, the indexer will return null. We can also reference resources by using X: name. The advantage of this is that the name will be stored as a field in the automatically generated code, therefore, you can reference it like other fields. For example, we use a shared image brush Resource:

 
This. Txtblk. Foreground = brush;
 

Note that there are two restrictions:

• 1. The (Resource) object created through tryconverter cannot use the (X: Name) element feature
• 2. Use the X: Name resource, which must be unique in the Xmal file.

 

7. Use the XAML style 7.1 to understand the style

In the previousBased onWe can use the XAML style to further reuse the style code of the element.A XAML style is basically a set of attributes allocated for a specific element type.. A XAML style has two important attributes:X: Key (referenced key)AndTargettype (element type). Let's take a look at the example code:

 1 <Style X: Key = "  Btnstyle  " Targettype = "  Button  " > 2 <Setter property = " Horizontalalignment  " Value = "  Center  " > </Setter> 3 <Setter property = "  Verticalalignment  " Value = "  Center  " > </Setter> 4 <Setter property = " Margin  " Value = "  12 96  " > </Setter> 5 <Setter property = "  Fontsize  " Value = "  30  " > </Setter> 6 </Style>

 

Use the defined XAML style as follows:

1<Button content ="Create blocktext"Name ="Button1"Style ="{Staticresource btnstyle}"/>
 

 

You can also use other defined resource files in the style. For example, you have defined a resource:

 
1<System: Double X: Key ="Fontsize">2683</System: Double>
 

 

In the style, we can use the defined resources as follows:

 1 <Style X: Key = "  Txtblkstyle  " Targettype = "  Textblock  " > 2 <Setter property = "  Horizontalalignment  " Value = "  Center  " > </Setter> 3 <Setter property = "  Verticalalignment  " Value = "  Center  " > </Setter> 4 <Setter property = "  Margin  " Value = "  12 96  " > </Setter>5 <Setter property = "  Fontsize  " Value = "  {Staticresource fontsize}  " > </Setter> 6 </Style>

 

7.2 style inheritance

Styles can be forced or changed through the inheritance process. We can use the basedon attribute of the style label to inherit the defined styles. For example, we inherit the previously defined X: Key as btnsytle style and redefine two attributes. The specific usage is as follows:

 1 <Style X: Key = " Btnstyle2  " Targettype = "  Button  " Basedon = "  {Staticresource btnstyle}  " > 2 <Setter property = "  Horizontalalignment  " Value = "  Left  " > </Setter> 3 <Setter property = "  Verticalalignment  " Value = "  Bottom  " > </Setter> 4 </Style>

In this way, apart from the two attributes that are redefined, other attributes are inherited by the style in which X: Key is btnstyle2.

 

References: programming Windows Phone 7 Microsoft Silverlight Edition

Author: Sunny pig

Source: Http://www.cnblogs.com/IPrograming

The copyright of this article is shared by the author and the blog Park. You are welcome to repost this article. However, you must retain this statement without the author's consent and provide a clear link to the original article on the article page. Otherwise, you will be held legally liable.

Windows Phone developer exchange group: 79339880. You are welcome to discuss and exchange and learn and make progress together.