Tap elsewhere to close panel


I have a pop-up panel that I want to be able to close by tapping anything that’s not the panel itself.

Is there a direct function for this? If not, what do you reckon is the best practice for this?

Thank you in advance.

There is no direction function for that, and the best practice is to put something in the background. That something can be fully transparent (use HitTestMode) if you like:

    module.exports = {
        outside: function() {
            console.log("outside clicked");
        inside: function() {
            console.log("inside clicked");
        <Panel Margin="64" Clicked="{inside}">
            <Rectangle Color="#18f" CornerRadius="8" />
        <Panel HitTestMode="LocalBounds" Clicked="{outside}" />


The popup lies on top of a darker semi-transparent panel that covers the screen and with the layer set to Background. Could I just add a Clicked action on that one, or won’t that work since it’s set to Background?

Give it a go and see if it works :slight_smile: If it doesn’t post a complete, minimal repro - similar to what I posted above.

It worked :slight_smile: Thanks for the help!

<Panel Layer="Overlay">
	<StackPanel ItemSpacing="5" Alignment="Center" ContentAlignment="Center" Padding="20,30,20,20" Margin="10" Width="100%">
		<TextInput TextAlignment="Center" FontSize="16" Value="{singleLineEditValue}"/>
		<Rectangle Height="2" Fill="#E1E1E1" Margin="0,0,0,5"/>
		<hangout.Button ButtonColor="Button.Green" Text="Save" Clicked="{saveInput}"/>

		<Rectangle Color="#fff" CornerRadius="5" Layer="Background">
			<Shadow Size="2" Distance="2" Color="#0004" />
	<Panel Layer="Background" HitTestMode="LocalBounds" Clicked="{closeSingleLineValuePanel}">
		<Rectangle Color="#0004" />