完整的文本在 Windows Phone 网络浏览器中不可见答案

【问题标题】：Complete text not visible in windows phone web browser完整的文本在 Windows Phone 网络浏览器中不可见
【发布时间】：2013-12-23 15:49:56
【问题描述】：

我正在尝试显示本地 xml 文件 windows phone web 浏览器控件中可用的 html 内容。我正在使用下面的代码向网络浏览器显示内容，

   StringBuilder sb = new StringBuilder();
   sb.Append(@"<html><head>");
   sb.Append(@"<meta name=""viewport"" content=""width=""device-width"">");
   sb.Append(@"<style type=""text/css"">");
   sb.Append(@"body {");
   sb.Append(@"        margin:5px;");
   sb.Append(@"        text-align:center;");
   sb.Append(@"        letter-spacing:0.1em;");
   sb.Append(@"        font-size-adjust: none;");
   sb.Append(@"        font-size: 14px;");
   sb.Append(@"        font-family:""Segoe WP"";");
   sb.Append(@"      }");
   sb.Append("p");
   sb.Append("{margin:5px;}");
   sb.Append(@"</style></head><body>");
   sb.Append(commentry);
   sb.Append(@"</body></html>");
   discusswebBrowser.NavigateToString(sb.ToString());

内容正在网络浏览器中显示，但最后几行被修剪/不显示。我已经尝试更改参数、控件的高度等，但无论内容长度如何，仍然没有显示几行结束。我什至尝试在 Web 浏览器中只输入纯文本。我使用网络浏览器控件的原因是因为内容是为 html 页面格式化的，并且还提供了捏缩放功能。控制定义如下：

<Grid x:Name="ContentPanel" Grid.Row="1" >
<ScrollViewer Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<phone:WebBrowser Name="discusswebBrowser" Height="1000" />
</ScrollViewer>
</Grid>

【问题讨论】：

标签： windows-phone-7 windows-phone-8 webbrowser-control

【解决方案1】：

无法为这个问题找到任何答案，所以想出了我自己的解决方法。首先，我检查要显示的内容的长度，然后如果超过 4000 个字符长度，那么我将其分为两部分。然后还添加了一个带有更多按钮的应用程序栏，以便用户可以单击该按钮并查看剩余的文本。这是代码

{
            if (commentry.Length > 4000 && commentry.IndexOf("<p>", commentry.Length / 2) > 0)
            {
                //Change the xaml to contain a panaroma , and if then on the second item create web browser control with the second half of the commentry. 
                commentry1 = commentry.Remove(commentry.IndexOf("<p>", commentry.Length / 2), commentry.Length - commentry.IndexOf("<p>", commentry.Length / 2));
                commentry2 = commentry.Remove(0, commentry.IndexOf("<p>", commentry.Length / 2));
                appBarMoreButton = new ApplicationBarIconButton(new Uri("/Images/quote.back.png", UriKind.Relative));
                appBarMoreButton.Text = "more";
                appBarMoreButton.Click += new EventHandler(loadMoreContent);
                appBarPreviousButton = new ApplicationBarIconButton(new Uri("/Images/quote.back.png", UriKind.Relative));
                appBarPreviousButton.Text = "Previous";
                appBarPreviousButton.Click += new EventHandler(loadFirstPart);


            }

         var htmlScript = "<script>function getDocHeight() { " +
            "return document.getElementById('pageWrapper').offsetHeight;" + 
            "}" +
            "function SendDataToPhoneApp() {" +
            "window.external.Notify('' + getDocHeight());" +
            "}</script>";

         if (commentry1 == null && commentry2 == null)
         {
             var htmlConcat = string.Format("<html><meta name=\"viewport\" content=\"width=device-width,user-scalable=yes,height=device-height\" /><head>{0}</head>" +
          "<body style=\"margin:5px;padding:0px;background-color:{3};\" " +
          "onLoad=\"SendDataToPhoneApp()\">" +
          "<div id=\"pageWrapper\" style=\"width:100%;color:{2}; background-color:{3}\"> " +
          "{1}</div></body><footer></footer></html>",
          htmlScript,
          commentry, fontColor, backGroundColor);
             discusswebBrowser.NavigateToString(htmlConcat);

         }
         else
         {
             var htmlConcat = string.Format("<html><meta name=\"viewport\" content=\"width=device-width,user-scalable=yes,height=device-height\" /><head>{0}</head>" +
                         "<body style=\"margin:5px;padding:0px;background-color:{3};\" " +
                         "onLoad=\"SendDataToPhoneApp()\">" +
                         "<div id=\"pageWrapper\" style=\"width:100%;color:{2}; background-color:{3}\"> " +
                         "{1}</div></body><footer></footer></html>",
                         htmlScript,
                         commentry1, fontColor, backGroundColor);
             discusswebBrowser.NavigateToString(htmlConcat);
             ApplicationBar = new ApplicationBar();
             ApplicationBar.IsVisible = true;
             ApplicationBar.Mode = ApplicationBarMode.Minimized;
             ApplicationBar.IsMenuEnabled = false;
             ApplicationBar.Buttons.Add(appBarMoreButton);


         }
        discusswebBrowser.ScriptNotify += 
        new EventHandler<NotifyEventArgs>(wb1_ScriptNotify);
        }

为更多按钮的事件处理程序创建一个函数，该函数将加载剩余文本以及应用程序栏中的按钮以移回第一部分。

 private void loadMoreContent(object sender, EventArgs e)
    {
        if (commentry2 != null)
        {
            var htmlScript = "<script>function getDocHeight() { " +
           "return document.getElementById('pageWrapper').offsetHeight;" +
           "}" +
           "function SendDataToPhoneApp() {" +
           "window.external.Notify('' + getDocHeight());" +
           "}</script>";

            var htmlConcat = string.Format("<html><meta name=\"viewport\" content=\"width=device-width,user-scalable=yes,height=device-height\" /><head>{0}</head>" +
                         "<body style=\"margin:5px;padding:0px;background-color:{3};\" " +
                         "onLoad=\"SendDataToPhoneApp()\">" +
                         "<div id=\"pageWrapper\" style=\"width:100%;color:{2}; background-color:{3}\"> " +
                         "{1}</div></body><footer></footer></html>",
                         htmlScript,
                         commentry2, fontColor, backGroundColor);
            discusswebBrowser.NavigateToString(htmlConcat);
            this.ApplicationBar.Buttons.RemoveAt(0);
            this.ApplicationBar.Buttons.Add(appBarPreviousButton);


        }
    }

【讨论】：

【解决方案2】：

您需要删除硬编码的Height="1000"，此外ScrollViewer 中的 Grid.Row="1" 是不必要的，因为您没有为 ContentPanel 定义行定义

<Grid x:Name="ContentPanel" Grid.Row="1" >
<ScrollViewer  VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<phone:WebBrowser Name="discusswebBrowser"  />
</ScrollViewer>
</Grid>

另外你不需要 ScrollViewer 作为手机：WebBrowser 内部有滚动机制。

应该工作的最终片段

 <Grid x:Name="ContentPanel" Grid.Row="1" >
    <phone:WebBrowser Name="discusswebBrowser"  />
    </Grid>

【讨论】：