WebView2 behaves differently on different machines
<Grid x:Name="Grid">
<wpf:WebView2 x:Name="WebView2"></wpf:WebView2>
<controls:OverlayControl Width="{Binding ElementName=WebView2,Path=ActualWidth}"
Height="{Binding ElementName=WebView2,Path=ActualHeight}"
Visibility="Hidden"
x:Name="OverlayControl">
<Border Margin="0"
Background="Black"
Opacity="0.3"></Border>
</controls:OverlayControl>
</Grid>
public class OverlayControl : ContentControl, IDisposable
{
private Window _window;
private bool _isLoaded;
private HwndHostEx _host;
public OverlayControl()
{
this.Loaded += OverlayControl_Loaded;
}
private void OverlayControl_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
if (_isLoaded) return;
_isLoaded = true;
var content = this.Content;
_window = new Window()
{
AllowsTransparency = true,
Background = Brushes.Transparent,
WindowStyle = WindowStyle.None,
};
_window.Content = content;
_window.Show();
IntPtr windowHandle = new System.Windows.Interop.WindowInteropHelper(_window).Handle;
_host = new HwndHostEx(windowHandle);
Content = _host;
}
}
The tricky part is this: when I show a modal dialog, I display an OverlayControl to solve the issue of the WebView2 mask not working. Although the OverlayControl has the same width and height as the WebView2, when the webpage has padding=10, the overlay behaves differently on different machines. On some machines, the 10px padding is visibly overlaid, while on my computer, it’s covered correctly.
It appears that the 10px padding is handled differently across machines!
<wpf:WebView2 x:Name="WebView2"></wpf:WebView2>
<controls:OverlayControl Width="{Binding ElementName=WebView2,Path=ActualWidth}"
Height="{Binding ElementName=WebView2,Path=ActualHeight}"
Visibility="Hidden"
x:Name="OverlayControl">
<Border Margin="0"
Background="Black"
Opacity="0.3"></Border>
</controls:OverlayControl>
</Grid>
public class OverlayControl : ContentControl, IDisposable
{
private Window _window;
private bool _isLoaded;
private HwndHostEx _host;
public OverlayControl()
{
this.Loaded += OverlayControl_Loaded;
}
private void OverlayControl_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
if (_isLoaded) return;
_isLoaded = true;
var content = this.Content;
_window = new Window()
{
AllowsTransparency = true,
Background = Brushes.Transparent,
WindowStyle = WindowStyle.None,
};
_window.Content = content;
_window.Show();
IntPtr windowHandle = new System.Windows.Interop.WindowInteropHelper(_window).Handle;
_host = new HwndHostEx(windowHandle);
Content = _host;
}
}
The tricky part is this: when I show a modal dialog, I display an OverlayControl to solve the issue of the WebView2 mask not working. Although the OverlayControl has the same width and height as the WebView2, when the webpage has padding=10, the overlay behaves differently on different machines. On some machines, the 10px padding is visibly overlaid, while on my computer, it’s covered correctly.
It appears that the 10px padding is handled differently across machines!
