项目需求如下:
1.页面布局
最上方为搜索/网址框
中间为网页显示区,默认主页为百度搜索
最下方为功能栏,分别有后退,前进,窗口和更多功能
在更多功能中有
分享给好友
发送网址到桌面
查看历史记录等
2.搜索/网址框
用户在最上方的搜索/网址框中可以进行搜索或者输入网址
如果输入的网址则跳转到该网址
如果是文字内容,则对该文字进行百度搜索
用户点击输入时弹出url软键盘
回车进行搜索或者网址跳转
跳转之后软键盘关闭
在用户浏览网页时,搜索/网址框显示该网页的标题
当用户点击搜索/网址框进行操作时,显示该网页的网址
3.功能栏
点击后退前进分别实现对应的操作
点击窗口可以查看所有的窗口信息,并可以进行新增和删除浏览的窗口
新增窗口时,搜索/网址框显示当前网页的信息
删除窗口时,浏览的窗口自动跳到第一个
当窗口只有一个时无法进行删除窗口操作
窗口信息由网页的标题和网址组成
用户点击对应的窗口之后切换到该窗口显示浏览的网页
点击网页显示区时打开的窗口栏自动关闭
在更多功能总分别提供
分享给好友
发送网址到桌面
查看历史记录
三个功能
其中
用户点击发送给好友时弹出信息窗,并将对应的网页信息填入
点击发送网址到桌面时,在Windows Phone的主窗口中添加对应网址的快捷方式
点击历史记录时可以查看今天,昨天以及更久以前的浏览历史,在成功浏览网页的时候将该网页存入历史记录中
4.错误页导航
当网络连接失败或者网址出错时显示错误页导航
提供刷新和推荐网址
在程序开始编写之前 进行分析
由于浏览器具有多窗口的功能
所以在切换窗口的时候要显示不同的网页和网页的信息
所以将WebBrowser控件和TextBox控件封装成一个用户控件,取名为BrowserCtrl
在主界面通过一个ContentControl来放置给个BrowserCtrl
每次新建一个窗口就new一个BrowserCtrl,并将ContentControl切换为当前的BrowserCtrl
所以需要一个类来记录每一个BrowserCtrl的标题和url等信息
代码如下:
BrowserCtrl控件布局如下图:
并在后台xaml.cs文件中定义一个属性,提供访问本BrowserCtrl的相关信息
xml代码如下:
搜索/网址框
设置其软键盘打开的方式为Url,并为其添加KeyDown,GetFocus,LostFocus事件
浏览器控件:
默认js功能开启,设置其Navigated(页面跳转成功)和NavigationFailed(跳转失败)事件
由于浏览器控件不提供方法来获得当前浏览的页面的title
但是可以利用浏览器控件的InvokeScript方法来执行页面的js函数execScript来返回当前的document.title
当页面跳转失败的时候要跳转到错误页导航,但是在这里因为错误页还没有配置所以先做跳转成功的功能
这时,BrowserCtrl已经差不多完成了,只差一个跳转失败和跳转成功之后写入历史记录的功能
然后先进行主界面的编写
界面如图:
xml代码如下:
总体的布局大概为:
最上方是一个ContentControl用来放置浏览器控件
中间部分是一个Popup,点击窗口按钮时显示,里面放置了一个ListBox用来显示每一个窗口的信息,ListBox后面是一个新建窗口的按钮
最下方是ApplicationBar功能条
在点击功能条的窗口按钮时,会出现如下的界面
要求ListBox中显示每一个BrowserCtrl的信息,只要对BrowserCtrl对应的BrowserInfo集合进行数据绑定即可
同时要实现点击一个窗口信息就切换到改窗口,需要一个字典集合来记录每一个BrowserInfo对应的BrowserCtrl
并且当新增或者删除一个窗口时,功能栏的窗口按钮图标要显示为对应几个窗口的图标,所以需要对BrowserInfo集合的CollectionChanged事件进行处理
所以在后台xaml.cs中定义两个属性
在构造函数中:
在主界面刚被加载的时候,显示默认的主页
关闭窗口功能:
在ListBox中点击某一项切换到对应的窗体:
然后编写功能栏的后退,前进和窗口按钮功能
实现当前浏览的BrowserCtrl页面后退,前进功能最好的方式就是使用js实现
因此可以利用当前BrowserCtrl里面调用js函数的功能
所以需要定义一个属性记录当前正在浏览的BrowserCtrl
之后就可以调用ActivedBrowserCtrl的公有方法了
接下来就是更多功能的编写实现了
首先是通过短信将网页地址分享给好友功能
通过内置的SmsComposeTask可以轻易的实现这个功能
效果如下图:
发送到桌面:
这里使用的是一个别人写好的静态方法,如下:
通过该方法可以再主菜单上新增一个相应的快捷方式图标
这里需要注意的是,用户点击桌面的快捷方式,然后启动本浏览器,跳转到对应的url
实际上也是一个启动浏览器加载MainPage.xaml页面然后跳转的过程
所以将图标的url设置为"MainPage.xaml?url=" + url形式,先到主页面然后在跳转大哦哦url
所以需要在MainPage加载的时候判断是否有url参数
修正版:
历史记录:
用户点击历史记录,跳转到历史记录的xaml页面,可以显示今天,昨天以及更久之前的浏览历史
页面设计 如下:
页面布局如下:
大致布局为
三个枢轴分别为今天,昨天以及更久以前
每个枢轴项中都放置着一个ListBox,并且绑定ListBox的数据源,在ListBox的ItemTemplate中放置两个TextBlock并分别绑定数据源的Title和Url属性
这个时候很明显需要一个类的集合来当做ListBox的数据源
此时符合有Title和Url属性的类之后BrowserInfo,因此可以将其作为数据源的对象
但是由于对历史记录有很多操作,包括加载,添加,和保存等,而BrowserInfo主要的作用是保存当前浏览器的页面信息
另外,保存历史记录信息的类还需要有一个最后浏览时间的属性,用来判断该记录是今天还是昨天还是更久之前
所以需要另外一个类来完成历史记录的任务
同时添加一个HistoryManager工具类来实现对历史记录的操作
需要注意的是,历史记录的信息以xml形式保存在手机的独立存储中
格式如下:
HistoryManager中的公有操纵方法
在历史记录页面后台中的代码处理:
最后要完成的功能是错误页面导航
在项目中新建一个LocalPage文件夹用来保存错误页的htm
(因为用户链接出错的原因不仅仅是因为网址错误,还有可能是网络不好,所以要将错误页做成静态页放在本地中,这样不用联网也可以访问到,而真实的项目中都是定时定点从服务器请求最新的错误页面信息,这里只是将其写死在本地中)
ErrorPage.htm简单代码如下:
在浏览器控件中
最后,wp8简单的手机浏览器完成!