Windows Phone close popup if tap anywhere else

Question

I have a Windows Phone app that I'm currently developing, and my share button opens a small popup with several options, using the following code:

       private void share_Click(object sender, System.EventArgs e) 
    {

        Popup share= new Popup();
        share.Child = new sharePopup();
        share.IsOpen = true;
        share.VerticalOffset = 30;
        share.HorizontalOffset = 0;
    }

Now, this Popup has a 'close' button, but if I don't tap it, and instead tap another button on the previous, still visible page, the popup stays in place, even after moving to a new page. I HAVE to click on 'close' for the popup to go away.

What I'm looking for is a way for the popup to close if I tap anywhere outside of the popup itself. Is there a predefined method to do this? If not, what ways could I go at it?

Thanks in advance

EDIT: Here's the c# code for the pop-up

      public partial class sharePopup : UserControl
{
    public sharePopup()
    {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {            
        Popup mensaje = this.Parent as Popup;
        mensaje.IsOpen = false;
    }
      private void UserControl_Loaded(object sender, RoutedEventArgs e)
    {
        this.Focus();
    }

    private void UserControl_LostFocus(object sender, RoutedEventArgs e)
    {
        Popup mensaje = this.Parent as Popup;
        mensaje.IsOpen = false;
    }
}

}

The XAML for the popup only contains size, color and button definitions:

<UserControl x:Class="MSPinTrainingApp.sharePopup"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480"
Width="480" Height="200" >

<Grid x:Name="LayoutRoot" LostFocus="LayoutRoot_LostFocus">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.Background>
        <SolidColorBrush Color="{StaticResource PhoneChromeColor}"/>
    </Grid.Background>
    <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
               Margin="3" x:Name="txtMensaje" Text="Compartir:" LostFocus="txtMensaje_LostFocus" />
    <Image Margin="70,60,335,62" Source="appbar.email.hardedge.png" Stretch="Fill" Tap="Image_Tap_1"/>
    <Image Margin="200,60,200,62" Source="appbar.facebook.png" Stretch="Fill" Tap="Image_Tap_2"/>
    <Image Margin="335,60,70,62" Source="appbar.twitter.bird.png" Stretch="Fill" Tap="Image_Tap_3"/>
    <Image Margin="430,-12,11,134" Source="/appbar.close.png" Width="50" Tap="Image_Tap_4"/>
</Grid>

We would need to see the XAML, but it looks like you're setting the LostFocus event on a text box. Are you making the text box get focus wen the popup is displayed? If not, then LostFocus will not be called on that control. — Paul Sasik, Feb 22 '13 at 20:12
You're right, that's my mistake... Posting the XAML shortly. — iVikD, Feb 22 '13 at 20:20
OK. The rest of my earlier comment is unanswered though. Are you setting focus to txtMensaje? See this for more info: http://stackoverflow.com/questions/124649 — Paul Sasik, Feb 22 '13 at 20:27
No, I wasn't, and I removed that txtMensaje_LostFocus. Using that other question you posted, I added a UserControl_Loaded(...) method with this.Focus() in it, and a UserControl_LostFocus(...) with code for closing the popup, but still nothing. — iVikD, Feb 22 '13 at 20:35
What are you seeing in the debugger? Alos, I would try to continue with the text box idea and setting the focus to it explicitly. LostFocus should get called on it. — Paul Sasik, Feb 22 '13 at 20:43

score 6 · Answer 1 · answered Nov 26 '14 at 04:42

6

I found helpful just set IsLightDismissEnabled="True" when you declare your Popup control. MSDN description

answered Nov 26 '14 at 04:42

ivamax9

2,601
24
33

score 2 · Answer 2 · answered Aug 03 '16 at 14:22

Instead of playing with "lost focus", which does not work in all cases (e.g if you have textboxes or other focusable controls in Popup). I recommend dismissing popup, by detecting tap in root visual:

            Application.Current.RootVisual.Tap += (s, e) =>
            {
                popup.IsOpen = false;
            };

Paul Sasik · Answer 3 · 2013-02-22T19:51:28.623

1

You could try handling the LostFocus event of the UIElement. When your OnLostFocus handler is called within the popup, then close the popup (close itself).

edited Feb 22 '13 at 19:51

answered Feb 22 '13 at 19:44

Paul Sasik

79,492
20
149
189

That seems like a step in the right direction, but I would need to first move focus from the main page to the popup when clicking the share button... I'm unfamiliar with how to do this, could you possibly provide a link or anything to it? – iVikD Feb 22 '13 at 19:52
The focus should automatically go to the top-most UIElement. In your case it should be the popup. – Paul Sasik Feb 22 '13 at 19:53
I see. I added a popup_LostFocus method inside the sharePopup.xaml.cs control telling it to close the popup, but it does nothing as is – iVikD Feb 22 '13 at 19:56
@iVikD - Should be as simple as setting the `Focus` property. Unless you try.....of course.... – Security Hound Feb 22 '13 at 19:59
We may need to see more code to help. Your XAML and the handler etc. – Paul Sasik Feb 22 '13 at 20:01
@PaulSasik alright, I'll update the question with some more code. – iVikD Feb 22 '13 at 20:03
LostFocus event is not triggering. – Arsman Ahmad Jul 09 '19 at 08:00

score 1 · Accepted Answer · answered Feb 23 '13 at 20:38

1

After much failed experimentation and looking around the web, I came upon the Coding4Fun toolkit, and was able to make a working popup with its MessagePrompt. The toolkit is available at http://coding4fun.codeplex.com/

answered Feb 23 '13 at 20:38

iVikD

296
7
21

Windows Phone close popup if tap anywhere else

4 Answers4