【WP8】为Webbrowser添加ScrollBar

在WP8中，控件WebBrowser没有提供对滚动条的支持，而在内置的IE中，却可以显示出滚动条（微软这是在坑我们吗），但如果在客户端使用Webbrowser的话，自己构造ScrollBar来显示

　　通过javascript监听onscroll事件，然后传递给Webbrowser，通过onscroll的位置来确定自定义的ScrollBar的位置

下面演示方法：

1、在Html代码中添加javascript代码

function initialize() {

    window.external.notify("scrollHeight=" + document.body.scrollHeight.toString());

    window.external.notify("clientHeight=" + document.body.clientHeight.toString());

    window.onscroll = onScroll;

}

function onScroll(e) {

    var scrollPosition = document.body.scrollTop;

    window.external.notify("scrollTop=" + scrollPosition.toString());

}

window.onload = initialize;

2、在xaml中定义控件

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <phone:WebBrowser x:Name="ContentWebBrowser" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"IsScriptEnabled="True" ScriptNotify="ContentWebBrowser_ScriptNotify"/>

            <ScrollBar x:Name="DisplayScrollBar" Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Stretch" Minimum="0" Maximum="100" Value="0"/>

        </Grid>

3、在Webbrowser添加 ScriptNotify 事件方法（注意：需要将Webbrowser的IsScriptEnabled属性设为True）

        private void ContentWebBrowser_ScriptNotify(object sender, NotifyEventArgs e)

        {

            var parts = e.Value.Split('=');

            if (parts.Length != ) return;    

            var number = ;

            if (!int.TryParse(parts[], out number)) return;

            switch (parts[])

            {

                case "scrollHeight":

                    _scrollHeight = number;

                    if (_visibleHeight > )

                    {

                        DisplayScrollBar.Maximum = _scrollHeight - _visibleHeight;

                    }

                    break;

                case "clientHeight":

                    _visibleHeight = number;

                    if (_scrollHeight > )

                    {

                        DisplayScrollBar.Maximum = _scrollHeight - _visibleHeight;

                    }

                    break;

                case "scrollTop":

                    DisplayScrollBar.Value = number;

                    break;

            }

        }

3、测试

　　1）、定义一个WebBrowserHelper生成Html代码

    public class WebBrowserHelper

    {

        public static string NotifyScript

        {

            get

            {

                return @"<script>

                    window.onload = function(){

                        initialize();

                    }

                    function initialize() {

                        window.external.notify('scrollHeight=' + document.body.scrollHeight.toString());

                        window.external.notify('clientHeight=' + document.body.clientHeight.toString());

                        //window.onscroll = onScroll;

                    }

                    function onScroll(e) {

                        var scrollPosition = document.body.scrollTop;

                        window.external.notify('scrollTop=' + scrollPosition.toString());

                    }

                    </script>";

            }

        }

        public static string WrapHtml(string bodyContent, double viewportWidth)

        {

            var html = new StringBuilder();

            html.Append("<html>");

            html.Append(HtmlHeader(viewportWidth));

            html.Append("<body>");

            html.Append(bodyContent);

            html.Append("</body>");

            html.Append(NotifyScript);

            html.Append("</html>");

            return html.ToString();

        }

        public static string HtmlHeader(double viewportWidth)

        {

            var head = new StringBuilder();

            head.Append("<head>");

            head.Append(string.Format("<meta name=\"viewport\" value=\"width={0}\" user-scalable=\"no\" />",

                                      viewportWidth));

            head.Append("</head>");

            return head.ToString();

        }

    }

　　2）传入HTML运行

