收藏
下载资源下载资源 加入VIP,免费下载

一步一步学Silverlight 2系列20.docx

上传人：b****7 文档编号：23570226 上传时间：2023-05-18 格式：DOCX 页数：12 大小：689.82KB
下载 相关 举报
一步一步学Silverlight 2系列20.docx_第1页
第1页 / 共12页
一步一步学Silverlight 2系列20.docx_第2页
第2页 / 共12页
一步一步学Silverlight 2系列20.docx_第3页
第3页 / 共12页
一步一步学Silverlight 2系列20.docx_第4页
第4页 / 共12页
一步一步学Silverlight 2系列20.docx_第5页
第5页 / 共12页
点击查看更多>>
下载资源
资源描述

一步一步学Silverlight 2系列20.docx

《一步一步学Silverlight 2系列20.docx》由会员分享，可在线阅读，更多相关《一步一步学Silverlight 2系列20.docx（12页珍藏版）》请在冰豆网上搜索。

一步一步学Silverlight 2系列20.docx

一步一步学Silverlight2系列20

一步一步学Silverlight2系列（20）：

如何在Silverlight中与HTMLDOM交互（下）

概述

Silverlight2Beta1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言VisualBasic,VisualC#,IronRuby,Ironpython，对JSON、WebService、WCF以及Sockets的支持等一系列新的特性。

《一步一步学Silverlight2系列》文章将从Silverlight2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Silverlight2开发。

Silverlight中内置了对于HTML、客户端脚本等的支持，本文为如何在Silverlight2中与HTMLDOM交互第二部分。

在第一部分中主要介绍了如何访问和修改已有的HTMLDOM，我们还可以完全创建一个新的DOM元素或者移除一个已有的DOM元素，除此之外，我们还可以为DOM元素添加事件处理。

创建DOM元素

首先我们来看如何创建一个新的DOM元素，最终的效果如下，当我们在文本框中输入文字后，单击创建，将在上面的区域中创建一个li元素。

 

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

200px;">

SilverlightID="Xaml1"runat="server"

Source="~/ClientBin/TerryLee.SilverlightAccessDom2.xap"

Version="2.0"Width="100%"Height="200px"/>

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

#parentdiv

{

background:

#FCDFB3;

border:

solid1px#FF9900;

width:

500px;

height:

100px;

margin-bottom:

20px;

}

在Silverlight中进行界面布局，XAML如下：

Canvas.Top="10"Canvas.Left="30"FontSize="18">

Name="input"Watermark="请在这里输入"

Height="40"Width="300"

Canvas.Left="30"Canvas.Top="50">

Name="createButton"Background="Red"

Height="40"Width="100"Content="创建"

Canvas.Top="50"Canvas.Left="350"

Click="createButton_Click">

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

HtmlElementparent=HtmlPage.Document.GetElementById（"list"）;

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

HtmlElementchild=HtmlPage.Document.CreateElement（"li"）;

child.SetAttribute（"innerText",this.input.Text）;

添加新元素到parent中

parent.AppendChild（child）;

完整的代码如下：

privatevoidcreateButton_Click（objectsender,RoutedEventArgse）

{

HtmlElementparent=HtmlPage.Document.GetElementById（"list"）;

HtmlElementchild=HtmlPage.Document.CreateElement（"li"）;

child.SetAttribute（"innerText",this.input.Text）;

parent.AppendChild（child）;

}

运行后创建第一个元素

再次创建一个

 

移除DOM元素

既然可以创建元素，对应的也可以删除元素，我们在页面上放上几个

  • 元素，然后输入id进行删除。

    代码如下：

    privatevoiddeleteButton_Click（objectsender,RoutedEventArgse）

    {

    HtmlElementparent=HtmlPage.Document.GetElementById（"list"）;

    HtmlElementchild=HtmlPage.Document.GetElementById（this.input.Text）;

    parent.RemoveChild（child）;

    }

    运行后界面上有三个

  • 删除其中一个

    为DOM注册事件

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

    先准备相关的HTML。

    200px;">

    SilverlightID="Xaml1"runat="server"

    Source="~/ClientBin/TerryLee.SilverlightAccessingDom3.xap"

    Version="2.0"Width="100%"Height="200px"/>

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

    #parent

    {

    background:

    #FCDFB3;

    border:

    solid1px#FF9900;

    width:

    500px;

    height:

    100px;

    margin-bottom:

    20px;

    }

    .newstyle

    {

    background:

    #0099FF;

    border:

    solid1px#0000FF;

    }

    做一个简单的界面，放置一个按钮和矩形：

    Canvas.Top="10"Canvas.Left="30"FontSize="18">

    Name="result"Height="40"Width="300"Fill="Red"

    Canvas.Left="30"Canvas.Top="50"

    RadiusX="5"RadiusY="5">

    Name="addButton"Background="Red"

    Height="40"Width="100"Content="添加"

    Canvas.Top="50"Canvas.Left="350"

    Click="addButton_Click">

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

    HtmlElementparent=HtmlPage.Document.GetElementById（"parent"）;

    HtmlElementbutton=HtmlPage.Document.CreateElement（"a"）;

    button.SetAttribute（"innerText","改变Silverlight中的颜色"）;

    button.SetAttribute（"href","#"）;

    button.CssClass="newstyle";

    parent.AppendChild（button）;

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

    button.AttachEvent（"onclick",newEventHandler（button_Click））;

    voidbutton_Click（objectsender,HtmlEventArgse）

    {

    result.Stroke=newSolidColorBrush（Colors.Black）;

    result.Fill=newSolidColorBrush（Colors.Green）;

    result.StrokeThickness=2;

    }

    完整的代码如下：

    privatevoidaddButton_Click（objectsender,RoutedEventArgse）

    {

    HtmlElementparent=HtmlPage.Document.GetElementById（"parent"）;

    HtmlElementbutton=HtmlPage.Document.CreateElement（"a"）;

    button.SetAttribute（"innerText","改变Silverlight中的颜色"）;

    button.SetAttribute（"href","#"）;

    button.CssClass="newstyle";

    parent.AppendChild（button）;

    button.AttachEvent（"onclick",newEventHandler（button_Click））;

    }

    voidbutton_Click（objectsender,HtmlEventArgse）

    {

    result.Stroke=newSolidColorBrush（Colors.Black）;

    result.Fill=newSolidColorBrush（Colors.Green）;

    result.StrokeThickness=2;

    }

    运行一下看看效果如何，起始界面

    添加新元素a

    单击改变矩形的背景颜色

     

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

    结束语

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

    下一篇：

    一步一步学Silverlight2系列（21）：

    如何在Silverlight中调用JavaScript

    作者：

    TerryLee

    出处：

    本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

    Tag标签:

    Silverlight

    posted@2008-03-1119:

    00TerryLee阅读（7179）评论（30） 编辑收藏网摘所属分类:

    [03]  银光点亮世界

    展开阅读全文
    猜你喜欢
    相关搜索

    当前位置：首页 > 高等教育 > 理学

    • copyright@ 2008-2022 冰豆网网站版权所有

    经营许可证编号:鄂ICP备2022015515号-1