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 下载。下面是加载百度地图和浏览器的效果图。
