乱弹琴 Silverlight 2.0 (8) Silverlight与HTML Dom互操作

前言：Silverlight 2.0 Beta1 已经发布，加入了许多激动人心的新特性：WPF UI 框架、丰富的控件、丰富的网络支持、丰富的基础类库支持等。这是本人的学习笔记，写的比较乱，因此定名为乱弹琴 Silverlight 2.0 系列文章。

本篇介绍Silverlight与HTML Dom互操作。

上一篇列出了System.Windows.Browser命名空间的类型，其中类型的层次关系为：
HtmlPage
  HtmlWindow
    HtmlDocument
      HtmlElementCollection
        HtmlElement
这些类都是密封类，不可派生子类，都没有公共的构造方法。这个层次目前还很不完善，如Frame没有考虑进去，HtmlWindow还没有HtmlDocumnet属性等等。

Silverlight与HTML Dom互操作主要有：插入/移除元素、设置/获取属性、获取/设置样式、添加/移除事件等。

添加/移除元素
添加：
XAML:
<StackPanel Background="DarkGreen" Orientation="Horizontal">
    <WatermarkedTextBox x:Name="txtTag" Margin="30"
                        Watermark="请输入元素标签"
                        FontSize="16" Width="200"
                        Height="30" Background="Yellow"
                        Foreground="Red">            
    </WatermarkedTextBox>
    
    <Button x:Name="btnAdd" Width="100" Height="30"
            Content="Add" Click="btnAdd_Click">            
    </Button>
</StackPanel>
C#:
private void btnAdd_Click(object sender, RoutedEventArgs e)
{
    if (txtTag.Text != string.Empty)
    {
        HtmlElement he = HtmlPage.Document.CreateElement(txtTag.Text);

        HtmlPage.Document.GetElementById("div1").AppendChild(he);
    }
}

运行效果：




移除：
<StackPanel Background="DarkGreen" Orientation="Horizontal">
    <WatermarkedTextBox x:Name="txtID" Margin="30"
                        Watermark="请输入元素ID"
                        FontSize="16" Width="200"
                        Height="30" Background="Yellow"
                        Foreground="Red">            
    </WatermarkedTextBox>
    
    <Button x:Name="btnRemove" Width="100" Height="30"
            Content="Remove" Click="btnRemove_Click">      
    </Button>
</StackPanel>
C#:
private void btnRemove_Click(object sender, RoutedEventArgs e)
{
    if (txtID.Text != string.Empty)
    {
        HtmlElement he = HtmlPage.Document.GetElementById(txtID.Text);

        HtmlPage.Document.GetElementById("div1").RemoveChild(he);
    }
}
运行效果：




设置/获取属性

HTML:
<input id="btn" type="button" value="test" />
<form id="form1" runat="server" style="height: 100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
    <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/BrowserRelated.xap"
        Version="2.0" Width="400px" Height="200px" />
    <select id="slct" size="4" style="width: 200px; height: 200px">
    </select>
</div>

XAML：
<Grid Background="DarkGreen" ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>            
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"></ColumnDefinition>
        <ColumnDefinition Width="200"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <WatermarkedTextBox x:Name="txtAttribute"
                    Grid.Column="0" Grid.Row="0"
                    Watermark="请输入元素属性："
                    FontSize="16" Width="200"
                    Height="30" Background="Yellow"
                    Foreground="Red">
    </WatermarkedTextBox>
    <WatermarkedTextBox x:Name="txtValue"
                    Grid.Column="0" Grid.Row="1"
                    Watermark="元素属性值为："
                    FontSize="16" Width="200"
                    Height="30" Background="Yellow"
                    Foreground="Red">
    </WatermarkedTextBox>
    <Button x:Name="btnGet" Width="100" Height="30"
            Grid.Column="1" Grid.Row="0" Content="Get"
            Click="btnGet_Click">            
    </Button>
    <Button x:Name="btnSet" Width="100" Height="30"
            Grid.Column="1" Grid.Row="1" Content="Set"
            Click="btnSet_Click">            
    </Button>
</Grid>

C#:

HtmlElement heBtn = HtmlPage.Document.GetElementById("btn");
HtmlElement heListBox = HtmlPage.Document.GetElementById("slct");

public Page()
{
    InitializeComponent();
}

private void btnGet_Click(object sender, RoutedEventArgs e)
{
    if (txtAttribute.Text != string.Empty)
    {
        txtValue.Text = heBtn.GetAttribute(txtAttribute.Text);
        HtmlElement heOption = HtmlPage.Document.CreateElement("Option");
        heOption.SetAttribute("innerText", "Get Attribute:" +
            txtAttribute.Text + "-" + txtValue.Text);
        heListBox.AppendChild(heOption);
    }
}

