Popup Window in WPF

Introduction

This article describes how pop-up windows work. Popup is a WPF primitive that inherits from the FrameworkElement class. It allows us to create a pop-up window based upon any single child control or the child can be the layout control with many children of it's own.

Background

A Tooltip is placed using the PlacementTarget, PlacementMode, HorizontalOffset and VerticalOffset properties. Like a Tooltip, a Popup also permits the use of drop shadows with the HasDropShadow property. You can also detect when a Popup is displayed or hidden with the Opened and Closed events. We have also use the IsOpen property, a boolean property.

Solution

On running the application the window appears that includes a button. When we click on the button, it displays a popup that is initially hidden. The placement property is configured so that the pop-up will appear near the mouse pointer when displayed. The popup holds the stackpanel as it's child. Within the stackpanel is a label and a button then we will make this button hide the popup.

Procedure

Step 1

First, in window.xaml we will define a button and pass the values to it's Click property that is the name of the event generated on the clicking of the Show popup button. Here two grids are used, one inside the other. The other grid contains the ellipse with color filled and a button showing the Hide text on it. The first grid holds the show button of the popup and the other grid.

<Window x:Class="PopupDemo.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="ToolTip Demo"

        Height="200"

        Width="250">

    <Grid Margin="10">

        <Button Width="100" Height="25" Click="Show_Click">Show Popup</Button>

        <Popup Name="MyPopup"

               Placement="Mouse"

               HorizontalOffset="-100"

               VerticalOffset="-100"

               AllowsTransparency="True">

            <Grid>

                <Ellipse Width="200" Height="200" Fill="Aquamarine"/>

                <Button Click="Hide_Click" Margin="80">Hide</Button>

            </Grid>

        </Popup>

    </Grid>

</Window>

 

Step 2

 

Next, we will create a class, in that two events are generated, Show_Click and Hide_Click.

 

Under the Show_Click event we use the IsOpen property that is a boolean property that is set to true to show the popup.

Similarly, under the Hide_Click event the IsOpen property is set to false to hide the popup.

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

 

namespace PopupDemo

{

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

        }

 

        private void Show_Click(object sender, RoutedEventArgs e)

        {

            MyPopup.IsOpen = true;

        }

 

        private void Hide_Click(object sender, RoutedEventArgs e)

        {

            MyPopup.IsOpen = false;

        }

    }

}

 

Output

1. The following window appears on running the application showing the popup button:

 

 

 

2. Here we click on the Popup Button:

 

 

 

3. On clicking the "Show Popup" button, the popup window appears showing the hide button with aquamarine color as in the following:

 

 

 

4. And on clicking of the hide button:

 

 

 

5. The window returns back to it's original state