CODEWITHSUNDEEP
c#wpfxaml
Moses Aprico
Moses Aprico

Reputation: 2121

How to make a transparent canvas over an image in WPF?

I want to make the GameArea Canvas on top of the image1 Image. I've tried to change the ZIndex and drag the canvas manually to the Image's top, but neither worked, the Canvas keeps moving back to the rightside of the Image.

(Sorry if my english is rather clunky, hope you understand what i mean)

Below is my code :

<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>

Thanks for your attention and assistance!

Upvotes: 2

Views: 2418

Answers (1)

Ramin
Ramin

Reputation: 2133

Dockpanel is not an appropriate panel to use in this case. use a Grid instead. sth like:

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

Upvotes: 5

Related Questions