Wiki

Trong Silverlight  bạn có thể tương tác một cách trựa tiếp với HTML DOM (Document Object Model). Điều này có thể được thực hiện nhờ vào đối tượng HtmlPage.Document object:

HtmlDocument doc = HtmlPage.Document;

Hãy chắc chắn là  đầu tiên bạn phải thêm vào  namespace sau:

using System.Windows.Browser;

Để minh họa điểm này, tôi sẽ dẫn bạn qua 1 demo mà sẽ thay đổi màu nền (background color) của trang HTML Page của bạn khi bạn click vào một button. Để tạo  demo này, hãy thực hiện theo các bước sau:

Bước 1. Tạo mới một ứng dụng  Silverlight Application sử dụng Visual Studio 2008.

Bước 2. Hãy mở trang Test page của bạn  (như là trang  SilverlightApplication1TestPage.aspx) và thay đổi thẻ DIV bao quanh đối tượng  Silverlight object  để có một ID và màu nền. Ngoài ra, gán giá trị cho thuộc tính  width  và height là  20% và  giá trị cho  Silverlight control của bạn là  width: 50% để   Silverlight control che phủ và đè lên toàn bộ nền của trang  HTML page:

<div id="myDIV"  style="background:blue;width:20%;height:20%">
    <asp:Silverlight ID="Xaml1" runat="server" 
        Source="~/ClientBin/SilverlightApplication27.xap" MinimumVersion="2.0.30930.0" 
        Width="50%" Height="100%" />
</div>

Bước 3. Trong trang  Page.xaml thêm một  button với một sự kiện  click event:

<UserControl x:Class="SilverlightApplication1.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

    Width="400" Height="300">

    <Canvas>

        <Button Click="Button_Click" Content="Change Colors"></Button>

    </Canvas>

</UserControl>

Bước  4. Trong trang  Page.xaml.cs và đoạn mã sau sẽ thay đổi màu nền của trang HTML Page của bạn . Bạn sẽ thấy là chúng ta:

1. Lấy  HTML Document cho trang web.
2. Lấy thẻ  DIV bằng  ID của nó .
3. Thiết lập thuộc tính style của thẻ DIV để thay đổi màu nền của nó từ màu xanh da trời thành màu xanh lá cây.

private void Button_Click(object sender, RoutedEventArgs e)

{

    HtmlDocument doc = HtmlPage.Document;

    HtmlElement div = doc.GetElementById("myDIV");

    div.SetStyleAttribute("background", "green");

}

Bước  5. Chạy ứng dụng. Màu nền của Silverlight control là trắng nơi mà màu nền của trang HTML là màu xanh da trời.

Screen shot trước khi  click:

Screen shot sau khi  click:

Thank you,
--Mike Snow