在Silverlight中与HTML DOM交互

在Silverlight中与HTML DOM交互

 

1.       调用页面的前台代码如下:

  <form id="form1" runat="server" style="height: 100%;">

    <div id="div1">

        这里是第一个div，id为div1</div>

    <div id="div2">

        这里是第二个div，id为div2</div>

    <div id="parentdiv">

        <ul id="list">

             

        </ul>

    </div>

    <div id="silverlightControlHost">

        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"

            width="100%" height="200px">

            <param name="source" value="ClientBin/Binglang.SilverlightDemo14.xap" />

            <param name="onerror" value="onSilverlightError" />

            <param name="background" value="white" />

            <param name="minRuntimeVersion" value="3.0.40624.0" />

            <param name="autoUpgrade" value="true" />

            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration: none;">

                <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="获取 Microsoft Silverlight"

                    style="border-style: none" />

            </a>

        </object>

        <iframe id="_sl_historyFrame" style='visibility: hidden; height: 0; width: 0; border: 0px'>

        </iframe>

    </div>

</form>

 

2.实现SilverLight

前台代码：
<Canvas x:Name="LayoutRoot" Background="#D5FCDF">

        <TextBlock Text="Silverlight Accessing the HTML DOM" Foreground="Red"

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

        </TextBlock>

        <TextBox x:Name="input" Text="在这里输入"

                        Height="40" Width="300"

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

        </TextBox>

        <TextBox x:Name="result" Text="这里显示结果"

                        Height="40" Width="300"

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

        </TextBox>

        <Button x:Name="displayButton" Background="Red"

            Height="40" Width="130" Content="读取html元素的属性并显示"

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

            Click="displayButton_Click">

        </Button>

        <Button x:Name="setButton" Background="Red"

            Height="40" Width="130" Content="设置html元素的属性"

            Canvas.Top="100" Canvas.Left="350"

            Click="setButton_Click">

        </Button>

 

        <Button x:Name="createButton" Background="Red"

            Height="40" Width="130" Content="创建一个html元素"

            Canvas.Top="50" Canvas.Left="500"

            Click="createButton_Click">

        </Button>

       

        <Button x:Name="deleteButton" Background="Red"

            Height="40" Width="130" Content="删除一个html元素"

            Canvas.Top="100" Canvas.Left="500"

            Click="deleteButton_Click">

        </Button>

 

        <Button x:Name="addButton" Background="Red"

            Height="40" Width="160" Content="创建一个带事件的html元素"

            Canvas.Top="50" Canvas.Left="650"

            Click="addButton_Click">

        </Button>

 

    </Canvas>

 

后台代码：

  //读取

        private void displayButton_Click(object sender, RoutedEventArgs e)

        {

            HtmlElement element = HtmlPage.Document.GetElementById(this.input.Text);

            this.result.Text = element.GetAttribute("innerText");

        }

 

        //设置

        private void setButton_Click(object sender, RoutedEventArgs e)

        {

            //示例1

            HtmlElement element = HtmlPage.Document.GetElementById(this.input.Text);

            element.SetAttribute("innerText", this.result.Text);

 

            示例2

            //HtmlElement element = HtmlPage.Document.GetElementById(this.input.Text);

            //element.SetStyleAttribute("width", this.result.Text);

            //element.SetStyleAttribute("height", this.result.Text);

 

        }

        //创建

        private void createButton_Click(object sender, RoutedEventArgs e)

        {

            HtmlElement parent = HtmlPage.Document.GetElementById("list");

 

            HtmlElement child = HtmlPage.Document.CreateElement("li");

            child.SetAttribute("id", "li"+(parent.Children.Count+1).ToString());

            child.SetAttribute("innerText", this.input.Text);

 

            parent.AppendChild(child);

 

        }

        //删除

        private void deleteButton_Click(object sender, RoutedEventArgs e)

        {

            HtmlElement parent = HtmlPage.Document.GetElementById("list");

 

            HtmlElement child = HtmlPage.Document.GetElementById(this.input.Text);

 

            parent.RemoveChild(child);

 

 

        }

 

        //创建一个带事件的html元素

        private void addButton_Click(object sender, RoutedEventArgs e)

        {

            HtmlElement parent = HtmlPage.Document.GetElementById("parentdiv");

 

            HtmlElement button = HtmlPage.Document.CreateElement("a");

            button.SetAttribute("innerText", "改变Silverlight中的颜色");

            button.SetAttribute("href", "#");

            button.CssClass = "newstyle";

 

            parent.AppendChild(button);

 

            button.AttachEvent("onclick", new EventHandler<HtmlEventArgs>(button_Click));

        }

 

        void button_Click(object sender, HtmlEventArgs e)

        {

            result.BorderBrush = new SolidColorBrush(Colors.Black);

            result.Background = new SolidColorBrush(Colors.Green);

           

        }