Windows 8.1 store app WebView zoom issues - Caliburn Micro involved

Question

I've been trying now for the better part of a day to figure out something that is surely very simple - zooming in a WebView using the pinch gesture in a Caliburn Micro application.

I have a Caliburn Micro app that has several pages, one of which has a WebView on it. I've been trying to get that WebView to zoom without putting it in a separate ScrollViewer b/c the ScrollViewer seems to introduce other behavior oddities. I'm not having any luck getting the WebView to zoom.

EDIT: I'm basing my "it don't work" claim on behavior I'm experiencing when I'm remote debugging on a local Dell Venue tablet.

Here is what my ShellView page looks like in the big Caliburn Micro app (with the non-working WebView):

<Page
    x:Class="FooBar.Views.ShellView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

        <WebView x:Name="WebView"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch" />
    </Grid>
</Page>

Despite my best efforts, this doesn't allow me to zoom.

To try to see what I'm doing wrong, I created another project that's a very simple, one-page Caliburn Micro app, with the exact same markup as the multi-page CM app and it works as expected. More specifically, the app starts, creates the first view - ShellView - loads the WebView source and then proceeds to allow me to zoom without issues.

I've added all the styles from the non-working app to the working app, thinking maybe there's something going on there I'm not aware of and the second app still works.

I've tried explicitly setting the Height/Width of the WebView and the containing Grid of the non-working app without any luck. I'm not setting any Heights/Widths of any object in the working app.

I know I've got to be doing something/omitting something very silly, but I can't see it. Please help.

Thanks!

score 0 · Answer 1 · edited May 23 '17 at 12:05

Turns out, it was the website itself I was navigating to. It had the -ms-content-zooming CSS attribute set to none.

I found that CSS attribute from this SO question: How to disable zoom in Windows 8 webviews.

Then I used this SO post to inject it into my WebView: How to create a <style> tag with Javascript.

Worked like a charm and I was able to immediately start zooming. Thanks, SO!!!

Windows 8.1 store app WebView zoom issues - Caliburn Micro involved

1 Answers1