Silverlight玩转控件（二）—

在接下来的几篇文章中，我将来介绍Silverlight相关的布局知识。

在Silverlight中，布局主要有三种方式：

1. Cavas

2. StackPanel

3. Grid

在传统的ASP.NET中，我们知道，布局通常是通过传统的CSS+DIV来予以实现，但是在Silverlight中，我们更多的是通过布局控件+Style来予以实现，至少我的习惯是这样的。Style其实很类似于CSS。

好，转入正题，在这篇文章中，我主要来介绍Canvas控件的用法。

首先，让我们新建一个Silverlight 2的项目：

然后是这样：

好，如果没有错误的话，我们应该已经新建了一个Silverlight 2的项目文件，在项目中，我们可以看到：

我们来大致介绍一下：SilverlightApplication.Web是一个测试的页面文件。

这个就要从Silverlight的本质来说起，我不想为Silverlight拉广告，说Silverlight有哪里哪里的好，与传统的页面和Flash相比有什么优点之类的话，这些仁者见仁，智者见智。我也不妄加评论。我只是专心学我的微软技术就好了。

Silverlight其实我们可以把它当成一个用户控件的作用来理解，他不能独立运行，而需要一个ASP.NET网站或者HTML页面作为宿主来运行。而这个SilverlightApplication.Web下的SilverlightApplication1TestPage.aspx和SilverlightApplicationTestPage.html就是这个Silverlight项目的宿主测试页面。

在Silverlight编译后，会生成一个dll的文件，我们可以在Web应用中导入这个dll文件，就像我们导入其他的第三方控件一样，然后来使用我们所创建的Silverlight项目。

我们在第一次运行之后看看项目中的变化：

我们可以发现，多了一个xap文件，而在SilverlightApplication1TestPage.aspx中，我们可以发现玄机：
<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>

好了，我想大多数人都应该知道这个Silverlight是如何启动的了。不再赘言。

现在开始主题，使用Canvas来布局。

Canvas——中文的翻译是帆布，油画（布）。这个很形象，在Silverlight中，Canvas就像一张油布一样，所有的控件都可以堆到这张布上。

而使用Canvas布局和使用传统的ASP.NET非常类似。

我们回顾一下我们使用ASP.NET的时候，我们创建一个Button，使这个Button距页面左侧和顶部分别是50和50：
<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>

好了，接下来让我们看下在Silverlight的Canvas布局方式中，我们该如何去实现同样的效果.

在传统的ASP.NET中，我们是把整个Web页面作为一个画布，在上面摆置各种Web控件。其实在Silverlight的Canvas布局中也是一样，我们也只是需要设置于Canvas的距离即可。

但是更为简单，毕竟抛弃了我们编程人员都讨厌的CSS，而使用了属性，我们来看：
<Canvas><Button Content="Button" Width="70" Height="30" Canvas.Left="50" Canvas.Top="50"></Button>
</Canvas>
看下效果：

恩，不错，但是纯白色的背景很难看诶！换个背景色：
<Canvas Background="LightBlue"><Button Content="Button" Width="70" Height="30" Canvas.Left="50" Canvas.Top="50"></Button>
</Canvas>
呵呵，别骂我，这么简单的也往上写！我只是觉得他背景难看换一下罢了！

大家还记得组合模式么？在布局中，这个模式简直太经典了!

恩！详细的我就不说了，要不又该跑题了！在Silverlight中，也是一样，布局控件一样是可以嵌套的。

我们来看个例子：
<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>
我们可以清楚地看到，即使是Button中设置了Canvas.Left=”0”和Canvas.Top=”0”，这个Button依然与页面的边框有距离，原因就在于Canvas嵌套。这个我就不解释了。

在我们使用Canvas布局时，智能提示会给出这样的东西：

ZIndex，这究竟是个什么东西呢？让我们来看这样一个例子：
<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>
效果如下：

大小，位置都相同，后创建的Button当然覆盖前一个Button，我们可以理解。

然而使用了ZIndex属性:
<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>
这就得到了这样的效果：

