Silverlight实用窍门系列：33.OOB模式下WebBrowser的简单应用--模拟浏览器和百度地图【附带源码实例】
Silverlight的OOB模式(out-of-browser)下可以提升用户操作权限，访问系统API、将Silverlight程序安装在本地计算机上面而不必再浏览器中运行，在本节将讲诉一个只能应用于OOB模式下的WebBrowser控件的简单应用。
首先创建一个新的Silverlight应用程序名为SLBrowser并且设置其运行在OOB模式下，鼠标右键点击SLBrowser项目，选择“属性”。在属性页的“Silverlight”栏下面我们在“允许在浏览器外运行应用程序”打钩。
然后点击“浏览器外设置”按钮，设置窗口的样式，另外在最下面有一个“在浏览器外运行时需要提升的信任”按钮就是提升用户操作权限的。
我们准备两个按钮“百度地图”、“浏览”，分别模拟一下两个功能：
•点击“百度地图”按钮的时候直接加载本地的Html文件访问百度地图
•点击“浏览”按钮的时候就将模拟一个浏览器，进入浏览器页面
下面我们来看Xaml代码：
< Grid x:Name = " LayoutRoot " Background = " White " >
< TextBlock Height = " 23 " HorizontalAlignment = " Left " Margin = " 29,12,0,0 " Name = " textBlock1 " Text = " 查询地址： " VerticalAlignment = " Top " />
< TextBox Height = " 23 " HorizontalAlignment = " Right " Margin = " 0,8,207,0 " Name = " textBox1 " VerticalAlignment = " Top " Width = " 703 " />
< Button Content = " 百度地图 " Height = " 23 " HorizontalAlignment = " Left " Margin = " 804,8,0,0 " Name = " button1 " VerticalAlignment = " Top " Width = " 78 " Click = " button1_Click " />
< WebBrowser Height = " 638 " HorizontalAlignment = " Left " Margin = " 21,41,0,0 " Name = " webBrowser1 " VerticalAlignment = " Top " Width = " 953 " />
< Button Content = " 浏 览 " Height = " 23 " HorizontalAlignment = " Right " Margin = " 0,8,32,0 " Name = " button2 " VerticalAlignment = " Top " Width = " 77 " Click = " button2_Click_1 " />
</ Grid >
下面我们来看CS代码如下（注意：WebBrowser控件的InvokeScript可以调用载入的html文件中的javascript函数）：
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
// webBrowser1加载本地的baiduMap.html页面
this .webBrowser1.Navigate( new Uri(Application.Current.Host.Source, " baiduMap.html " ))
}
private void button1_Click( object sender, RoutedEventArgs e)
{
// 调用加载的百度地图baiduMap.html内的BaiduSearch函数，并且传入值
this .webBrowser1.InvokeScript( " BaiduSearch " , this .textBox1.Text);
}
private void button2_Click_1( object sender, RoutedEventArgs e)
{
try
{
// 获取Uri地址，并且让webBrowser1载入该地址
string url = this .textBox1.Text.Trim().Replace( " http:// " , "" );
this .webBrowser1.Navigate( new Uri( " http:// " + url , UriKind.RelativeOrAbsolute));
// 当访问了网页之后设置隐藏百度地图搜索按钮
this .button1.Visibility = Visibility.Collapsed;
textBox1.Margin = new Thickness( 0 , 8 , 118 , 0 );
textBox1.Width = 792 ;
}
catch (Exception ex)
{
MessageBox.Show( " 请输入一个有效的网址 " );
}
}
}
准备一个BaiduMap.html以供WebBrowser控件调用链接到百度地图（注意这个文件请放到SLBrowser.Web项目下的ClientBin文件夹下面），代码如下：
<! 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 >
< meta http - equiv = " Content-Type " content = " text/html; charset=gb2312 " />
< title > 百度地图实例 </ title >
< script type = " text/javascript " src = " http://api.map.baidu.com/api?key=d3501091615b31a7a3af15a29e6d7363&v=1.0&services=true " ></ script >
</ head >
< body style = " font-size: 12px; " >
< form id = " form1 " name = " form1 " method = " post " action = "" >
< div style = " width: 100%; height: 600px; border: 1px solid gray; " id = " container " >
</ div >
< script type = " text/javascript " >
var map = new BMap.Map( " container " );
var point = new BMap.Point( 116.404 , 39.915 ); // 地图坐标
var keyWord = " 北京 " ;
map.centerAndZoom(point, 13 ); // 深度
map.enableScrollWheelZoom(); // 通过鼠标中间可放大缩小
// 增加放大缩小控件
map.addControl( new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_SMALL }));
// 声明一个搜索对象
var local = new BMap.LocalSearch(map, {
renderOptions: { map: map }
});
// 封装一个搜索函数供Silverlight调用
function BaiduSearch(keyWord) {
local.search(keyWord);
}
</ script >
</ form >
</ body >
</ html >
本源码使用VS2010+Silverlight 4.0编写，如需源码请点击SLBrowser.zip 下载。下面是加载百度地图和浏览器的效果图。
