在图像上创建多个按钮或在图像上插入网格

Question

我的照片上有数字1,2和3。我希望能够在每个数字上放置一个可点击的网格，以便在单击时更改图片。我怎样才能做到这一点。我想过在图像标签内放一个网格，但它没有用。有什么想法吗？

这是我当前的xaml和它看起来像的照片。我只是希望每个数字上都有一个按钮悬停在图像上并且可以点击，但我无法实现这一点。

<Grid Name="marsecLevel1" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Grid.RowSpan="2" 
                       HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0 0 10 90" Width="220" Height="82">
    <Button Height="30" Width="30" Cursor="Hand" Margin="3 5 0 0" MouseLeftButtonDown="marsecLevel1Button_Click"></Button>
    <Image Source="Images/marseclevel1.png" Visibility="Visible" Stretch="Fill"></Image>
</Grid>

<Grid Name="marsecLevel2" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Grid.RowSpan="2" 
                       HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0 0 10 90" Width="220" Height="82">
    <Button Height="30" Width="30" Cursor="Hand" Margin="93 5 0 0" MouseLeftButtonDown="marsecLevel2Button_Click"></Button>
    <Image Source="Images/marseclevel2.png" Visibility="Visible" Stretch="Fill"></Image>
</Grid>

<Grid Name="marsecLevel3" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Grid.RowSpan="2" 
                       HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0 0 10 90" Width="220" Height="82">
    <Button Height="30" Width="30" Cursor="Hand" Margin="173 5 0 0" MouseLeftButtonDown="marsecLevel3Button_Click"></Button>
    <Image Source="Images/marseclevel3.png" Visibility="Visible" Stretch="Fill"></Image>
</Grid>

Answer 1

我能想到的最佳解决方案是通过反复试验找到按钮背景矩形的位置。您可以通过将按钮设置为所需的大小并调整边距直到它在正确的位置来完成此操作。例如，

<Grid>
    <Grid.Background>
        <ImageBrush ImageSource="/path/to/image.png" Stretch="UniformToFill"/>
    </Grid.Background>
    <Button Width="100" Height="50" Background="Blue" Margin="10,10,10,10"/>
</Grid>

然后根据需要调整边距......

一旦你获得了自己的位置，就可以创建像这样的按钮矩形

<Grid>
    <Grid.Background>
        <ImageBrush ImageSource="/path/to/image.png" Stretch="UniformToFill"/>
    </Grid.Background>
    <StackPanel Orientation="Horizontal">
        <StackPanel.Background>
            <ImageBrush ImageSource="/path/to/image.png" Stretch="UniformToFill"/>
        </StackPanel.Background>
        <Button/>
        <Button/>
        <Button/>
    </StackPanel>
</Grid>