Silverlight play Control (2) -- canvas Layout

 

In the following sectionsArticleIn the future, I will introduce the layout knowledge related to Silverlight.

In Silverlight, there are three main layout methods:

1. CAVAS

2. stackpanel

3. Grid

In the traditional ASP. net, we know that the layout is usually implemented through the traditional CSS + Div, but in Silverlight, we mostly implement it through the layout Control + style, at least I am used to this. Style is similar to CSS.

Okay. Let's go to the topic. In this article, I will mainly introduce the usage of the canvas control.

First, let's create a Silverlight 2 project:

Then the following code is displayed:

Well, if there is no error, we should have created a new Silverlight 2 project file. In the project, we can see:

Here is a general introduction: silverlightapplication. Web is a test page file.

From the essence of Silverlight, I don't want to pull advertisements for Silverlight. If Silverlight has any advantages over traditional pages and flash, the benevolent opinions will be appreciated, the wise man sees wisdom. I will not comment. I just want to focus on my Microsoft technology.

Silverlight can be understood as a user control. It cannot run independently, but needs an ASP. NET Website or HTML page to run as the host. The silverlightapplication1testpage.aspxand silverlightapplicationtestpage.html under silverlightapplication.webare the host test pages of this Silverlight project.

After Silverlight compilation, a DLL file is generated. we can import this DLL file in a web application, just like we import other third-party controls, then use the Silverlight project we created.

After the first running, let's look at the changes in the project:

We can find that there is an additional xap file, while in silverlightapplication1testpage. aspx, we can find the xuanjicang:

 <  ASP  :  Scriptmanager  ID  = "Scriptmanager1"  Runat  = "Server"> </  ASP :  Scriptmanager  > <  Div  Style  ="  Height : 100% ; "> <  ASP  :  Silverlight  ID  = "Xaml1"  Runat  = "Server"  Source = "~ /Clientbin/silverlightapplication1.xap"  Minimumversion  = "2.0.31005.0"  Width  = "100%"  Height  = "100%" 

 
/> </Div>
 

 

Well, I think most people should know how Silverlight is started. Do not go into details.

Now you can use canvas to layout the topic.

Canvas-the Chinese translation is canvas and Oil Painting (cloth ). In Silverlight, canvas is like a canvas. All the controls can be stacked on this canvas.

The canvas layout is similar to the traditional ASP. NET layout.

When using ASP. NET, we will create a button to make it 50 and 50 from the left and top of the page:

 <  Head  Runat  = "Server"> <  Title  > </  Title  > <  Style  Type  = "Text/CSS">  . Newstyle1 { Margin-left : 50px ;Margin-top : 50px ;} </  Style  > </  Head  > <  Body  > <  Form  ID  = "Form1"  Runat  = "Server"> <  Div  > <  ASP :  Button  ID  = "Button1"  Runat  = "Server"  Text  = "Button"  Cssclass  = "Newstyle1"/> </  Div  > </  Form  > </  Body  > 

Now let's take a look at how we can achieve the same effect in the canvas layout of Silverlight.

In traditional ASP. NET, we use the entire web page as a canvas and place various Web controls on it. The same is true in the canvas layout of Silverlight. We only need to set the canvas distance.

But it is simpler. After all, we discard the CSS that our programmers hate and use attributes. Let's look at it:

<Canvas> <ButtonContent= "Button"Width= "70"Height= "30"Canvas. Left= "50"Canvas. Top= "50"> </Button> </Canvas>
 

See the following results:

Well, it's good, but the pure white background is ugly! Change the background color:

<CanvasBackground= "Lightblue"> <ButtonContent= "Button"Width= "70"Height= "30"Canvas. Left= "50"Canvas. Top= "50"> </Button> </Canvas>
 

Well, don't scold me. It's easy to write it up! I just think his background is ugly!

Do you still remember the combination mode? In layout, this mode is too classic!

Well! I will not talk about the details, or I should leave the question again! In Silverlight, layout controls can also be nested.

Let's look at an example:

 <  Canvas  Background  = "Lightblue">  <  Canvas  Canvas. Left  = "50"  Canvas. Top  = "50"  > <  Button  Canvas. Left  = "0"  Canvas. Top  = "0" Content  = "Button"  Width  = "70"  Height  = "30"> </  Button  > </  Canvas  > </  Canvas  > 

We can clearly see that even if canvas is set in the button. left = "0" and canvas. top = "0", the button is still at a distance from the border of the page, because the canvas is nested. I will not explain this.

When we use the canvas layout, the smart prompt will give something like this:

Zindex, what is this? Let's look at an example:

 < Canvas  Background  = "Lightblue"> <  Button  Content  = "Button"  Canvas. Left  = "20"  Width  = "60"  Height  = "30"  Canvas. Top  = "30"> </  Button  > <  Button Content  = "Test"  Canvas. Left  = "20"  Width  = "60"  Height  = "30"  Canvas. Top  = "30"> </  Button  > </  Canvas  > 

The effect is as follows:

The size and position are the same. The created button overwrites the previous button.

However, the zindex attribute is used:

<  Canvas  Background  = "Lightblue"> <  Button  Content  = "Button"  Canvas. zindex  = "2"  Canvas. Left  = "20"  Width  = "60"  Height  = "30"  Canvas. Top  = "30"> </ Button  > <  Button  Content  = "Test"  Canvas. zindex  = "1"  Canvas. Left  = "20"  Width  = "60"  Height  = "30"  Canvas. Top  = "30"> </  Button  > </  Canvas > 

This produces the following results:

This is the role of zindex. We know that we live in a three-dimensional space (we do not consider four-dimensional space ). The declared canvas. Top and canvas. Left only describe the two dimensions, while zindex describe the third dimension. That is, the Z axis in the space Cartesian coordinate system.

The last use of canvas is described. Encapsulate a group of controls. Remember that in winform applications, we often use panel to encapsulate a group of controls. In Silverlight, canvas is the most commonly used.

In addition, the layout control still supports a series of events in Silverlight:

Let's make a simple example:

 <  Canvas  Background  = "Lightblue"  Mouseenter  = "Canvas_mouseenter"  Name  = "Canvas1"> <  Button Content  = "Button"  Canvas. Left  = "20"  Canvas. Top  = "20"> </  Button  > <  Button  Content  = "Button"  Canvas. Left  = "20"  Canvas. Top  = "60"> </  Button  > < Button  Content  = "Button"  Canvas. Left  = "20"  Canvas. Top  = "100"> </  Button  > </  Canvas  > 

Then look at the backgroundCode:

Private voidCanvas_mouseenter (ObjectSender,MouseeventargsE ){Foreach(ControlCIn this. Canvas1.children ){ButtonB = CAsButton;If(B! =Null) {B. content ="Button";}}}
 

Okay. Let's see the effect:

Okay, let's get it done!

Today, the canvas layout is written here. We have to pack our luggage and take a bus back to Beijing tomorrow.

You are welcome to continue to pay attention to the Silverlight play control series. I hope you will give more valuable comments. Thank you.