Silverlight 4新功能: Host HTML Content.
这个新功能挺不错的,可惜的是它只能是你把SilverLight应用程序安装到客户端才能使用,不明白为什么SilverLight Toolkit团队不让它能够在浏览器中也可以用。
看了段视频,它主要是讲了三个应用,其它还有很多使用这个功能的方法你可以试着在下面给我留言,大家一起学习。
首先是创建一个SL 4的应用程序,起名字为HostHTMLContent;如下图:
然后在MainPage.xaml页面的根Grid下添加一个StackPanel,居中显示,接着是在StackPanel中放一个Grid来显示HTML Content,这个Grid定义为4行两列:
<Grid x:Name="LayoutRoot" Background="Gray">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="ControlSamples">
<Grid Width="600">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="520*"/>
<ColumnDefinition Width="80"/>
</Grid.ColumnDefinitions>
</Grid>
</StackPanel>
</Grid>
1. 显示一个html页面:
在上面定义好的Grid中添加一个Textbox用来输入你要显示的html页面的url,加上一个button,点击button时把这个页面显示在WebBrowser中:
<TextBox x:Name="UrlNavigator" Width="520" FontSize="12" Height="26" Grid.Row="0" Grid.Column="0"></TextBox>
<Button Content="Show HTML" x:Name="UrlButton" Width="75" Height="26" Grid.Row="0" Grid.Column="1" FontSize="12" Foreground="Orange"></Button>
<StackPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2">
<WebBrowser x:Name="HtmlContent" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Height="600" Width="800" Visibility="Collapsed" />
<Rectangle Width="600" Height="400">
<Rectangle.Fill>
<WebBrowserBrush x:Name="HBrush" SourceName="HtmlContent" />
</Rectangle.Fill>
</Rectangle>
</StackPanel>
为Button添加事件:
private void UrlButton_Click(object sender, RoutedEventArgs e)
{
HtmlContent.Navigate(new Uri(App.Current.Host.Source, UrlNavigator.Text));
HBrush.Redraw();
}
然后我们在.Web项目中添加一个测试的HTML。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>This is a Host HTML Content page</title>
</head>
<body>
<div style="float:left;width:300px;height:100px;background:red;color:White">This DIV will be left--------------></div>
<div style="float:left;width:300px;height:100px;background:Green;color:White"><-----This DID will be right</div>
</body>
</html>
直接运行项目,并安装到本地。
2. 显示优酷网站的一个视频或者是网页
首先给大家介绍下如何显示是网页或者是一段HTML代码:
在上面的代码基础上,在UrlButton下面添加一个textbox和一个button,
<TextBox x:Name="ContentNavigator" Width="520" FontSize="12" Height="26" Grid.Row="1" Grid.Column="0"></TextBox>
<Button Click="ContentButton_Click" Content="Show Video" x:Name="ContentButton" Width="75" Height="26" Grid.Row="1" Grid.Column="1" FontSize="12" Foreground="GreenYellow"></Button>
事件代码:
HtmlContent.NavigateToString(ContentNavigator.Text);
HBrush.Redraw();
编译后重新安装程序到本地,在刚创建好的textbox中输入一段字符串,或者是输入一个DIV,或者是使用iframe来显示一个网站或者一段视频,
你如果你不在天朝,或是翻墙,也可以看YouTube:
桌面Google:
3. 作为RSS Reader的功能。
代码:
private void RssButton_Click(object sender, RoutedEventArgs e)
{
WebClient proxy = new WebClient();
proxy.OpenReadCompleted += new OpenReadCompletedEventHandler(proxy_OpenReadCompleted);
proxy.OpenReadAsync(new Uri(RssNavigator.Text));
}
void proxy_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
if (e.Error == null)
{
XmlReader rdr = XmlReader.Create(e.Result);
SyndicationFeed feed = SyndicationFeed.Load(rdr);
StringBuilder sb = new StringBuilder();
foreach (var item in feed.Items)
{
sb.Append(item.Title.Text);
sb.Append("<br/>");
sb.Append(item.Summary.Text);
sb.Append("<hr/>");
}
HtmlContent.NavigateToString(sb.ToString());
HBrush.Redraw();
}
}
加个Border比较好看: