稳扎稳打Silverlight(43) - 4.0控件之WebBrowser, WebBrowserBrush

[源码下载]

稳扎稳打Silverlight(43) - 4.0控件之WebBrowser, WebBrowserBrush

作者： webabcd


介绍
Silverlight 4.0 控件一览：

• WebBrowser - 在 Silverlight 应用程序中显示 HTML 内容（只能在 OOB 模式下运行）
• WebBrowserBrush - 一个 WebBrowser 类型的画笔（只能在 OOB 模式下运行） 

在线DEMO
http://www.cnblogs.com/webabcd/archive/2010/08/09/1795417.html


示例
 1、Viewbox 的 Demo
WebBrowserDemo.xaml

代码

< navigation:Page  x:Class ="Silverlight40.Control.WebBrowserDemo"  
           xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
           xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"  
           xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           Title ="WebBrowserDemo Page" >
     < Grid  x:Name ="LayoutRoot" >
         < StackPanel  HorizontalAlignment ="Left" >

             < Button  Name ="btnOutOfBrowser"  Click ="btnOutOfBrowser_Click"   />

             < Button  Name ="btnSource"  Content ="Source 属性"  Click ="btnSource_Click"   />

             < Button  Name ="btnNavigate"  Content ="Navigate 方法"  Click ="btnNavigate_Click"   />

             < Button  Name ="btnNavigateToString"  Content ="NavigateToString 方法"  Click ="btnNavigateToString_Click"   />

             < Button  Name ="btnScript"  Content ="与 WebBrowser 中的脚本交互"  Click ="btnScript_Click"   />

             < WebBrowser  Name ="webBrowser"  Width ="400"  Height ="300"  ScriptNotify ="webBrowser_ScriptNotify"  LoadCompleted ="webBrowser_LoadCompleted"   />

         </ StackPanel >
     </ Grid >
</ navigation:Page >

WebBrowserDemo.xaml.cs

代码

/*
 * WebBrowser - 在 Silverlight 应用程序中显示 HTML 内容（只能在 OOB 模式下运行）
 *     Source - 将指定的 URI 中的 HTML 内容显示在 WebBrowser 中
 *     Navigate() - 加载指定的 URI 中的 HTML 内容到 WebBrowser 中
 *     NavigateToString() - 显示指定的 HTML 内容
 *     SaveToString() - 获取当前 WebBrowser 所显示的 HTML 内容，返回一个字符串类型（不能跨域）
 *     InvokeScript() - 调用当前 WebBrowser 所加载的 HTML 内容中的 JavaScript 脚本（不能跨域）
 *     ScriptNotify - 当 WebBrowser 内的 JavaScript 以 “window.external.notify(string);” 的方式发送信息到 Silverlight 程序中时所触发的事件（不能跨域）
 *         NotifyEventArgs - ScriptNotify 事件的事件参数
 *         NotifyEventArgs.Value - JavaScript 发送到 Silverlight 程序中的信息。即 “window.external.notify(string);” 中的字符串
  */

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Net;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;
using  System.Windows.Navigation;

namespace  Silverlight40.Control
{
     public   partial   class  WebBrowserDemo : Page
    {
         public  WebBrowserDemo()
        {
            InitializeComponent();
        }

         protected   override   void  OnNavigatedTo(NavigationEventArgs e)
        {
             if  (App.Current.IsRunningOutOfBrowser)
                btnOutOfBrowser.Content  =   " 卸载 " ;
             else
                btnOutOfBrowser.Content  =   " 安装 " ;
        }

         private   void  btnOutOfBrowser_Click( object  sender, RoutedEventArgs e)
        {
             if  ( ! App.Current.IsRunningOutOfBrowser  &&  App.Current.InstallState  ==  InstallState.NotInstalled)
                App.Current.Install();
             else
                MessageBox.Show( " 已经安装，使用右键卸载 " );
        }


         private   void  btnSource_Click( object  sender, RoutedEventArgs e)
        {
            webBrowser.Source  =   new  Uri( " http://webabcd.cnblogs.com " );
        }

         private   void  btnNavigate_Click( object  sender, RoutedEventArgs e)
        {
            webBrowser.Navigate( new  Uri( " http://www.cnblogs.com/webabcd/archive/2007/02/24/655035.html " ));
        }

         private   void  btnNavigateToString_Click( object  sender, RoutedEventArgs e)
        {
            webBrowser.NavigateToString( " <div style='color: red'>webabcd</div> " );
        }

         private   void  btnScript_Click( object  sender, RoutedEventArgs e)
        {
            webBrowser.Navigate( new  Uri( " http://localhost:9483/Silverlight40TestPage.html " ));
        }

         private   void  webBrowser_ScriptNotify( object  sender, NotifyEventArgs e)
        {
             //  获取 WebBrowser 中的 HTML 内所包含的 JavaScript 发给 Silverlight 程序的信息
            MessageBox.Show(e.Value);

             //  调用 WebBrowser 中的 HTML 内所包含的 JavaScript 函数
            MessageBox.Show(( string )webBrowser.InvokeScript( " hello " ,  " webabcd " ));   
        }

