将透明图像设置为窗口背景，同时仍显示背景颜色

Question

I'm trying to add an image as the background of a window; the image is a transparent PNG. My issue here is whenever I set the image as background it covers whatever color is under it despite being transparent, not showing my desired background color. When I compile the result is the window having the desired image as background with the transparent part being replaced by a black color instead of showing the background color I set.

My code for MainWindows.xaml is as follows:

<Window x:Class="Eorzea_Timers.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Eorzea_Timers"
    mc:Ignorable="d"        
    Title="MainWindow" Height="667" Width="375">

<Window.Background>
    <ImageBrush ImageSource="Background.png"/>
</Window.Background>

<Window.Resources>
    <Style TargetType="Window">
        <Setter Property="Background" Value="White"/>
    </Style>
</Window.Resources>

<Grid>

</Grid>

Is it even possible to have what I want or should I just include the colored background in the image itself?

Answer 1

Put an Image element into the Grid:

<Window ... Background="White">
    <Grid>
        <Image Source="Background.png"/>
        <Grid>
            <!-- other elements here -->
        </Grid>
    </Grid>
</Window>

Or if for whatever reason you need to use an ImageBrush, use it as Background of the top-level Grid:

<Window ... Background="White">
    <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="Background.png"/>
        </Grid.Background>
        <Grid>
            <!-- other elements here -->
        </Grid>
    </Grid>
</Window>

Answer 2

尝试使用VisualBrush，并创建具有所需背景颜色的形状，然后将图像放在其顶部。