WebView DefaultBackgroundColor Transparent Background does not draw to WebViewBrush

Question

I am attempting to draw a WebView element that has DefaultBackgroundColor set to transparent (no html background is set) to a WebViewBrush. My goal is for the WebViewBrush to also be transparent where the background of the content was. However, instead it draws the background as black.

Here is XAML code snippet:

<Canvas x:Name="textCanvas">
    <Grid Name="testGrid" Width="200" Height="200" Background="Transparent">
        <Rectangle x:Name="testOverlay" Fill="Transparent"/>
        <WebView x:Name="test" DefaultBackgroundColor="Transparent" Source="ms-appx-web:///HTML/Sample.html"/>
    </Grid>
</Canvas>

Here is a C# code snippet:

private void MyInkToolbar_ActiveToolChanged(InkToolbar toolbar, object sender)
        {
            if (myInkToolbar.ActiveTool == objectSelect)
            {
                textCanvas.IsHitTestVisible = true;
                test.Visibility = Visibility.Visible;
                testOverlay.Visibility = Visibility.Collapsed;
            }
            else
            {
                if (textCanvas.IsHitTestVisible == true)
                {
                    testOverlay.Visibility = Visibility.Visible;
                    CaptureWebView();
                    test.Visibility = Visibility.Collapsed;
                    textCanvas.IsHitTestVisible = false;
                }
            }
        }
        private void CaptureWebView()
        {
            WebViewBrush b = new WebViewBrush();
            b.SetSource(test);
            b.Redraw();
            testOverlay.Fill = b;
        }

Am I doing something wrong or is there a better way to do it? Thanks!

Answer 1

Hi,

Welcome to Microsoft Q&A.

WebView.DefaultBackgroundColor is an additional background, DefaultBackgroundColor is like paper, Html content is like painting. WebViewBrush is equivalent to taking a snapshot of the current WebView when rendering.

If WebView.DefaultBackgroundColor is Transparent, it means that the WebView itself has no background, but the background color is provided by the underlying elements (such as the page itself). This is not a visual problem, but the snapshot cannot extract any background pixels, which is caused by rendering WebViewBrush appears black, this represents an image with no background color.

According to this, the workaround is to set the DefaultBackgroundColor for WebView, which can be set to the same color as the page background (such as white) to maintain the same visual effect.

Thanks.