画像に複数のボタンを作成するか、画像にグリッドを挿入してください

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>