WPF Popup

A popup in WPF is a window that floats over a page or window providing the functionality for some quick action, for example, a login control on a page or window or an animated popup tip of a control.

WPF comes with a Popup control to provide this functionality. This article shows you how to create and use a popup control available in Windows Presentation Foundation (WPF). I will use XAML with C#.

Introduction to WPF Popup

The Popup element of XAML represents a WPF Popup control.

  1. <Popup></Popup>

The Width and the Height properties represent the width and the height of a popup. The Name property represents the name of the control that is a unique identifier of a control. The Margin property is used to set the location of a Popup on the parent control. The HorizontalAlignment and VerticalAlignment properties are used to set horizontal and vertical alignments.

The following code snippet sets the name, height, and width of a Popup control. The code also sets horizontal alignment to left and vertical alignment to top.

  1. <Popup Margin="10,10,0,13" Name="Popup1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="194" Height="200" />

To make a popup control visible, you need to set IsOpen property to true.

IsOpen="True"

Adding WPF Popup Contents

A Popup control can have only one child. The following code snippet adds a text block to the popup control.

  1. <Popup Margin="10,10,0,13" Name="Popup1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="194" Height="200" IsOpen="True">
  2. <TextBlock Name="McTextBlock" Background="LightBlue"> This is popup text </TextBlock>
  3. </Popup>

If you wish to add more contents to the popup control, you may have a stack panel or grid as a child control and place more contents on the panel or grid controls. The following code snippet creates a stack panel and places some contents on it.

  1. <Popup Margin="10,10,0,13" Name="Popup1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="194" Height="200" IsOpen="True">
  2. <StackPanel>
  3. <TextBlock Name="McTextBlock" Background="LightBlue"> This is popup text </TextBlock>
  4. <Button Content="This is button on a Pupup" />
  5. </StackPanel>
  6. </Popup>

The popup created using the above code looks like Figure 1.

Popup window
Figure 1. Popup window

Animated a WPF Popup

Once you have a popup content defined, you can do anything with this content depending on the controls. For instance, if you are using an image as content, you can do anything with popup what you can do with the image.

The following code shows how to animate a popup window.

  1. <StackPanel>
  2. <CheckBox Name="PCheckBox" Margin="10,10,0,0" Content="Popup Window" />
  3. <Button HorizontalAlignment="Left" Width="129" Margin="10,10,0,0">
  4. <Button.Triggers>
  5. <EventTrigger RoutedEvent="Button.Click">
  6. <BeginStoryboard>
  7. <Storyboard>
  8. <DoubleAnimation Storyboard.TargetName="theTransform" Storyboard.TargetProperty="(RotateTransform.Angle)" From="0" To="360" Duration="0:0:5" AutoReverse="True" />
  9. </Storyboard>
  10. </BeginStoryboard>
  11. </EventTrigger>
  12. </Button.Triggers> Start Animation
  13. </Button>
  14. <Popup IsOpen="{Binding ElementName=PCheckBox,Path=IsChecked}" PlacementTarget="{Binding ElementName=PCheckBox}" AllowsTransparency="True" PopupAnimation="Slide" HorizontalOffset="150" VerticalOffset="100">
  15. <Canvas Width="100" Height="100" Background="Green" Margin="150">
  16. <Canvas.RenderTransform>
  17. <RotateTransform x:Name="theTransform" />
  18. </Canvas.RenderTransform>
  19. <TextBlock TextWrapping="Wrap" Foreground="LightGray"> Rotating Popup </TextBlock>
  20. </Canvas>
  21. </Popup>
  22. </StackPanel>

Summary

In this article, I discussed how to create and use a Popup control available in WPF. The article also shows how to animate a popup.