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

Question

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

1.1k Views Asked by doodla At 08 September 2014 at 05:34

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>

Original Q&A

There are 2 best solutions below

**Chubosaurus Software** · Answer 1 · 2014-09-08T08:17:35.070000

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>

**kober** · Answer 2 · 2014-09-08T10:03:21.630000

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?

There are 2 best solutions below

Related Questions in VB.NET

Related Questions in WINDOWS-PHONE-8

Related Questions in WEBBROWSER-CONTROL

Related Questions in WPTOOLKIT

Trending Questions

Popular # Hahtags

Popular Questions