Complete text not visible in windows phone web browser

1
votes

I am trying to display html content available in local xml file windows phone web browser control. I am using below code to display content to the web broser ,

   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());

The content is getting displayed in the web browser , but the last few lines are getting trimmed/not getting displayed. I have tried changing the parameters,height of the control,etc, but still few end lines are not displayed , irrespective of the content length.I have even tried putting just plain text in the web browser. The reason I am using web browser control is because the content is formated for html page, and also to provide pinch zoom feature. Control is defined as follow:

<Grid x:Name="ContentPanel" Grid.Row="1" >
<ScrollViewer Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<phone:WebBrowser Name="discusswebBrowser" Height="1000" />
</ScrollViewer>
</Grid>
2
windows-phone-7windows-phone-8webbrowser-control

2 Answers

1
votes

Was unable to find any answer for this problem, so came up with a workaround of my own. First, I check the length of the content to be displayed and then if is more then 4000 character length then I divide it into two parts. Then also add an application bar with the more button , so that the user can click on the button and view the remaining text. Here is the code 

{
            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);
        }

For the event handler for the more button create a function that will load the remaining text along with a button in the application bar to move back to the first part. 

 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);


        }
    }
0
votes

You need to remove hard-coded Height="1000", Also Grid.Row="1" in ScrollViewer is unnecessary as You didn't define Row definitions for ContentPanel

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

Also you don't need ScrollViewer as phone:WebBrowser has scrolling mechanism internally.

Final Snippet that should work 

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