How To Set Overlay On Top Of A WPF WebBrowser Or WebView2 Control

Good day!

A common scenario to our projects is to use the Overlay concept that is, show a nearly transparent modal on top of our form. I have been using the code below to create an Overlay using just a Border and a TextBlock but to no avail, it just won't sit right on top of the WebBrowser control. In the picture right next to the Border control snippet, only the input controls are covered by the overlay and ignoring the WebBrowser control.

<Border BorderBrush="Black" BorderThickness="1" Background="#80000000" Visibility="{Binding Path=IsBusy, Converter={StaticResource BoolToVisibilityConverter}}" 
		Grid.RowSpan="4" Grid.ColumnSpan="3">
	<Grid>
		<TextBlock TextAlignment="Center" Margin="0" TextWrapping="Wrap" Width="500" Text="{Binding Path=OverlayMessage}" 
				   HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" FontWeight="Bold" Foreground="#7EFFFFFF"/> 
	</Grid>
</Border>

I did some research and found a couple solutions from posts and forum answers that included dirty hacks and stuffs. Luckily I discovered a forums answer that elaborates on using the Popup control as a solution. Basically, the concept is to wrap the Border control with TextBlock using Popup and set some of the important properties such as the Width, Height and PlacementTarget with a parent element specifically the root Grid container. After that, the Overlay works as expected thereby extending the Popup controls coverage which includes the WebBrowser control.

<Popup Placement="Center" IsOpen="{Binding IsBusy}" AllowsTransparency="True" Visibility="{Binding Path=IsBusy, Converter={StaticResource BoolToVisibilityConverter}}" 
	   Width="{Binding ActualWidth, ElementName=gridContainer, Mode=OneWay}" Height="{Binding ActualHeight, ElementName=gridContainer, Mode=OneWay}"
	   PlacementTarget="{Binding ElementName=gridContainer}" Opacity="5" Margin="0">
	<Border BorderBrush="Black" BorderThickness="1" Background="#80000000">
		<Grid>
			<TextBlock TextAlignment="Center" Margin="0" TextWrapping="Wrap" Width="500" Text="{Binding Path=OverlayMessage}" 
					   HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" FontWeight="Bold" Foreground="#7EFFFFFF"/>     
		</Grid>
	</Border>
</Popup>

Cheers!