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);
}