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

866-001

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

3 Responses to #866 – Displaying a Popup Window

  1. Pingback: Dew Drop – July 18, 2013 (#1,587) | Alvin Ashcraft's Morning Dew

  2. Pingback: #867 – Controlling Whether a Popup Is Open Using Data Binding | 2,000 Things You Should Know About WPF

  3. Pingback: #870 – Popup Is a ContentControl | 2,000 Things You Should Know About WPF

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: