UWP Webview2 Size shrinks - Extended displays

Question

Hi ,

Iam trying with a simple test UWP app which is having a UWP webview2 control , noticed an issue where in the extended monitor , if i minimize the app and restore the app , the webview control shrinks in size. Please see the attachment But if i resize the main window then the control docks properly.
I tried using Grid instead of frame , still the issue exists. Any ideas to fix this issue. I guess this is something to do with DPI and not sure how it can be done within UWP webview2.

Primary display is set with 1920X1080 resolution and scale of 125% and the Extended monitor is set with same resolution and scale of 100% (windows recommended).

Below is the sample code.
xmlns:xamlcontrols="using:Microsoft.UI.Xaml.Controls"

<Grid>  
        <Grid.RowDefinitions>  
             
            <RowDefinition Height="*"></RowDefinition>  
        </Grid.RowDefinitions>  
        <Grid.ColumnDefinitions>  
            <ColumnDefinition Width="*"></ColumnDefinition>  
              
        </Grid.ColumnDefinitions>  
        
  
        <Frame  Grid.Row="0"  Grid.Column ="0" Margin="5 5 5 5" >  
            <xamlcontrols:WebView2 x:Name="WebView2" Source="https://learn.microsoft.com/en-us/microsoft-edge/webview2/" />  
        </Frame>  
    </Grid>  

Answer 1

Hello,

Welcome to Microsoft Q&A!

I could reproduce this issue when using two monitors. I handled the DPI changed event for the current display and the sizechanged event for the WebView2 control. But no event is triggered when restoring the app from the minimized status. Then I tested the old WebView control for native UWP Api as a comparison, the old WebView control could work correctly in the same scenario. It looks like when we restore the app, the app is response to the scale value of the second monitor correctly, but the WebView2 control does not respect the scale value. The WebView2 control is still using the scale value from the primary monitor.

Just talk from the UWP side, if you've already known the scale value of the primary monitor, a workaround for this scenario is to manually change the size of the WebView2 when the app resumes from the minimized status. You could handle the Application.Resuming Event. Then tried to set the correct width and height.

The code looks like this:

    public MainPage()  
        {  
            this.InitializeComponent();  
  
            Application.Current.Resuming += new EventHandler<Object>(App_Resuming);  
             
        }  
  
        private async void App_Resuming(Object sender, Object e)  
        {  
            // TODO: Refresh network data, perform UI updates, and reacquire resources like cameras, I/O devices, etc.  
  
            //original app width and height without scaling  
            var bounds = Window.Current.Bounds;  
            double height = bounds.Height;  
            Debug.WriteLine(height);  
            double width = bounds.Width;  
  
            //scale value of the primary monitor  
            double primaryScale = 150;  
  
            //get scale value of the current monitor  
            var displayInfo = DisplayInformation.GetForCurrentView();  
            //give the currentScale a default value  
            double currentScale;  
  
            switch (displayInfo.ResolutionScale)  
            {  
                case (ResolutionScale.Scale125Percent):  
                    // the extended monitor is 125%  
                    currentScale = 125;  
                    break;  
                case (ResolutionScale.Scale100Percent):  
                    // the extended monitor is 100%  
                    currentScale = 100;  
                    break;  
                case (ResolutionScale.Scale150Percent):  
                    // the extended monitor is 150%  
                    currentScale = 150;  
                    break;  
                default:  
                    currentScale = 100;  
                    break;  
            }  
  
  
            WebView2.Width = width * (primaryScale / currentScale);  
            WebView2.Height = height * (primaryScale / currentScale);  
        }  

This is just a workaround from the UWP side. This behavior is related to the WebView2 control itself. Please also open an issue about WebView2 here: WebView2Feedback. The WebView2 team will check feedback there.

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.