private void btnSet_Click(object sender, RoutedEventArgs e)
{
    if (txtAttribute.Text != string.Empty && txtValue.Text != string.Empty)
    {
        heBtn.SetAttribute(txtAttribute.Text, txtValue.Text);
        HtmlElement heOption = HtmlPage.Document.CreateElement("Option");
        heOption.SetAttribute("innerText", "Set Attribute:" +
            txtAttribute.Text + "-" + txtValue.Text);
        heListBox.AppendChild(heOption);
    }
}

运行效果：


从效果图上可以看出，设置了width，无法取到，应该是测试版的bug。

获取/设置样式

同上面设置/获取属性用法一样，用HtmlElement.GetStyleAttribute和HtmlElement.SetStyleAttribute。
XAML:

<Grid Background="DarkGreen" ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"></ColumnDefinition>
        <ColumnDefinition Width="200"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <WatermarkedTextBox x:Name="txtStyle"
                Grid.Column="0" Grid.Row="0"
                Watermark="请输入元素样式："
                FontSize="16" Width="200"
                Height="30" Background="Yellow"
                Foreground="Red">
    </WatermarkedTextBox>
    <WatermarkedTextBox x:Name="txtValue"
                Grid.Column="0" Grid.Row="1"
                Watermark="元素样式值为："
                FontSize="16" Width="200"
                Height="30" Background="Yellow"
                Foreground="Red">
    </WatermarkedTextBox>
    <Button x:Name="btnGet" Width="100" Height="30"
        Grid.Column="1" Grid.Row="0" Content="Get"
        Click="btnGet_Click">
    </Button>
    <Button x:Name="btnSet" Width="100" Height="30"
        Grid.Column="1" Grid.Row="1" Content="Set"
        Click="btnSet_Click">
    </Button>
</Grid>

C#:

HtmlElement heBtn = HtmlPage.Document.GetElementById("btn");
HtmlElement heListBox = HtmlPage.Document.GetElementById("slct");

public Page()
{
    InitializeComponent();
}

private void btnGet_Click(object sender, RoutedEventArgs e)
{
    if (txtStyle.Text != string.Empty)
    {
        txtValue.Text = heBtn.GetStyleAttribute(txtStyle.Text);
        HtmlElement heOption = HtmlPage.Document.CreateElement("Option");
        heOption.SetAttribute("innerText", "Get Style:" +
            txtStyle.Text + "-" + txtValue.Text);
        heListBox.AppendChild(heOption);
    }
}

private void btnSet_Click(object sender, RoutedEventArgs e)
{
    if (txtStyle.Text != string.Empty && txtValue.Text != string.Empty)
    {
        heBtn.SetStyleAttribute(txtStyle.Text, txtValue.Text);

        HtmlElement heOption = HtmlPage.Document.CreateElement("Option");
        heOption.SetAttribute("innerText", "Set Style:" +
            txtStyle.Text + "-" + txtValue.Text);
        heListBox.AppendChild(heOption);
    }
}

运行效果：


添加/移除事件

XAML:

<Grid Background="DarkGreen" ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>            
    </Grid.RowDefinitions>            
    <Button x:Name="btnAdd" Width="100" Height="30"
            Grid.Column="0" Grid.Row="0" Content="Add Event"
            Click="btnAdd_Click">            
    </Button>
    <Button x:Name="btnRemove" Width="100" Height="30"
            Grid.Column="0" Grid.Row="1" Content="Remove Event"
            Click="btnRemove_Click">            
    </Button>
</Grid>

C#:

HtmlElement heBtn = HtmlPage.Document.GetElementById("btn");
HtmlElement heListBox = HtmlPage.Document.GetElementById("slct");

public Page()
{
    InitializeComponent();
}

private void btnRemove_Click(object sender, RoutedEventArgs e)
{
    HtmlElement heOption = HtmlPage.Document.CreateElement("Option");
    heOption.SetAttribute("innerText", "Detach Event!");
    heListBox.AppendChild(heOption);

    heBtn.DetachEvent("onclick", new EventHandler<HtmlEventArgs>(btn_Click));
}

private void btnAdd_Click(object sender, RoutedEventArgs e)
{
    HtmlElement heOption = HtmlPage.Document.CreateElement("Option");
    heOption.SetAttribute("innerText", "Attach Event!");
    heListBox.AppendChild(heOption);

    heBtn.AttachEvent("onclick", new EventHandler<HtmlEventArgs>(btn_Click));
}

public void btn_Click(object sender, HtmlEventArgs e)
{
    HtmlElement heOption = HtmlPage.Document.CreateElement("Option");
    heOption.SetAttribute("innerText", "I'm added by btn");
    heListBox.AppendChild(heOption);
}

运行效果：


结束语：

本篇介绍了SL与HTML Dom互操作，下一篇介绍Silverlight调用Javascript。