概述
Silverlight 2 Beta
1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#,
IronRuby, Ironpython,对JSON、Web
Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章将从Silverlight
2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Silverlight 2开发。
Silverlight中
内置了对于HTML、客户端脚本等的支持,本文为如何在Silverlight 2中与HTML
DOM交互第二部分。在第一部分中主要介绍了如何访问和修改已有的HTML
DOM,我们还可以完全创建一个新的DOM元素或者移除一个已有的DOM元素,除此之外,我们还可以为DOM元素添加事件处理。
创建DOM元素
首先我们来看如何创建一个新的DOM元素,最终的效果如下,当我们在文本框中输入文字后,单击创建,将在上面的区域中创建一个li元素。ITPUB个人空间-Z~b;OS,rL&Ibf
ITPUB个人空间8oM$Kk"L n8R5i
先来定义一下HTML页面,甚至Silverlight插件的高度。
<divid="parentdiv">
+{9f-@-O"t0<ulid="list">
V @.i"r3K2f0</ul>
c;B
[ E
Sjd0</div>
dnl0Fer9d0<divstyle="height:200px;">
d
g&}\3}0<asp:SilverlightID="Xaml1"runat="server"
/p}BuNwl0Source="~/ClientBin/TerryLee.SilverlightAccessDom2.xap"ITPUB个人空间 q*R)t8Q(V,n
Version="2.0"Width="100%"Height="200px" />
,_$\N5l"g(J0</div>
并且为上面的div定义一个简单的样式,以示与Silverlight区分
#parentdiv
$t7y:t;O'z3aZ7t0{ITPUB个人空间G1N\:w|[5]`"C0Z
background:#FCDFB3;ITPUB个人空间9nH%o;Jv%Y[
border:solid 1px #FF9900;
9J2na\{[+B
B`}0width:500px;ITPUB个人空间C:hZ2]J+o
height:100px;
s6A[
w.k|1F0margin-bottom:20px;
5v
P[?Y8E9k;W0gwE0}
在Silverlight中进行界面布局,XAML如下:
<CanvasBackground="#CDFCAE">
9_r-h |;g GX0<TextBlockText="Silverlight Accessing the HTML DOM"Foreground="Red"ITPUB个人空间mbE2~(_*z0W
Canvas.Top="10"Canvas.Left="30"FontSize="18">
:^%vER`G0</TextBlock>ITPUB个人空间/]/ijbX
<WatermarkedTextBoxx:Name="input"Watermark="请在这里输入"ITPUB个人空间A3s3C*^"d
Height="40"Width="300"
:LRuE(rOb4u&]x(o6e0Canvas.Left="30"Canvas.Top="50">ITPUB个人空间"A0jJVg
EEj"jC
</WatermarkedTextBox>
c `9C jgV!`Z0<Buttonx:Name="createButton"Background="Red"
-w)mH.x[7i,OX0Height="40"Width="100"Content="创 建"ITPUB个人空间eG[2Wxr!|J
Canvas.Top="50"Canvas.Left="350"
H6@*_-Y"B.P$o5X0Click="createButton_Click">
!r!LlA`
paFEQ0</Button>ITPUB个人空间e!b m*r2h3\!vW
</Canvas>
编写创建按钮的代码,首先获取到要往里面添加元素的父元素,即我们定义的ul:
HtmlElementparent =HtmlPage.Document.GetElementById("list");创建一个新的元素li,并设置属性
HtmlElementchild =HtmlPage.Document.CreateElement("li");ITPUB个人空间w-m I8\%q(e6]]o
child.SetAttribute("innerText",this.input.Text);添加新元素到parent中
parent.AppendChild(child);
完整的代码如下:
private voidcreateButton_Click(objectsender,RoutedEventArgse)ITPUB个人空间Z m4dP+]
{
j
^:z3R.d?0HtmlElementparent =HtmlPage.Document.GetElementById("list");ITPUB个人空间 { qzzm3{
8~/vH!]R0HtmlElementchild =HtmlPage.Document.CreateElement("li");ITPUB个人空间wG5L}Qb8u(qR3S[T
child.SetAttribute("innerText",this.input.Text);
F S"R5CE
I"WHlI2p0ITPUB个人空间p,_6Gn*\}kug
parent.AppendChild(child);
~.hb\MsRa0}
运行后创建第一个元素

再次创建一个
ITPUB个人空间BGqZ3`#^;Bq
ITPUB个人空间\NDV3T2C移除DOM元素
既然可以创建元素,对应的也可以删除元素,我们在页面上放上几个<li>元素,然后输入id进行删除。代码如下:
private voiddeleteButton_Click(objectsender,RoutedEventArgse)
!YFa,|(u9[\0{
A:O9ed7jDJOm0z0HtmlElementparent =HtmlPage.Document.GetElementById("list");ITPUB个人空间2J F3\*y(`(v(e
ITPUB个人空间7\
h,C9l&h
HtmlElementchild =HtmlPage.Document.GetElementById(this.input.Text);
,r_3u;Ne$E0ITPUB个人空间(v)h/]i
^
parent.RemoveChild(child);ITPUB个人空间;T\!O(yX*]!j#CgJc
}
运行后界面上有三个<li>
ITPUB个人空间 X%BY;WY2QL
eA'v删除其中一个
ITPUB个人空间*R]w?AW!^l
ITPUB个人空间_uCV3xeK2vH!?.T为DOM注册事件
除了添加和移除DOM元素外,我们还可以为DOM元素附加事件,在下面的例子中我们将通过Silverlight动态创建一个DOM元素<a>,并未它注册单击事件,单击时修改Silverlight中的矩形背景色。先准备相关的HTML。
<divid="parent">
yC3G%LWiX0ITPUB个人空间y;I
z+Q*?)wM4L
</div>
rp`*xk F$h0<divstyle="height:200px;">ITPUB个人空间,d.u)]
Xg
<asp:SilverlightID="Xaml1"runat="server"
5^ DH'Zk7p MZ.N0Source="~/ClientBin/TerryLee.SilverlightAccessingDom3.xap"ITPUB个人空间U"n5z[`(_
Version="2.0"Width="100%"Height="200px" />ITPUB个人空间1{}P^ Dag1w9H
</div>
并且定义两个样式,其中newstyle我们将在Silverlight中为新添加的a元素使用。
#parentITPUB个人空间8in
_*K5_4R"]J
C
{ITPUB个人空间{:JY&W+h
N
background:#FCDFB3;ITPUB个人空间
Y+\\wDo2T
border:solid 1px #FF9900;ITPUB个人空间I.@8S-e'mk,Q
width:500px;
;vCW7e9C/y)pl+N-|y0height:100px;ITPUB个人空间.lI0piH J0{:j#]
margin-bottom:20px;
d1Kd4h
d7_]j%|KC%H0}ITPUB个人空间~g[O'hI(NC!i
.newstyleITPUB个人空间1U/q&n`5E)JCmE+M
{ITPUB个人空间!o)p:p7Zg0?8Z$Ki0A/f)R
background:#0099FF;ITPUB个人空间WSxfKQ6]
border:solid 1px #0000FF;ITPUB个人空间N7WS Ek7M3D
}
做一个简单的界面,放置一个按钮和矩形:
<CanvasBackground="#CDFCAE">ITPUB个人空间-\ p,B^*L%{!Y?:K
<TextBlockText="Silverlight Accessing the HTML DOM"Foreground="Red"
)u$Ck`*Z/WFoi,M*DF0Canvas.Top="10"Canvas.Left="30"FontSize="18">ITPUB个人空间#zM e2V*{.t;Z7l/U
</TextBlock>ITPUB个人空间TrriEZ0lhK/V
<Rectanglex:Name="result"Height="40"Width="300"Fill="Red"ITPUB个人空间.e2zI*v:w#wc] @
Canvas.Left="30"Canvas.Top="50"ITPUB个人空间 { e!M%[!g4Y]
RadiusX="5"RadiusY="5">
P3uw6M+Br$J#O3`)c0</Rectangle>
\*Q7vBc(?Y0<Buttonx:Name="addButton"Background="Red"
-G`M-fZ!e qQN"u j0Height="40"Width="100"Content="添 加"ITPUB个人空间({X]A0H#K
Canvas.Top="50"Canvas.Left="350"ITPUB个人空间s#q x5OZ~
Click="addButton_Click">
}*R3Z9E
R#G&M }k_0</Button>ITPUB个人空间
R8xj/]/wB P
</Canvas>添加DOM元素,创建一个a元素,并为它设置属性,其中用CssClass来定义它的样式:
HtmlElementparent =HtmlPage.Document.GetElementById("parent");
v?:T`{8rC){0
WP#c6pR0HtmlElementbutton =HtmlPage.Document.CreateElement("a");ITPUB个人空间"St@1Vj@`3?@1| k
button.SetAttribute("innerText","改变Silverlight中的颜色");ITPUB个人空间4ie {r\?7d3eh
button.SetAttribute("href","#");
Xa yFs:u*cw:R0button.CssClass ="newstyle";
:Gu)K-S2n2xh.ZFw0
i1t-~]X5u%c0parent.AppendChild(button);为a元素附加onclick事件,HtmlElement提供了AttachEvent方法用来附加事件,使用泛型的EventHandler,在a元素单单击时我们改变Silverlight中的矩形填充色和边框。
button.AttachEvent("onclick",newEventHandler<HtmlEventArgs>(button_Click));voidbutton_Click(objectsender,HtmlEventArgse)ITPUB个人空间p.N K5M/VQ a*zn
dy
{ITPUB个人空间,OM
A#c\ I*Q&Z
result.Stroke =newSolidColorBrush(Colors.Black);
!t8M i}9uH_
O:{qqu0result.Fill =newSolidColorBrush(Colors.Green);ITPUB个人空间?3XR!MzW0khp
result.StrokeThickness = 2;ITPUB个人空间} y+e2dp;y@P%y:zv
}
完整的代码如下:
private voidaddButton_Click(objectsender,RoutedEventArgse)
m^$It"\z0{
$I|H2PfBG0HtmlElementparent =HtmlPage.Document.GetElementById("parent");
\X Yb4D0ITPUB个人空间B
Z/Od1}?'zoj
HtmlElementbutton =HtmlPage.Document.CreateElement("a");ITPUB个人空间6eJ
L'|I`$c9X
button.SetAttribute("innerText","改变Silverlight中的颜色");ITPUB个人空间6]9w4rW v.kK6t.S
button.SetAttribute("href","#");ITPUB个人空间0H9|`m(XA]
button.CssClass ="newstyle";ITPUB个人空间
NQ
X pe&a wO0s
4Dx6W#zJb0parent.AppendChild(button);ITPUB个人空间;e.uam'L
"~s"c_6A$Qh1Eu0button.AttachEvent("onclick",newEventHandler<HtmlEventArgs>(button_Click));
I#X`l&mh4M0}
N
D$uW1K^0
` WnoT8ncOiD/v0voidbutton_Click(objectsender,HtmlEventArgse)
+}Vsr s*e0{
6?,fDZ4w4?0result.Stroke =newSolidColorBrush(Colors.Black);
5d6X%^,n"{$k_0result.Fill =newSolidColorBrush(Colors.Green);ITPUB个人空间!f;sD K2kf&y0N6N
result.StrokeThickness = 2;ITPUB个人空间5H8m6J"lEU0z,M-X
}
运行一下看看效果如何,起始界面ITPUB个人空间4y O Ft,v5w
ITPUB个人空间^
v/e6a9J0[9U
添加新元素a
mR o;[Q7`0
iNC&c,Zt%R0单击改变矩形的背景颜色
%u/D)N
f-{ p.[#w"l2|a1N0
(eT hZ8A
rJ0
HtmlElement也提供了DetachEvent方法,可以取消注册事件。
结束语
本文简单介绍了如何在Silverlight中添加和移除DOM元素,以及为DOM元素添加、取消事件处理程序。
ITPUB个人空间'Vo5_C3q.b*h,k#P