var html = WebBrowserHelper.WrapHtml(

                    @"<div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>

                    <div>123</div><div>123</div><div>123</div><div>123</div><div>123</div>", ContentWebBrowser.Width);

            ContentWebBrowser.NavigateToString(html);

测试成功。

参考：http://www.mistergoodcat.com/post/Somethings-Missing-from-the-WebBrowser-Control

【WP8】为Webbrowser添加ScrollBar的更多相关文章

【WP8】WebBrowser相关
2014年09月02日更新今天用了一下WebBrowser,在使用过程中也遇到了一些问题,在这里做一下记录虽然WebBrowser比较重,会比较影响性能(除非一定要用到它,否则尽量少用),但有时候 ...
【WP8.1】WebView笔记
之前在WP8的时候做过WebBrowser相关的笔记,在WP8.1的WebView和WebBrowser有些不一样,在这里做一些笔记下面分为几个部分 1.禁止缩放 2.JS通知后台C#代码(noti ...
UGUI之Scrollbar使用
这个效果主要用到了3个组件(对象): 1:Scrollbar对象滚动条 2:Scroll Rect组件让对象具有滑动效果 3:Mask组件遮罩层.把多余的部分隐藏不显示 Scrollbar ...
WPF 使用winform的webbrowser
首先要添加如下引用: WindowsFormsIntegration System.Drawing System.Windows.Forms 然后在xaml中添加引用 xmlns:winform=&q ...
Unity实现滑页效果（UGUI）
简介项目需要...直接展示效果吧: 原理使用UGUI提供的ScrollRect和ScrollBar组件实现基本滑动以及自己控制每次移动一页来达到滑页的效果. 实现过程 1.创建两个panel,上面 ...
uGUI练习(七) Drag And Drop
练习目标练习UI的拖放操作一.相关组件 EventTrigger Canvas Group ScrollRect Mask Scrollbar 二.拖放练习 1.创建一个Panel,命名Panel ...
uGUI练习(六) ScrollView
练习目标练习uGUI的滑动组件一.相关组件 ScrollRect Mask Grid Layout Group Scrollbar 二.步骤 1.创建一个Panel,命名为ScrollRect,添 ...
Windows phone 8 学习笔记(2) 数据文件操作（转）
Windows phone 8 应用用于数据文件存储访问的位置仅仅限于安装文件夹.本地文件夹(独立存储空间).媒体库和SD卡四个地方.本节主要讲解它们的用法以及相关限制性.另外包括本地数据库的使用方式 ...
Windows phone 8 学习笔记(2) 数据文件操作
原文:Windows phone 8 学习笔记(2) 数据文件操作 Windows phone 8 应用用于数据文件存储访问的位置仅仅限于安装文件夹.本地文件夹(独立存储空间).媒体库和SD卡四个地方 ...

随机推荐

docker探索-docker容器基本操作（五）
1.创建一个容器并启动 1.1.docker hello word Docker 允许你在容器内运行应用程序, 使用 docker run 命令来在容器内运行一个应用程序. 输出Hello world ...
HashTable浅析
本文转载自: http://rock3.info/blog/2013/12/05/hashtable%E6%B5%85%E6%9E%90/ 一.Hash特点 Hash,就是杂凑算法,Hash(str1 ...
prepareEditor
@Override public Component prepareEditor(TableCellEditor editor, int row, int column) { final Compon ...
HttpWebRequest、HttpWebResponse获取网页
1,通过HttpWebRequest.HttpWebResponse获取一个流 request = (HttpWebRequest)System.Net.WebRequest.Create(this. ...
DataTable 行删除
今天在阅读一个项目中的代码时,发现删除DataTable的数据时用的dataTable.Clear(); 由于以前自己习惯都是用dataTable.Rows.Clear();因此突然感觉到很茫然,难道 ...
python计算机视觉项目实践
这是一个贝叶斯模型的计算机视觉小项目.希望大家通过这个简单的项目知道一般的计算机视觉项目是怎样操作的. 我先讲题目放在这里希望有兴趣的童鞋花一周的时间思考并用python实现.一周以后我来发布我的详细 ...
使用FineReport打造考试分析系统
本系统的优点: 1.报表内容丰富:系统中包含总分分析.小分分析.作答错因分析.试卷命题分析和各类用户报告单五类报表.涵盖学校须要的各项分析数据,并提供丰富的图表,使分析数据更直观表现. 2.操作灵活简 ...
http免费升级https 攻略（超简单）
1.注册沃通SSL免费证书 https://buy.wosign.com/FreeSSL.html 2.验证邮件域名,并下载证书 3.打开IIS,找到服务器证书选择导入,选择下载下来的证书 4.设置网 ...
jquery easyui toolbar 分割线问题
http://bbs.csdn.net/topics/390507228 —————————————————————————————————— 将“<div class="datagr ...
【3】JVM-OutOfMemory异常重现
JVM中常见的OOM,那么如何通过自己编写代码产生这些OOM异常呢?通过写代码重现异常,是为了避免在工作中写出有OOM BUG的代码.之前虽然看过相关文章,但是没自己写过这些代码,这次在编写的实际过程 ...

【WP8】为Webbrowser添加ScrollBar

【WP8】为Webbrowser添加ScrollBar的更多相关文章

随机推荐

热门专题