How do I disable Zoom and Scroll in Web Browser control for a WP8 app?

Question

I'm developing an App for WP8 using Visual Studio 2013. I used the WPToolkit to integrate the WebBrowser control.

I'm displaying static information in my WebBrowser control with changes just to the text using the following function.

Private Function CreateHtmlDocument() As String

    Dim strHtmlDoc As String = ""

    strHtmlDoc = "<html>"
    strHtmlDoc = strHtmlDoc & "<head>"
    strHtmlDoc = strHtmlDoc & "<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no';>"
    strHtmlDoc = strHtmlDoc & "</head>"
    strHtmlDoc = strHtmlDoc & "<style type='text/css'>"
    strHtmlDoc = strHtmlDoc & "body{ -ms-touch-action: none !important; -ms-content-zooming:none; -ms-scroll-limit-y-max :auto;}"
    strHtmlDoc = strHtmlDoc & "</style>"
    strHtmlDoc = strHtmlDoc & "<body>"
    strHtmlDoc = strHtmlDoc & "<span style='color:#bf2e1a'><b><font face='Times New Roman' size='3'>" & clsGlobalVariables.branch & "</font></b></span>"
    strHtmlDoc = strHtmlDoc & "<br> <span style='color:#c1481a'><font face='Times New Roman' size='2'>" & clsGlobalVariables.company_name & "<br> (Legal Name : " & clsGlobalVariables.legal_name & ")</font></span>"
    strHtmlDoc = strHtmlDoc & "<br> <span style='color:#878270'><p align='left'><font face='Arial' size='2'>" & clsGlobalVariables.address & "</font></p> </span>"
    strHtmlDoc = strHtmlDoc & "<span style='color:#878270'><font face='Arial' size='2'>Tel &nbsp;&nbsp;&nbsp;&nbsp;:</span> <span style='color:blue'>" & clsGlobalVariables.telephone & "</font></span>"
    strHtmlDoc = strHtmlDoc & "<br> <span style='color:#878270'><font face='Arial' size='2'>Fax &nbsp;&nbsp;&nbsp;:</span> <span style='color:blue'>" & clsGlobalVariables.fax & "</font></span>"
    strHtmlDoc = strHtmlDoc & "<br> <span style='color:#878270'><font face='Arial' size='2'>Email&nbsp;:</span> <span style='color:blue'>" & clsGlobalVariables.email & "</font></span>"
    strHtmlDoc = strHtmlDoc & "<br>"
    strHtmlDoc = strHtmlDoc & "<br>"
    strHtmlDoc = strHtmlDoc & "</body>"
    strHtmlDoc = strHtmlDoc & "</html>"


    Return strHtmlDoc

End Function

Unfortunately, I can't seem to disable Pinch Zoom. Thankfully, double-tap zoom doesn't work. Also, the scroll is bugged in that it scrolls beyond my data and shows blank space in my control.

Some Image Links(Still don't have 10 Rep) -

https://i.stack.imgur.com/eifhn.jpg      - How it looks normally.
https://i.stack.imgur.com/0panl.jpg      - It zooms too much.
https://i.stack.imgur.com/znf5y.jpg      - It scrolls way below the text.

I already tried http://www.scottlogic.com/blog/2011/11/17/suppressing-zoom-and-scroll-interactions-in-the-windows-phone-7-browser-control.html . It doesn't work for WP8.

My XAML -

 <Grid HorizontalAlignment="Left" Height="320" Margin="10,274,0,0" Grid.Row="1" VerticalAlignment="Top" Width="460">
        <phone:WebBrowser x:Name="webBrowser" HorizontalAlignment="Left" Height="320" IsScriptEnabled="True" VerticalAlignment="Top" Width="460" BorderThickness="2" BorderBrush="OrangeRed" ScrollViewer.VerticalScrollBarVisibility="Auto"/>
 </Grid>

Chubosaurus Software · Answer 1 · 2014-09-08T09:50:34.207

0

It's a sealed class, so if you really want to achieved this, then you would need to transverse the VisualTree to get to the correct container.

Just a small workaround then: (Disabled Zoom, but enable scrolling)

Hardcoded Values

<ScrollViewer>
    <phone:WebBrowser x:Name="my_wb" Height="1000" IsHitTestVisible="False"></phone:WebBrowser>
</ScrollViewer>

If you know how to pass JS values back to calling Application you can size the WebBrowser perfectly.

<ScrollViewer>
    <phone:WebBrowser x:Name="my_wb" Height="{Binding HeightOfRenderHTMLpage}" IsHitTestVisible="False"></phone:WebBrowser>
</ScrollViewer>

edited Sep 08 '14 at 09:50

answered Sep 08 '14 at 08:17

Chubosaurus Software

8,133
2
20
26

What about cases where you NEED to scroll to view the entire data? http://i.stack.imgur.com/K98VY.jpg – doodla Sep 08 '14 at 08:28
Then you need to modify your question, it says "How I disable Zoom and Scroll" – Chubosaurus Software Sep 08 '14 at 08:29
My bad. Can you answer the question anyway? I'll take care as to question accuracy in the future. – doodla Sep 08 '14 at 08:48
It's a sealed class, so you would have to muck around in the VisualTree to do what you want. But I will post a simpler workaround since I don't know how proficient you're as a coder. You can set a Hard value for the height or you employ some JS Binding to get the exact height of the page. I will modify my solution. – Chubosaurus Software Sep 08 '14 at 09:44
Thanks a lot. I increased my Grid Size and changed my buttons to icons to make it work with your previous solution. But I'll check this out. Again, thanks a lot. Btw, can you give me some links to learn about VisualTree? – doodla Sep 08 '14 at 20:16
:) sure. It all starts here. It's basically browsing through a directory tree. http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.visualtreehelper – Chubosaurus Software Sep 08 '14 at 21:04

kober · Answer 2 · 2014-09-08T12:07:27.243

I was facing the same issue (i think) last month, here's my solution (in C#).

Set IsHitTestVisible to false for disabling all interaction with user and enable scripts with IsScriptEnabled to true

XAML

<ScrollViewer>
  <Grid>
      <Grid.RowDefinitions>
          <RowDefinition
              Height="auto" />
          <RowDefinition
              Height="auto" />
          <RowDefinition
              Height="auto" />
      </Grid.RowDefinitions>
      <TextBlock
          Grid.Row="0"
          x:Name="Subject" />
      <TextBlock
          Grid.Row="1"
          x:Name="Date" />
      <phone:WebBrowser
          Grid.Row="2"
          ScriptNotify="browser_ScriptNotify"
          x:Name="browser"
          IsHitTestVisible="False"
          IsScriptEnabled="True" />
  </Grid>
</ScrollViewer>

Before you set HTML to to browser, inject javascript with bodyheight callback

C#

// preparing HTML page with some viewport settings and JS callback to c#
private string PrepareHtml(string body)
{
    return @"<!DOCTYPE html>
             <html>
                <head>
                    <meta name=""viewport"" content=""width=432, initial-scale=1, maximum-scale=1, user-scalable=0, target-densitydpi=device-dpi"" />
                </head>
                <body>
                    " + body + @"

                    <script type=""text/javascript"">

                        window.external.notify(document.body.clientHeight.toString());

                    </script>
                </body>
            </html>";
}

when getting notified of clients height, set browsers height

C#

void browser_ScriptNotify(object sender, NotifyEventArgs e)
{
    int o;
    if (int.TryParse(e.Value, out o))
    {
        browser.Height = o;
    }
}

Hope it helps

How do I disable Zoom and Scroll in Web Browser control for a WP8 app?

2 Answers2