#869 – Don’t Leave a Popup Window Open

You can leave a Popup window open while the user interacts with other controls in your application by leaving the StaysOpen property set to true.

You wouldn’t typically do this, however, because this leads to behavior that is a bit odd and not typical.  The popup window will always be on top of the main application window, so it blocks any portion of the application that ends up under the popup.  If the user has moved the main window, the popup may end up located somewhere that isn’t close to the main window and it may not be obvious what application it belongs to.

If you do want the popup to remain visible until the user explicitly asks to hide it, you should:

• Include some indication, like a title, that indicates the parent application
• Provide a control, like an OK button, that allows the user to explicitly hide the popup

#868 – A Popup Stays Open By Default

You make a Popup control visible by setting its IsOpen property to true.  By default, the popup will then stay open until you set the IsOpen property back to false.

You can also set the popup’s StaysOpen property to false, which causes the popup to close as soon as the user clicks anywhere else in the application (outside of the popup’s boundaries).

In the example below, we set IsOpen to true in a MouseEnter event handler.  But we’ve set StaysOpen to false so that the popup automatically closes whenever we click on something outside of the popup’s boundaries.

    <StackPanel Margin="15" Orientation="Horizontal">
        <Button Content="Learn About Caesar"
            Margin="5" Padding="10,5"
            VerticalAlignment="Center"/>
        <TextBlock Text="?" FontWeight="Bold" FontSize="24"
               VerticalAlignment="Center"
               MouseEnter="question_MouseEnter"/>
        <Popup Name="popCaesar" IsOpen="False" StaysOpen="False">
            <Border BorderBrush="Blue" BorderThickness="1"
                Background="AliceBlue">
                <StackPanel Orientation="Horizontal">
                    <Image Source="Caesar.jpg" Height="100"/>
                    <TextBlock Text="Julius Caesar was a Roman emperor who lived from 100 BC to 44 BC"
                            Margin="10"
                            Width="150" TextWrapping="Wrap"/>
                </StackPanel>
            </Border>
        </Popup>
    </StackPanel>