这就是ZIndex的作用，我们知道，我们生活在一个三维空间里（我们不考虑四维的空间）。我们声明的Canvas.Top和Canvas.Left只描述了其中的二维，而ZIndex则描述的是第三维。也就是我们在空间直角坐标系的Z轴。

好，最后说明Canvas的最后一个用途。封装一组控件，还记得在Winform的应用中，我们经常使用Panel来封装一组控件，在Silverlight中，我们最常使用的就是Canvas.

而且，在Silverlight中，布局控件依然支持一系列的事件：

做个简单的例子吧：
<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>
然后看后台代码：
private void Canvas_MouseEnter(object sender, MouseEventArgs e)
{foreach (Control c in this.Canvas1.Children){Button b = c as Button;if (b != null){b.Content = "按钮";}}
}
好了，看看效果吧：

好了，搞定！

今天Canvas布局就写到这里，要收拾行李了，明天坐车回北京。

欢迎大家继续关注《Silverlight玩转控件》系列，也希望大家多提出宝贵意见，谢谢。

转载于:https://www.cnblogs.com/kym/archive/2009/02/02/1382756.html

Silverlight玩转控件（二）——Canvas布局相关推荐

Silverlight实用窍门系列：51.Silverlight页面控件的放大缩小、Silverlight和Html控件的互相操作...
本节将讲述三个Silverlight中应用的小技巧:Silverlight页面的放大缩小.Silverlight操作Html.Html操作Silverlight控件. 一.Silverlight页面的 ...
winform 异步弹窗窗体_玩转控件:重写/重绘Dev中MessageBox弹窗控件
很久没有更新博客了,本想着直接发一篇<手撕ERP>系列,从控件重写.重绘,到框架搭建,再到部分模块实现+业务的.但是每次动手的时候,都觉得难以下手.直接从数据库设计开始吧,模块设计还没定下 ...
玩转控件:封装Dev的LabelControl和TextEdit
缘由俗话说的好:"工欲善其事必先利其器",作为软件攻城狮也是同样道理,攻城狮开发的软件目的是简化客户的操作,让客户动动手指就可以完成很多事情,减少人力成本.这也是系统/软件存在的 ...
玩转控件:重写/重绘Dev中MessageBox弹窗控件
很久没有更新博客了,本想着直接发一篇<手撕ERP>系列,从控件重写.重绘,到框架搭建,再到部分模块实现+业务的.但是每次动手的时候,都觉得难以下手.直接从数据库设计开始吧,模块设计还没定下 ...
Qt Creator 窗体控件自适应窗口大小布局
常见的软件窗口大小改变(最大化.手动改变时)需要窗口的部件能够自适应布局,而在Qt的应用程序界面设计中,对于像我一样的初学者如何实现窗口自适应调整还是要绕点弯路的.网上百度了很多,多数说的很含糊,还有 ...
玩转控件:对Dev的GridControl控件扩展
缘由一切实现来源于需求,目的在于不盲目造轮子,有小伙伴儿在看了<玩转控件:对Dev中GridControl控件的封装和扩展>文章后,私信作者说,因公司业务逻辑比较复杂,展示字段比较多,尤 ...
ArcGIS API for Silverlight中legend控件显示图例问题
转自http://www.gisall.com/html/34/9534-5141.html 在使用ArcGIS API for Silverlight进行地图展示应用的时候,我们都会设置地图图层列表 ...
Android在Activity中动态增加xml自定义样式布局控件(引用xml布局文件和循环增加控件)
工程目录: MainActivity package com.example.test1121;import androidx.appcompat.app.ActionBar; import andr ...
玩转控件:Fucking ERP之流程图
前言首先,跟守护在作者公众号和私信作者催更的朋友们道个歉.疫情的原因,公司从年初到现在一直处于996+的高压模式,导致公众号更新频率较低.而且作者每更新一篇原创公众号,既要对自己沉淀知识负责,也要对 ...

Silverlight玩转控件（二）——Canvas布局

Silverlight玩转控件（二）——Canvas布局相关推荐

最新文章

热门文章