如何在WPF中的图像上制作透明画布？

Question

我想在 image1 图像之上制作 GameArea Canvas。我尝试更改 ZIndex 并将画布手动拖动到图像的顶部，但都不起作用，画布不断移回到图像的右侧。

（抱歉，如果我的英语相当笨拙，希望你明白我的意思）

下面是我的代码：

<Window x:Class="TugasBesarTAM_Moses_1072089.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Brickbreaker" Height="420" Width="375" Loaded="Window_Loaded"
    KeyDown="Window_KeyDown" ResizeMode="NoResize">
<DockPanel>      
    <Grid Width="350" Height="30"
          DockPanel.Dock="Top"
          ShowGridLines="True">

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <TextBlock x:Name="txtLevel" 
                   Text="Level 00"
                   Grid.Column="0" Grid.Row="1"
                   FontSize="20" FontWeight="Medium"
                   HorizontalAlignment="Left"/>
        <TextBlock x:Name="txtScore" 
                   Text="0"
                   Grid.Column="1" Grid.Row="1"
                   FontSize="20" FontWeight="Medium"
                   HorizontalAlignment="Right"/>
    </Grid>
    <Image Height="300" Name="image1" Stretch="Fill" Width="320" Visibility="Visible" Source="/TugasBesarTAM_Moses_1072089;component/Images/Back1.jpg" Panel.ZIndex="1" />
    <Canvas x:Name="GameArea" DockPanel.Dock="Bottom" Width="320" Height="300" Panel.ZIndex="0">

    </Canvas>
</DockPanel>

感谢您的关注和帮助！

Answer 1

Dockpanel 不是适合在这种情况下使用的面板。使用网格代替。诸如：

<Grid>
    <Image  />
    <Canvas />
</Grid>