在圖像上創建多個按鈕或在圖像上插入網格

我有一張圖片，上面有數字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>

來源

2017-06-22 Tony

也許如果我使用

只需更改您聲明的按鈕和圖像的順序（首先在第二個下面，因此您點擊圖像而不是按鈕） –

我能想到的包括通過反覆試驗找到您的按鈕背景矩形的位置的最佳解決方案。您可以通過將按鈕設置爲所需的大小並調整邊距，直到它位於正確的位置。例如，根據需要

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

來源

2017-06-22 13:16:47 Gareth

在圖像上創建多個按鈕或在圖像上插入網格

回答

相關問題