Introduction to the syntax of the XAML tutorial for sixsix Translation

[This topic is pre-release documentation and is subject to change in future releases. Blank topics are supported as placeholders.]
Introduction to XAML syntax

This article describes how to create objects and set their attributes in XAML using several different methods.

The topic consists of the following parts:
What is XAML?
Object Declaration
Set attributes
Other related topics
What is XAML?

XAML is a declarative language. You can use the XAML tag to create a visual UI original. Then, you can use intent script in a separate file to operate the objects you declare in XAML and respond to some events. As a declarative language based on XML, the process from prototype to product is very intuitive when creating interfaces, especially for people with web design background knowledge and technology.

A XAML file is usually an XML file suffixed with. XAML. The following is a typical Silverlight XAML file example .. XAML
<Canvas
Xmlns = "http://schemas.microsoft.com/client/2007"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle
Width = "100"
Height = "100"
Fill = "blue"/>
</Canvas>

Object Declaration

In XAML, objects are declared and their attributes are set in the following ways ::
OBJECT element Syntax: Uses Open and closed tags to declare objects, just like XML. You can use this method to declare root elements and set their attribute values.
Attribute Syntax: uses embedded statements to declare objects. You can use this method to set a property value ..
OBJECT element syntax

A typical method to declare an object using object element syntax .. First, you need to create two XML Element labels:
<Objectname>

</Objectname>

... Objectname is the name of the object you want to instantiate. The following example uses Object element syntax to declare a canvas. XAML
<Canvas>
</Canvas>

Some objects, such as canvas, can contain other objects .. XAML
<Canvas>
<Rectangle>
</Rectangle>
</Canvas>

For convenience, if an object does not contain other objects, you can use only one label to describe its XAML
<Canvas>
<Rectangle/>
</Canvas>

Declare an object using attribute syntax
See the next section to set attributes for more information about attribute syntax.
Set attributes

With object element syntax, you can set its attributes when declaring an object. In XAML, you can set attributes using attribute syntax or property element syntax.
Set attributes through attribute syntax

<Objectnameproperty = "propertyvalue">

</Objectname>

... Property is the property name. You will assign the value of propertyvalue to it. The following example shows how to use Attribute syntax to set the width, height, and fill. XAML of a rectangle.
<Canvas>
<Rectangle
Width = "100" Height = "100" fill = "blue"/>
</Canvas>

Use property element syntax to Set Properties

Some attributes can be set through property element syntax. You can describe the attributes you want by creating XML elements, for example:
<Objectname>

<Objectname. Property>

<Propertyvalue.../>

</Objectname. Property>

</Objectname>

... Property is the property name, And you will assign the value of propertyvalue to it. the following example shows how to use property element syntax to set a rectangle fill and use a solidcolorbrush. XAML
<Canvas>
<Rectangle
Width = "100"
Height = "100">
<Rectangle. Fill>
<Solidcolorbrush/>
</Rectangle. Fill>
</Rectangle>
</Canvas>

Use content element syntax to set attributes

Sometimes, when an attribute supports element syntax, you can ignore the attribute name and directly embed the attribute value in the object tag. This is content element syntax. The following example shows how to set the text attribute value of textblock without specifying the text attribute. XAML
<Textblock>
Hello!
</Textblock>

Use implicit collection syntax to Set Properties

Sometimes, an attribute is represented as a set. You can ignore the Set Name and directly set the attribute value. This is the implicit collection syntax .. The following example shows how to ignore gradientstopcollection in lineargradientbrush and specify the gradientstop object directly. Gradientstopcollection is included in the first lineargradientbrush, but is ignored in the second. XAML
<Rectangle width = "100" Height = "100"
Canvas. Left = "0" canvas. Top = "30">
<Rectangle. Fill>
<Lineargradientbrush>
<Lineargradientbrush. gradientstops>

<! -- Here the gradientstopcollection tag is specified. -->
<Gradientstopcollection>
<Gradientstop offset = "0.0" color = "red"/>
<Gradientstop offset = "1.0" color = "blue"/>
</Gradientstopcollection>
</Lineargradientbrush. gradientstops>
</Lineargradientbrush>
</Rectangle. Fill>
</Rectangle>

<Rectangle width = "100" Height = "100"
Canvas. Left = "100" canvas. Top = "30">
<Rectangle. Fill>
<Lineargradientbrush>
<Lineargradientbrush. gradientstops>

<! -- Notice that the gradientstopcollection tag
Is omitted. -->
<Gradientstop offset = "0.0" color = "red"/>
<Gradientstop offset = "1.0" color = "blue"/>
</Lineargradientbrush. gradientstops>
</Lineargradientbrush>
</Rectangle. Fill>
</Rectangle>

Sometimes you can even ignore both the Set element tag and attribute element Tag: XAML
<Rectangle width = "100" Height = "100"
Canvas. Left = "200" canvas. Top = "30">
<Rectangle. Fill>
<Lineargradientbrush>
<Gradientstop offset = "0.0" color = "red"/>
<Gradientstop offset = "1.0" color = "blue"/>
</Lineargradientbrush>
</Rectangle. Fill>
</Rectangle>

When to use attribute or property element syntax to Set Properties

All attributes support attribute or property element syntax. Some attributes support other methods. The methods supported for setting attributes depend on the object type recognized by the attribute value ..
If the attribute value is of a simple type, such as double, integer, or string, this attribute only supports attribute syntax. the following example shows how to use Attribute syntax to set the width of a rectangle. the width attribute supports attribute syntax because its attribute value belongs to the double type. XAML
<Rectangle width = "100"/>

Whether attribute syntax can be used depends on whether the object you use to set the attribute supports attribute syntax. The following example shows how to use Attribute syntax to set a rectangle fill attribute. When you use solidcolorbrush to set the fill attribute, it supports attribute syntax, because solidcolorbrush supports attribute syntax. XAML
<Rectangle fill = "blue"/>

Whether the attribute can be set using element syntax depends on whether the object you use supports the attribute. If the object supports object element syntax, the property supports property element syntax. The following example shows how to use property element syntax to set a rectangle fill. When you use solidcolrbrush to set Fill, it supports attribute syntax because solidcolorbrush supports attribute syntax .. XAML
<Rectangle>
<Rectangle. Fill>
<Solidcolorbrush/>
</Rectangle. Fill>
</Rectangle>

See also
Silverlight object models