title: How to utilize transparent space of image control in User control?
body: <p>I have an usercontrol, which has a png image as below, I developed it for replacing custom button in uwp. It works as expected, my issue is, the usercontrol occupies the whole rectangle space of the base Canvas/Grid of usercontrol, instead of the exact space of the png image shown in the usercontrol. Look at the below image to understand this.</p>
  
  <p><a href="https://i.stack.imgur.com/e8fkS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e8fkS.png" alt="enter image description here"></a></p>
  
  <p>Suppose I have some buttons below that usercontrol, I am unable to click Btn1, Btn6, Btn7. I want to click Btn5, but I am unable to click Btn5 eventhough it is visible and not covered by the usercontrol's image!(But it is inside the bounderies of the usercontrol) 
  Below is my usecontrol's code:</p>
  
  <pre><code>...d:DesignWidth="1200"&gt;
  
  &lt;Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch"&gt;
  
      &lt;Image Stretch="Fill" 
             Canvas.Left="{x:Bind FocusLeft, Mode=OneWay}"
             Canvas.Top="{x:Bind FocusTop, Mode=OneWay}"
             Height="{x:Bind FocusHeight, Mode=OneWay}"
             Width="{x:Bind FocusWidth, Mode=OneWay}"
             Source="arrowsmall.png"
             HorizontalAlignment="Center" /&gt;
  
  &lt;/Canvas&gt;
  </code></pre>
  
  <p></p>