. NET development Silverlight program: interface and Object Model

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 ).

Canvas container and various elements

The interface description of any Silverlight application starts with a Canvas container. 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 rectangles, ovans, straight lines, polygon, multi-cross lines (non-closed line), paths (any shapes and lines can be drawn, such as non-closed curves. Allow us to customize the text displayed on the interface.

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.

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 );