#866 – Displaying a Popup Window

You can include content in a popup window using the Popup control, which appears on top of your application.

Below, we define a Popup that includes content within a blue border.

    <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">
            <Border BorderBrush="Blue" BorderThickness="1"
                    Background="AliceBlue">
                <StackPanel Orientation="Horizontal">
                    <Image Source="Caesar.jpg" Height="100"/>
                    <StackPanel Orientation="Vertical">
                        <TextBlock Text="Julius Caesar was a Roman emperor who lived from 100 BC to 44 BC"
                                   Margin="10"
                                   Width="150" TextWrapping="Wrap"/>
                        <Button Content="OK" Click="btnOK_Click"
                                HorizontalAlignment="Right" Margin="10"
                                Padding="5,2"/>
                    </StackPanel>
                </StackPanel>
            </Border>
        </Popup>
    </StackPanel>

You make a Popup visible by setting its IsOpen property to true.  We set the property to true when the user hovers over the question mark and to false when they click on the OK button.

        private void question_MouseEnter(object sender, MouseEventArgs e)
        {
            popCaesar.IsOpen = true;
        }

        private void btnOK_Click(object sender, RoutedEventArgs e)
        {
            popCaesar.IsOpen = false;
        }