Silverlight 4 的Host HTML功能介绍

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比较好看:

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值