How to make Panel clickable?

How-to Discussions
1

Hello, i have quick question. How to make panel clickable in this code? It fires the function only when i click on rectangles inside of it.

    <Panel Alignment="CenterRight" Margin="0,0,16,0" Clicked="{add}" Width="25" Height="25" >
      <Rectangle Width="25" Color="#fff" Height="1" />
      <Rectangle Width="25" Color="#fff" Height="1" >
        <Rotation Degrees="90" />
      </Rectangle>
    </Panel>

Thanks!

2

HitTestMode is your friend here. :slight_smile:

Try setting <Panel HitTestMode="LocalBoundsAndChildren"> to register interactions for the entire panel.

3

Hi Martin,
you have two options to achieve what you’re looking for, but both of them require you to understand how hit testing on Panels work. By default, only visible elements consume clicks, so that explains the behaviour you’re seeing.

Option one - make the whole Panel contain a visual that covers all of the parent:

    <Panel Alignment="CenterRight" Margin="0,0,16,0" Clicked="{add}" Width="25" Height="25" >
      <Rectangle Width="25" Color="#fff" Height="1" />
      <Rectangle Width="25" Color="#fff" Height="1" >
        <Rotation Degrees="90" />
      </Rectangle>
      <Rectangle Fill="#fff8" /> <!-- this here adds a semi-transparent white rectangle -->
    </Panel>

Option two - override the default hit testing behaviour, which will make the Panel consume clicks even if it’s empty:

    <Panel Alignment="CenterRight" Margin="0,0,16,0" Clicked="{add}" Width="25" Height="25" HitTestMode="LocalBoundsAndChildren">
      <Rectangle Width="25" Color="#fff" Height="1" />
      <Rectangle Width="25" Color="#fff" Height="1" >
        <Rotation Degrees="90" />
      </Rectangle>
    </Panel>

You can read more on HitTestMode and its values in a lot of threads in forum, or by searching the Docs.