Problem with WebView2 overlayed button images displaying

[LeadMagnet]

First off....I can't thank you enough for making this repo available! I've been fighting this problem for months, getting any control to overlay the WebView2 control. Your code works great.

All of my buttons (for my project) are transparent, with a child image for what the button does. Images are PNG with transparency.

The images will not display at all unless I set Background="(any color excluding Transparent)".

This isn't a huge problem, as the button is still overlaid properly.

I've tried JPG and GIF, all do the same thing. Image is invisible until a background color is set.

Let's call it minor (cosmetic) :D

Project is a desktop WPF app with net6.0-windows running on W10Ent

Thanks again!

[ChrisPulman]

Thank you for your feedback, I think I understand why this may occur but I will run some test's to see if my thoughts are correct.
Glad this library is helpful.

[ChrisPulman]

@LeadMagnet I updated the test app with what I could make out to be your issue, but it works.
Would you be kind enough to post a example of the issue you are experiencing.

[LeadMagnet]

That's fantastic! Been a bit slammed IRL....I'll give it a whirl this week and report back.

The code for the page looks like this...

<Page x:Name="NavPage" x:Class="Raven.Pages.Navigation"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:Raven.Pages"
      xmlns:rxnav="https://github.com/ChrisPulman/CrissCross"
      xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
      mc:Ignorable="d" 
      Background="{StaticResource RavenRed.WindowBackground}"
      d:DesignHeight="600" d:DesignWidth="1024"
      Title="Navigation">

    <Canvas>

        <rxnav:WebView2Wpf Name="webView" Panel.ZIndex="1" Width="1009" Height="563" Canvas.Left="0" Canvas.Top="0" 
                           SourceUpdated="webView_SourceUpdated" >
            <Grid Margin="10,492,0,0" Panel.ZIndex="100" HorizontalAlignment="Left" VerticalAlignment="Top">
                <Button x:Name="btnHome" Click="Home_Click" Width="60" Height="60"
                         Background="White" BorderBrush="Transparent" Foreground="Transparent">
                    <Image x:Name="imgFullScreenHome" Source="/Content/img/MenuButtons/houseblk.png" />
                </Button>
            </Grid>
        </rxnav:WebView2Wpf>
    </Canvas>

</Page>

It's a VS2022 WPF project with a target...
<TargetFramework>net6.0-windows</TargetFramework>

Let me know if this helps. Happy to upload a sample project if it would help.

Thanks again for the prompt response! :D

[LeadMagnet]

Sorry.....IRL got me again!

Fix works great!

Transparent images displaying as expected!

Thanks a million

:D