[This topic are pre-release documentation and is subject to change in future releases. Blank topics are included as placeholders.]
Introduction to XAML syntax
This article describes how to create objects and set their properties in XAML using several different methods.
Topics include the following sections:
What is XAML?
declaring objects
Setting properties
Other Related Topics
What is XAML
XAML is a declarative language. You can use XAML markup to create a visual UI original. After that, you can use Javasscript in a separate file to manipulate the objects you declare in XAML and respond to some events. As an xml-based declarative language, it creates an interface that is intuitive from prototyping to product, especially for people with background knowledge and skills in web design.
A XAML file is usually an XML file that has a. xaml suffix. The following is an example of a typical Silverlight XAML file. 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>
declaring objects
In XAML, there are several ways to declare objects and set their properties:
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 property values.
Attribute syntax: Use inline to declare an object. You can use this method to set the value of a property.
Object element syntax
A typical method that uses object element syntax to declare objects. First you want to create two XML element tags:
<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 tag to describe it as XAML
<Canvas>
<rectangle/>
</Canvas>
declaring objects using attribute syntax
See the next section, set properties, and get more information about attribute syntax.
Setting properties
Using object element syntax, you can set its properties when declaring an object. In XAML, there are several ways to set properties: Using attribute syntax, or using property element syntax.
setting properties by Attribute syntax
<objectnameproperty= "PropertyValue" >
</objectName>
... property is an attribute name, and 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 of a rectangle. Xaml
<Canvas>
<rectangle
Width= "height=" fill= "Blue"/>
</Canvas>
Setting properties using the property Element syntax
Some properties can be set by property element syntax. You describe the attributes you want by creating XML elements, for example:
<objectName>
<objectName.property>
<propertyvalue .../>
</objectName.property>
</objectName>
... property is an attribute name, and you will assign the value of PropertyValue to it. The following example shows how to use the property element syntax to set a rectangle fill, using a Solidcolorbrush.xaml
<Canvas>
<rectangle
Width= "100"
Height= ">"
<Rectangle.Fill>
<solidcolorbrush/>
</Rectangle.Fill>
</Rectangle>
</Canvas>
Setting properties using the Content Element syntax
Sometimes, when an attribute supports element syntax, you can ignore the attribute name and embed the attribute value directly into the OBJECT tag. This is the content element syntax. The following example shows how to set the TextBlock Text property value without specifying the Text property. Xaml
<TextBlock>
Hello!
</TextBlock>
Setting properties using implicit Collection syntax
Sometimes, a property behaves as a set, you can ignore the collection name and set the property value directly. This is implicit collection syntax. The following example shows how to ignore gradientstopcollection for LinearGradientBrush and directly specify GradientStop objects. GradientStopCollection was included in the first LinearGradientBrush, but was ignored in the second. Xaml
<rectangle width= "100" height= "
canvas.left= "0" canvas.top= ">"
<Rectangle.Fill>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<!--Here's 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= "
canvas.left= "canvas.top=" >
<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 collection element tags and attribute element tags:: XAML
<rectangle width= "100" height= "
canvas.left= "canvas.top=" >
<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 set properties
All attributes support attribute or property element syntax, and some properties support other methods. The methods supported by setting properties depend on the type of object that the property value recognizes ...
If the property value is a simple type, such as Double, integer,string, this property only supports attribute syntax. The following example shows how to use attribute syntax to set rectangle's Width.width property to support attribute syntax because his property value is a double type. Xaml
<rectangle width= "/>"
Whether you can use attribute syntax depends on whether the object you are using to set properties supports attribute syntax. The following example shows the Fill property that uses attribute syntax to set a rectangle. When you use SolidColorBrush to set the Fill property, it supports attribute syntax, because SolidColorBrush supports attribute syntax. Xaml
<rectangle fill= "Blue"/>
Whether you can use element syntax to set properties depends on whether the object you are using is supported. Properties support the property element syntax if the object supports the objects element syntax. The following example shows the use of the property element syntax to set a rectangle fill. When you use Solidcolrbrush to set fill, it supports attribute syntax, Because SolidColorBrush support attribute syntax. Xaml
<Rectangle>
<Rectangle.Fill>
<solidcolorbrush/>
</Rectangle.Fill>
</Rectangle>
Also
Silverlight Object Models
