BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Information Controls - Popup

The forty-fifth part of the Windows Presentation Foundation Fundamentals tutorial completes the individual examinations of the WPF information controls. This instalment looks at the Popup control, which allows controls to be shown as pop-ups.

Popup

Popup is a WPF primitive that inherits from the FrameworkElement class. It allows you to create a pop-up window based upon any single child control, although the child can be a layout control with many children of its own. The pop-up window has no chrome so appears as a control floating above the window, in a similar manner to the appearance of a ToolTip.

The appearance of a Popup is not the only similarity with a ToolTip. They are positioned in the same way, using the PlacementTarget, PlacementMode, HorizontalOffset and VerticalOffset properties. They both permit 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.

The main difference between a ToolTip and a Popup is the way that the classes are used. ToolTips are generally displayed and hidden automatically, and are linked to the controls whose purpose they describe. Popups tend to be more complicated. They are shown and removed manually and are often used for requesting input where you might otherwise use a dialog box. They are particularly useful when using user interface design patterns that are based upon data binding, such as Model View ViewModel (MVVM).

The two controls are so similar that we won't go into detail in this article. Instead, we'll look at a few simple examples of the use of Popups.

Example Popup

To see Popups in action let's try an example. Create a new WPF application project in Visual Studio, naming the solution, "PopupDemo". Once initialised, replace the XAML in the main window with the code below:

<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">
            <StackPanel Background="PaleGreen">
                <Label HorizontalAlignment="Center">Click to hide</Label>
                <Button Click="Hide_Click" Margin="10">Hide</Button>
            </StackPanel>
        </Popup>
    </Grid>
</Window>

The window includes a Button that is visible when the program is launched. In a moment we'll wire up the Click event of the button so that it displays the Popup, which is initially hidden. Note the Placement property, which is configured so that the Popup will appear near the mouse pointer when displayed. The Popup holds a StackPanel as its child. Within the StackPanel is a Label and a Button. We'll make this Button hide the Popup.

To display of hide a Popup you can set the IsOpen property. This Boolean property is set to true to show the Popup and false to hide it. Using the property to complete the program, add the following code behind the window.

private void Show_Click(object sender, RoutedEventArgs e)
{
    MyPopup.IsOpen = true;
}

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

Try running the program and clicking the buttons. Note that if you move the initial window when the pop-up window is visible, the Popup remains stationary.

WPF Popup Example

Transparency

Popups can be of any shape but are always contained within a rectangular bounding box. By default, areas outside of the pop-up window's control but within the box are filled with a solid colour. We can see this by changing the Popup so that it is elliptical.

Modify the XAML for the Popup element, as follows:

<Popup Name="MyPopup"
       Placement="Mouse"
       HorizontalOffset="-100"
       VerticalOffset="-100">
    <Grid>
        <Ellipse Width="200" Height="200" Fill="Aquamarine"/>
        <Button Click="Hide_Click" Margin="80">Hide</Button>
    </Grid>
</Popup>

Run the program again and click the button to show the Popup. You should see that the bounding box is visible, which is not ideal:

WPF Popup without transparency

You can specify that the Popup supports transparent areas by setting the Boolean AllowsTransparency property to true. Once this setting is changed, any areas of the Popup that are not covered by a control become transparent.

For the final example, modify the Popup XAML to add the AllowsTransparency attribute:

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

When the pop-up window is displayed, its background is now transparent:

WPF Popup with transparency

21 January 2014