         private   void  webBrowser_LoadCompleted( object  sender, NavigationEventArgs e)
        {
             try
            {
                 string  html  =  webBrowser.SaveToString();
                MessageBox.Show(html);
            }
             catch  (System.Security.SecurityException se)
            {
                MessageBox.Show(se.Message);
            }
        }
    }
}

相关的 JavaScript 部分
Silverlight40TestPage.html

代码

     < script type = " text/javascript " >

         //  此函数用于：Silverlight 程序调用 WebBrowser 所加载的 HTML 内容中的 JavaScript 函数
         function  hello(name) {
             return   " hello:  "   +  name;
        }

         //  此方法用于：在 WebBrowser 所加载的 HTML 内容中用 JavaScript 向 Silverlight 程序发送信息
         try  {
            window.external.notify( ' window.external.notify to silverlight ' );
        }  catch  (err) { } 
    
     < / script>

2、WebBrowserBrush 的 Demo
WebBrowserBrushDemo.xaml

代码

< navigation:Page  x:Class ="Silverlight40.Control.WebBrowserBrushDemo"  
           xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
           xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"  
           xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           Title ="WebBrowserBrushDemo Page" >
     < Grid  x:Name ="LayoutRoot"  MouseMove ="LayoutRoot_MouseMove" >
         < StackPanel  HorizontalAlignment ="Left" >

             < Button  Name ="btnOutOfBrowser"  Click ="btnOutOfBrowser_Click"   />

             < WebBrowser  Name ="webBrowser"  Width ="200"  Height ="150"  Source ="http://webabcd.cnblogs.com"   />

             <!--
                演示在 Rectangle.Fill 中使用 WebBrowserBrush
             -->
             < Rectangle  Width ="200"  Height ="150"  HorizontalAlignment ="Left" >
                 < Rectangle.Fill >
                     < WebBrowserBrush  x:Name ="webBrowserBrushRectangle"  SourceName ="webBrowser"  Opacity ="0.7" >
                         < WebBrowserBrush.Transform >
                             < ScaleTransform  ScaleX ="2"  ScaleY ="2"   />
                         </ WebBrowserBrush.Transform >
                     </ WebBrowserBrush >
                 </ Rectangle.Fill >
             </ Rectangle >

             <!--
                演示在 Canvas.Background 中使用 WebBrowserBrush
             -->
             < Canvas  Width ="200"  Height ="150"  HorizontalAlignment ="Left" >
                 < Canvas.Background >
                     < WebBrowserBrush  x:Name ="webBrowserBrushCanvas"  SourceName ="webBrowser"  Opacity ="0.7"   />
                 </ Canvas.Background >
                 < Grid  Width ="200"  Height ="150" >
                     < TextBlock  Text ="我是在 Canvas 里的 TextBlock"  HorizontalAlignment ="Center"  VerticalAlignment ="Center"   />
                 </ Grid >
             </ Canvas >

             <!--
                演示在 Path.Fill 中使用 WebBrowserBrush
             -->
             < Path  StrokeThickness ="10"  Stroke ="Red" >
                 < Path.Data >
                     < EllipseGeometry  Center ="100,75"  RadiusX ="100"  RadiusY ="75"   />
                 </ Path.Data >
                 < Path.Fill >
                     < WebBrowserBrush  x:Name ="webBrowserBrushPath"  SourceName ="webBrowser"  Opacity ="0.7"   />
                 </ Path.Fill >
             </ Path >

         </ StackPanel >
     </ Grid >
</ navigation:Page >

WebBrowserBrushDemo.xaml.cs

代码

/*
 * WebBrowserBrush - 一个 WebBrowser 类型的画笔（只能在 OOB 模式下运行）
 *     SourceName - 为此画笔提供 HTML 内容的 WebBrowser
 *     Redraw() - 重绘画笔。当 WebBrowser 所加载内容更改时，需要调用此方法
  */

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Net;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;
using  System.Windows.Navigation;

namespace  Silverlight40.Control
{
     public   partial   class  WebBrowserBrushDemo : Page
    {
         public  WebBrowserBrushDemo()
        {
            InitializeComponent();
        }

         protected   override   void  OnNavigatedTo(NavigationEventArgs e)
        {
             if  (App.Current.IsRunningOutOfBrowser)
                btnOutOfBrowser.Content  =   " 卸载 " ;
             else
                btnOutOfBrowser.Content  =   " 安装 " ;
        }

         private   void  btnOutOfBrowser_Click( object  sender, RoutedEventArgs e)
        {
             if  ( ! App.Current.IsRunningOutOfBrowser  &&  App.Current.InstallState  ==  InstallState.NotInstalled)
                App.Current.Install();
             else
                MessageBox.Show( " 已经安装，使用右键卸载 " );
        }


         private   void  LayoutRoot_MouseMove( object  sender, MouseEventArgs e)
        {
            webBrowserBrushRectangle.Redraw();
            webBrowserBrushCanvas.Redraw();
            webBrowserBrushPath.Redraw();
        }
    }
}

OK
[源码下载]

<script type="text/javascript"> if ($ != jQuery) { $ = jQuery.noConflict(); } </script>