IsLightDismissEnabled="True" is not actually dismissing the popup

Question

i have a pop up and i want to close it when i tap anywhere outside the pop up. i searched and everyone advised me to use the property IsLightDismissEnabled; however if i touch outside, it will only remove the pop oup leaving everything inactive with a grey like screen as if it doesnt close the pop up completely this is my code snippet:

 <Popup x:Name="logincontroler" IsOpen="False" Margin="0,190,896,276" IsLightDismissEnabled="True">
            <StackPanel Height="300" Width="470" x:Name="popup" FlowDirection="RightToLeft">
                <Grid Width="470" Background="White" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="70"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <RichEditBox Grid.Row="1" Height="250" TextWrapping="Wrap" FontSize="20" Name="notesPopupTextBox" FlowDirection="LeftToRight"/>
                    <StackPanel Grid.Row="0" Orientation="Horizontal" Background="#FFE3E3E5">
                        <Button Name="CanclePopupButton" Content="Cancel" Width="64" Height="64" Click="CanclePopupButton_Click" />
                        <Button Name="ClearNotePopupButton" Content="Clear" Width="64" Height="64" Click="ClearNotePopupButton_Click" />
                        <Button Name="saveNoteButton" Content="Save" Width="64" Height="64" Click="saveNoteButton_Click" />

                        <TextBlock FontWeight="Medium"  FontSize="40" Foreground="#2a2a86" Margin="170 12 0 0">Note</TextBlock>
                    </StackPanel>
                </Grid>
            </StackPanel>
        </Popup>

this is my code for the events

 private void ShowButton_Click(object sender, RoutedEventArgs e)
    {
        logincontroler.IsOpen = true;
        flipView1.IsEnabled = false;
    }
    private void CanclePopupButton_Click(object sender, RoutedEventArgs e)
    {
        logincontroler.IsOpen = false;
        flipView1.IsEnabled = true;
    }

Am I missing anything? thank you in advance

Answer 1

Are you sure you don't have some other code in the App that you are not showing us?
There should be no Gray box behind the Popup.
I have just tested your code on an empty Windows 8.1 (XAML+C#) App and it works fine.

Try creating and Blank Windows 8.1 App and make you MainPage like this:

MainPage.xaml

<Page
    x:Class="App19.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App19"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    RequestedTheme="Light">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Popup x:Name="logincontroler" IsOpen="False" Margin="0,190,896,276" IsLightDismissEnabled="True">
            <StackPanel Height="320" Width="470" x:Name="popup" FlowDirection="RightToLeft">
                <Grid Width="470" Background="BurlyWood" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="70"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <RichEditBox Grid.Row="1" Height="250" TextWrapping="Wrap" FontSize="20" Name="notesPopupTextBox" FlowDirection="LeftToRight"/>
                    <StackPanel Grid.Row="0" Orientation="Horizontal" Background="#FFE3E3E5">
                        <Button Name="CanclePopupButton" Content="Cancel" Width="64" Height="64" />
                        <Button Name="ClearNotePopupButton" Content="Clear" Width="64" Height="64" />
                        <Button Name="saveNoteButton" Content="Save" Width="64" Height="64" />

                        <TextBlock FontWeight="Medium"  FontSize="40" Foreground="#2a2a86" Margin="170 12 0 0">Note</TextBlock>
                    </StackPanel>
                </Grid>
            </StackPanel>
        </Popup>
        <Button Content="Show Popup" HorizontalAlignment="Left" Margin="692,260,0,0" VerticalAlignment="Top" Click="ShowButton_Click"/>
    </Grid>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace App19
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void ShowButton_Click(object sender, RoutedEventArgs e)
        {
            logincontroler.IsOpen = true;
        }
    }
}

This has to work.
And comparing this with your solution should help you find the problem. If not, just edit your question with more information. (more code)

Note: I removed the click events from your popup, they were not needed to exemplify your problem, right?