question

DotNETFan-9473 avatar image
0 Votes"
DotNETFan-9473 asked RoyLi-MSFT edited

UWP Webview2 Size shrinks - Extended displays

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).

263561-webview2-extended-display.png

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>


windows-uwp
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

RoyLi-MSFT avatar image
0 Votes"
RoyLi-MSFT answered RoyLi-MSFT edited

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.




· 6
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks for the input @RoyLi-MSFT . Is there a way to detect extended displays and get the scales dynamically within UWP app , so that the suggested workaround can be integrated?

0 Votes 0 ·

@DotNETFan-9473 UWP app could only get the current monitor's scales using DisplayInformation.ResolutionScale Property. This is what I'm already using in my answer. You could get the DisplayInformation object by calling DisplayInformation.GetForCurrentView Method.


0 Votes 0 ·

@RoyLi-MSFT iam referring to the primaryscale value which is hardcoded to 150 . Is that gettable through any API ?
double primaryScale = 150;

0 Votes 0 ·
Show more comments