ZZ: getting started with developing Silverlight applications using the. NET language (2): interface and Object Model

(This article is reproduced in the Silverlight Shanghai Development Team blog and is the second article in the series "getting started with Silverlight application development in. Net. Switch from the http://blog.csdn.net/SilverlightShanghai/archive/2007/09/28/1805279.aspx. If you have any questions about the Silverlight technology itself, views, opinions, suggestions, or suggestions for the content you want to see the blog, please visit http://blog.csdn.net/silverlightshanghai, leave your valuable comments)

Silverlight uses the XAML language to describe the interface. XAML is the abbreviation of Extensible Application Markup Language, that is, the Extensible Application Markup Language. In Windows Presentation Foundation (WPF), the first time the XAML is displayed, it is used to describe the. NET language. The XAML in Silverlight is only used to provide a uniform description of the user interface, making up for the lack of HTML/CSS and other interface customization, developers and designers can use the same language to communicate with each other, reducing the additional workload. Therefore, the syntax of Silverlight XAML is simpler and easier to use than that of XAML in WPF.

Although we can use Microsoft Expression studio to visually design the interface, understanding the basic syntax of XAML can help us better customize our own interface. If you want to write XAML directly, using Visual Studio 2008 can improve the writing efficiency, because it has the automatic induction function (intelliisense ).

2. canvas container <canvas/> and various elements

Any Silverlight application's interface description starts with a container named canvas. After a new Silverlight project is created in Microsoft Expression blend or Visual Studio 2008, A. XAML file containing only the root canvas is generated, as shown below:

<Canvas X: Name = "parentcanvas"
Xmlns = "http://schemas.microsoft.com/client/2007"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
Loaded = "page_loaded"
X: class = "silverlighttestproject. Page; Assembly = clientbin/silverlighttestproject. dll"
Width = "640"
Height = "480"
Background = "white">

</Canvas>

All elements must be added to the root canvas container, because only one such root canvas container can exist in one interface. We can add sub-containers or other elements to the root container. Each element has a tag. For example, add a rectangle to the sub-container and add an elliptical shape to the root container:

<Canvas X: Name = "parentcanvas"
Xmlns = "http://schemas.microsoft.com/client/2007"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
Loaded = "page_loaded"
X: class = "silverlighttestproject. Page; Assembly = clientbin/silverlighttestproject. dll"
Width = "640"
Height = "480"
Background = "white">

<Canvas>
<Rectangle> </rectangle>
</Canvas>

<Ellipse> </ellipse>

</Canvas>

Common geometric figures defined by Silverlight include <rectangle/>, <ellipse/>, line <line/>, and polygon <polygon/>, multi-cross <polyline/> (non-closed line), path <path/> (any shape and line can be drawn, such as a non-closed curve), and so on. <Textblock/> allows us to customize the text displayed on the interface.

3. Additional element attributes

By trying the above code, we can find that we don't actually see any traits we want, because their default size attributes are 0. Obviously, using only these element labels is not enough to get the desired shape. We need to set its attribute values in the labels to determine its size and position.

Observe the root canvas. We can see some customization of attributes, such as the definition XML namespace (xmlns) that only appears at the root node and the custom XML namespace (xmlns: x ). There are also some common attributes, such as width and height ). In canvas, these two attributes can be expressed by pixel values or percentages. X: name indicates the name of the element example. With this name, we can operate on this element example in. Net code. The background Property sets the background color. If this value is not set, this element is transparent.

Each element has its own attributes. For example, we can improve the Code just now:

<Canvas X: Name = "parentcanvas"
Xmlns = "http://schemas.microsoft.com/client/2007"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
Loaded = "page_loaded"
X: class = "silverlighttestproject. Page; Assembly = clientbin/silverlighttestproject. dll"
Width = "640"
Height = "480"
Background = "white">

<Canvas X: Name = "subcanvas" canvas. Left = "123" canvas. Top = "117" width = "53" Height = "39">
<Ellipse fill = "yellow" Height = "100" width = "200" strokethickness = "2" stroke = "black"/>
</Canvas>

<Rectangle X: Name = "myrect" canvas. top = "20" canvas. left = "20" width = "100" Height = "100" fill = "blue" stroke = "red" strokethickness = "3"/>

</Canvas>

You can see the following results:

 

Fill specifies the fill color. Stroke and strokethickness customize the color and width of the contour lines of the shape. We can see that the position attribute of the child element (including the Child container canvas) under the root canvas represents the Coordinate Position of the child element relative to the upper-level canvas. It is worth noting that although the rectangle myrect is beyond the boundary range defined by subcanvas, It is not clipped by subcanvas and still belongs to the element in subcanvas.

By the way, currently we only have a canvas container. In the near future, Silverlight will provide more containers to facilitate layout management.

4. Object Model

In WPF, XAML is the XML Representation of. Net code. In Silverlight, we also have the. NET programming method that corresponds to XAML. Each element corresponds to an object, and each element attribute has a corresponding attribute in its. Net object. For example, the rectangle in the previous example can be represented in the following C # language:

Rectangle myrect = new rectangle ();
Myrect. setvalue (canvas. topproperty, 117 );
Myrect. setvalue (canvas. leftproperty, 123 );

My rect. width = 100;
Myrect. Height = 100;

Solidcolorbrush brushblue = new solidcolorbrush ();
Brushblue. Color = colors. blue;
Myrect. Fill = brushblue;

Solidcolorbrush brushred = new solidcolorbrush ();
Brushred. Color = colors. Red;
Myrect. Stroke = brushred;

Myrect. strokethickness = 3;

Here, the solidcolorbrush object is derived from the brush, which is a type of painting brush. Silverlight defines several different paint brushes to fill the image. The default paint brush of the property fill is a solidcolorbrush. Therefore, you can assign a value to the fill attribute in the. XAML file, but you must specify the type of the paint brush in. net. We will introduce the image painter details later.

The rectangle defined in C # is still independent. To express it on the interface, add the following code to add the rectangle to the upper-level canvas:

Children. Add (myrect );

5. References

• Reference for all element objects in Silverlight
• All element attributes in Silverlight
• Getting started with developing Silverlight applications using the. NET language (1): Understanding the project structure