CODEWITHSUNDEEP
c#xamluwpuwp-xaml
Mg Bhadurudeen
Mg Bhadurudeen

Reputation: 1434

How to utilize transparent space of image control in User control?

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.

enter image description here

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:

...d:DesignWidth="1200">

<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

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

</Canvas>

Upvotes: 1

Views: 58

Answers (1)

Adam McMahon
Adam McMahon

Reputation: 800

From looking at your XAML code I'm assuming that the image on screen is not clickable and isn't to be interacted with directly by the user.

Based on the above assumption, you can add IsHitTestVisible="False" to the image which will allow the user to "click through" the image.

But, this will of course allow the user to "click through" the image and click buttons 2,3 and 4. So you will need to add some functionality which calculates the position of the image and sets the buttons directly behind it to IsHitTestVisible="False" also.

Upvotes: 1

Related Questions