#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>