.NEt专家博客!

一步一步学Silverlight 2系列(20):如何在Silverlight中与HTML DOM交互(下)

上一篇 / 下一篇  2008-04-11 20:44:37

概述

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元素。
7C2vWKX/r5r0ITPUB个人空间Q?0g"[ Xd

先来定义一下HTML页面,甚至Silverlight插件的高度。

<divid="parentdiv">
:NX OY5?(I'A*|6ib1Y0<
ulid="list">ITPUB个人空间+i A2K D)| m,F1A6X
</
ul>
S/X'P ]G0</
div>
^5U:o5m ]2S0<
divstyle="height:200px;">ITPUB个人空间(]Lt9Kq\&@"}I
<
asp:SilverlightID="Xaml1"runat="server"ITPUB个人空间 {,\%V^ |4Tsg` _7K
Source="~/ClientBin/TerryLee.SilverlightAccessDom2.xap"ITPUB个人空间?n0T)Q(w-p%W
Version="2.0"Width="100%"Height="200px" />
%kh#n9yfqF0</
div>

并且为上面的div定义一个简单的样式,以示与Silverlight区分

#parentdivITPUB个人空间tgx$~`	W
{
tLc;c Y0background:#FCDFB3;
1f!J3X;b:\|mG{0border:solid 1px #FF9900;
H E&Y:@W0width:500px;ITPUB个人空间_.F] e9i1P
height:100px;
~)\\$Q[+O"]0margin-bottom:20px;ITPUB个人空间~J:X-};IQ Lv
}

在Silverlight中进行界面布局,XAML如下:

<CanvasBackground="#CDFCAE">
U CcYh&}+F;L0<
TextBlockText="Silverlight Accessing the HTML DOM"Foreground="Red"ITPUB个人空间9[d3w%MVl.n
Canvas.Top="10"Canvas.Left="30"FontSize="18">
VF;aaz3tL0</
TextBlock>ITPUB个人空间H&f!iQI
<
WatermarkedTextBoxx:Name="input"Watermark="请在这里输入"ITPUB个人空间&Jz[a |%kKs
Height="40"Width="300"
X4\a/E*Sr0
Canvas.Left="30"Canvas.Top="50">
8F c1Aw-~"I3V;Sp0</
WatermarkedTextBox>ITPUB个人空间8Kil3])ui9Y:@+iu5Y |u
<
Buttonx:Name="createButton"Background="Red"
1?6W F[ s ZK0
Height="40"Width="100"Content="创 建"
+z0WU `1K$Yp+\g0
Canvas.Top="50"Canvas.Left="350"
9Uq3J4Zf%y^Y0
Click="createButton_Click">
)D"I0Oz a:} p%H;Rp0</
Button>ITPUB个人空间g-i`M+C
</
Canvas>

编写创建按钮的代码,首先获取到要往里面添加元素的父元素,即我们定义的ul:

HtmlElementparent =HtmlPage.Document.GetElementById("list");

创建一个新的元素li,并设置属性

HtmlElementchild =HtmlPage.Document.CreateElement("li");ITPUB个人空间`Y4Vh!d@
child.SetAttribute("innerText",this.input.Text);

添加新元素到parent中

parent.AppendChild(child);

完整的代码如下:

private voidcreateButton_Click(objectsender,RoutedEventArgse)ITPUB个人空间Q2Hqn
t1Ox
{
qg v:k*LG_%B0HtmlElementparent =HtmlPage.Document.GetElementById("list");
"~|i5R WT0ITPUB个人空间;@Lr JXd?
HtmlElementchild =HtmlPage.Document.CreateElement("li");
bdb)af,d0child.SetAttribute("innerText",this.input.Text);ITPUB个人空间v,AYpAj {

q7e;t8ya G%yI)V0parent.AppendChild(child);ITPUB个人空间L)y#w!]d2N!\I,z
}

运行后创建第一个元素

再次创建一个
Lf Y!g)iL3}c0
Qo;F"Z U0

移除DOM元素

既然可以创建元素,对应的也可以删除元素,我们在页面上放上几个<li>元素,然后输入id进行删除。代码如下:

private voiddeleteButton_Click(objectsender,RoutedEventArgse)ITPUB个人空间
a[)hE6S
l
{
,Y)X7m;L}2CZ0HtmlElementparent =HtmlPage.Document.GetElementById("list");
w2d&|U@*r0
c"Lir1`x0HtmlElementchild =HtmlPage.Document.GetElementById(this.input.Text);
*XK0k'P'z0ITPUB个人空间K'Db:o3d#h
parent.RemoveChild(child);
R Q2WQ+k{ MF0}

运行后界面上有三个<li>

ITPUB个人空间6s.B?Ja.^z2C
删除其中一个ITPUB个人空间Lk;W\,Y'b{
ITPUB个人空间RQ~8p8Pp

为DOM注册事件

除了添加和移除DOM元素外,我们还可以为DOM元素附加事件,在下面的例子中我们将通过Silverlight动态创建一个DOM元素<a>,并未它注册单击事件,单击时修改Silverlight中的矩形背景色。先准备相关的HTML。

<divid="parent">
7T e4q{` }:q0
SC1z? U x9T+f0^o?0</
div>
4MY6E,d&b$Bsr0<
divstyle="height:200px;">
&w7DMZv'{r0<
asp:SilverlightID="Xaml1"runat="server"ITPUB个人空间 Nr%D\ e0u
Source="~/ClientBin/TerryLee.SilverlightAccessingDom3.xap"ITPUB个人空间'I$da&Po+Cka
Version="2.0"Width="100%"Height="200px" />
0l*_C!`zT0</
div>

并且定义两个样式,其中newstyle我们将在Silverlight中为新添加的a元素使用。

#parentITPUB个人空间?hc}Um/_
{ITPUB个人空间GA:Co v.s
background:#FCDFB3;
ZP HC_v T1t3J0border:solid 1px #FF9900;
2O8d2v| I.o"B9w? b0width:500px;ITPUB个人空间)U zW#FG I
height:100px;
0tR\7]HC*vn@b0margin-bottom:20px;
9U9T3d C{0}
`_Q$l:s2C}b0.newstyle
4O!z%v,S$\g0
{
Bo,Z2d9x)pSO8?0background:#0099FF;
8p#IK3co'F0border:solid 1px #0000FF;
*~ ~t\ hS } R0}

做一个简单的界面,放置一个按钮和矩形:

<CanvasBackground="#CDFCAE">ITPUB个人空间o'N|7n{
bH7@
<
TextBlockText="Silverlight Accessing the HTML DOM"Foreground="Red"ITPUB个人空间tmA'zF8W
Canvas.Top="10"Canvas.Left="30"FontSize="18">
9}rlD#o1\%@0y0</
TextBlock>ITPUB个人空间RW Y;QK
<
Rectanglex:Name="result"Height="40"Width="300"Fill="Red"ITPUB个人空间&J+[NC'UQ!o4C
Canvas.Left="30"Canvas.Top="50"
!pb,b4q2\j)j k(k["EY0
RadiusX="5"RadiusY="5">
},shE"@2Q%r6c0</
Rectangle>ITPUB个人空间.Nuo'm fn
<
Buttonx:Name="addButton"Background="Red"ITPUB个人空间S8Gu+C(r b}o
Height="40"Width="100"Content="添 加"
S)VlZ-Z"r8|L0
Canvas.Top="50"Canvas.Left="350"
6q|-tG p2r2I0
Click="addButton_Click">
{\!riLH_K4C0</
Button>ITPUB个人空间l6QuW5NBv2vT_
</
Canvas>

添加DOM元素,创建一个a元素,并为它设置属性,其中用CssClass来定义它的样式:

HtmlElementparent =HtmlPage.Document.GetElementById("parent");ITPUB个人空间@%c/y)X3]+n+W8F qv

:T|'x dNro8d0HtmlElementbutton =HtmlPage.Document.CreateElement("a");ITPUB个人空间 RoL?/O.HH
button.SetAttribute("innerText","改变Silverlight中的颜色");
;Q:S @!r$IC ~y0button.SetAttribute("href","#");ITPUB个人空间&gv LDsC
button.CssClass ="newstyle";
5@5C/Vi.\!B5w5IN0ITPUB个人空间%u,yCxc\*e,Z*k
parent.AppendChild(button);

为a元素附加onclick事件,HtmlElement提供了AttachEvent方法用来附加事件,使用泛型的EventHandler,在a元素单单击时我们改变Silverlight中的矩形填充色和边框。

button.AttachEvent("onclick",newEventHandler<HtmlEventArgs>(button_Click));
voidbutton_Click(objectsender,HtmlEventArgse)ITPUB个人空间/bX/qf!P
{
O?V/Uw0result.Stroke =newSolidColorBrush(Colors.Black);
/GR,X$Zv6e+?#U,u0result.Fill =newSolidColorBrush(Colors.Green);
}+n'QI,ux#C0result.StrokeThickness = 2;
](g0E2]5A0}

完整的代码如下:

private voidaddButton_Click(objectsender,RoutedEventArgse)ITPUB个人空间USC?$Td)z
{
'h.E$z pAM0HtmlElementparent =HtmlPage.Document.GetElementById("parent");
!j_r N%? t8q-}0
X&]3hU5v4`0HtmlElementbutton =HtmlPage.Document.CreateElement("a");ITPUB个人空间L'Y&~!w-Z+r
button.SetAttribute("innerText","改变Silverlight中的颜色");
Q)iL7HK Ww6?M E6E0button.SetAttribute("href","#");ITPUB个人空间%F#Tp0m7^sP/e0YQ(e
button.CssClass ="newstyle";ITPUB个人空间#o9J-yKp$[;b2Y%Z8q

J vgW0zck/I3B~)jz0parent.AppendChild(button);
e/Gy C-p_6gu0ITPUB个人空间fm@G7u~ BI
button.AttachEvent("onclick",newEventHandler<HtmlEventArgs>(button_Click));
5ptvD!XH!Z&?+U0}ITPUB个人空间7N7?i/\*[r0m5f7y

8fi/OO&`lUy9S0voidbutton_Click(objectsender,HtmlEventArgse)
+jj}.J+f8U(ys'JN1Cq0{ITPUB个人空间 Z*|RI:]
result.Stroke =newSolidColorBrush(Colors.Black);ITPUB个人空间 c0i7m-eE,k$D%Al
result.Fill =newSolidColorBrush(Colors.Green);
$Y/R'|2Z:pwcA|0result.StrokeThickness = 2;ITPUB个人空间Y:c m5O!Crrm8A
}

运行一下看看效果如何,起始界面ITPUB个人空间B)uE,q]*fM/Z2HG2I
ITPUB个人空间0wqO%` i#a/\j
添加新元素aITPUB个人空间He1Z Zr]
ITPUB个人空间$hMd6a%[(v4i
单击改变矩形的背景颜色
E x` |H0
9^'?lNsE(wz`@`0

HtmlElement也提供了DetachEvent方法,可以取消注册事件。

结束语

本文简单介绍了如何在Silverlight中添加和移除DOM元素,以及为DOM元素添加、取消事件处理程序。

作者:TerryLee
4\i1cII^#u0出处:http://terrylee.cnblogs.com


^QK\;u&r"w0f0


TAG:

 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

Open Toolbar