How to preserve zoom applied by the user on navigation to new page?

[shitikanth]

The default behavior of WebView2 is that any user applied zoom is only for the current page and is reset on a navigation. I would like to create an experience where the user applied zoom is preserved even on navigation.

I have tried binding the webview's to a property of the viewmodel and updating this property on ZoomFactorChanged Event.

// In MainWindow.xaml
           <wv2:WebView2
                          ZoomFactor="{Binding ZoomFactor}"
                          Name="webView" Source="{Binding CurrentPageUrl}"/>

// In MainWindow.xaml.cs

        public MainWindow()
        {
            InitializeComponent();
            DataContext = viewModel;
            webView.ZoomFactorChanged += WebView_ZoomFactorChanged;
        }

        private void WebView_ZoomFactorChanged(object sender, EventArgs e)
        {
            viewModel.ZoomFactor = webView.ZoomFactor;
        }

However, the changed ZoomFactor is still not applied on navigation to a new page.

On the other hand, when I set the ZoomFactor in viewModel on response to zoom button clicks, the changes to ZoomFactor are correctly applied on navigation. So it seems that the webView is specifically ignoring the ZoomFactor binding when its value is equal to the last ZoomFactor level set by the user.

[bradp0721]

I think this might be a conflict with bindings and how WebView2 handles the ZoomFactor. As you said, the WebView2 does not maintain user zoom across navigations. But if the app specifically sets the ZoomFactor property, then that value is persisted across navigations, even if the user changes the zoom on the current page.

For example, app sets ZoomFactor to 1.5, user zooms page to 2.0, then WebView2 navigates. On the new URL, WebView2 ZoomFactor will be 1.5.

This seems to only work one direction with the bindings. When the viewModel binding is changed, it explicitly changes the WebView2 ZoomFactor to match. This ZoomFactor then persists across navigations. However, when the user zooms, the viewModel is updated, but the WebView's ZoomFactor is not being explicitly set by the app. I'm not sure if the binding is actually trying to set the WebView2 ZoomFactor, since the values are the same, but I see that the WPF WebView2 element only updates the CoreWebView ZoomFactor when the value changes. So in this case, the WebView2 doesn't recognize an app applied ZoomFactor, so the ZoomFactor is reset on navigations.

It looks like there is a bug in our WPF WebView2 element for ZoomFactor. Since the app setting it is different than the user updating it, the WebView2 element should not ignore when the app sets the value (even if the value doesn't change).

As a workaround, you can do something like this:

        private void WebView_ZoomFactorChanged(object sender, EventArgs e)
        {
            double zoomFactor = webView.ZoomFactor;
            webView.ZoomFactor = zoomFactor + 0.001;
            webView.ZoomFactor = zoomFactor;
        }

Setting the ZoomFactor property from the app doesn't trigger the ZoomFactorChanged event, so this won't cause a loop, and changing the ZoomFactor by a small amount shouldn't cause the page to re-layout.

[shitikanth]

Thanks, that seems to do the trick!