How can I make the inner elements respond to touch events?

How-to Discussions
1 
<Panel ux:Class="GenderSwitch">
    <Rectangle
        Fill="#fff"
        Opacity="0.03"
        CornerRadius="{Resource controlRadius}" />
/* If I put the WhilePressed at this level, it does respond */

&lt;Grid ColumnCount=&quot;2&quot; Columns=&quot;1*, 1*&quot; CellSpacing=&quot;10&quot;&gt;
    &lt;Panel HitTestMode=&quot;LocalBoundsAndChildren&quot;&gt;
        &lt;StackPanel Alignment=&quot;Center&quot; Orientation=&quot;Horizontal&quot;&gt;
            &lt;Icon IconColor=&quot;#ccc&quot; Size=&quot;20&quot; Text=&quot;{Resource male}&quot; /&gt;
            &lt;Text Margin=&quot;10,0,0,0&quot; TextColor=&quot;#ccc&quot; Value=&quot;Hombre&quot; /&gt;
        &lt;/StackPanel&gt;

        /* This doesn&#39;t respond */
        &lt;WhilePressed&gt;
            &lt;Scaling Factor=&quot;0.5&quot; /&gt;
        &lt;/WhilePressed&gt;
    &lt;/Panel&gt;
    &lt;Panel HitTestMode=&quot;LocalBoundsAndChildren&quot;&gt;
        &lt;StackPanel Alignment=&quot;Center&quot; Orientation=&quot;Horizontal&quot;&gt;
            &lt;Icon IconColor=&quot;#ccc&quot; Size=&quot;20&quot; Text=&quot;{Resource female}&quot; /&gt;
            &lt;Text Margin=&quot;10,0,0,0&quot; TextColor=&quot;#ccc&quot; Value=&quot;Mujer&quot; /&gt;
        &lt;/StackPanel&gt;

        /* This doesn&#39;t respond */
        &lt;WhilePressed&gt;
            &lt;Scaling Factor=&quot;0.5&quot; /&gt;
        &lt;/WhilePressed&gt;
    &lt;/Panel&gt;
&lt;/Grid&gt;

The WhilePressed or any other event, doesn’t respond in the inner elements, only if I put it in the first level (at the same level of Grid).

If there is something I am missing I would appreciate that someone points me to the right direction.

Thanks in advance.

2

The almost-transparent rectangle lies on top of everything else inside the Panel and “steals” the touches from the underlying components. (E.g. whatever you try to press, you hit the rectangle instead).

If you change hittestmode to “None” for the rectangle things should work better. :slight_smile:

3

I let myself be fooled by transparency and did not take into account the rectangle covering the other elements, I just moved it to the bottom and everything works as expected.

Thanks for your help Remi. :smiley:

4

Happy to help! :slight_smile:

Also, if the rectangle is just there to provide an appearance for the panel then you can also set the Rectangle’s layer-property to background. (e.g. <Rectangle Layer="Background"/>).

5

Great, thanks for the info. :smiley: