Popup Window in WPF

In this article we will see how to use a Popup Window in WPF. The Popup control displays content in a separate window that floats over the current application window. The following snapshot shows a Popupcontrol that is positioned with respect to a button that is its parent.

Popup-in-WPF.jpg

What Is a Popup Window?

A Popup control displays content in a separate window relative to an element or point on the screen. When the Popup is visible, the IsOpen property is set to true.

The following XAML code will create a Popup Window and a button will acts as its parent:

  <button content="Click Me forLogin!!" click="Login Click" />
    <popup name="popup" is open="False" placement
="Mouse">

<
BorderBorder Brush="Black" BorderThickness="1" Background="Coral">
<
StackPanel Orientation="Horizontal">
<
Image Source="/WPF.png" Height="100"/>
<
Grid>
<
Grid.RowDefinitions>
<
RowDefinition Height="Auto"/>
<
RowDefinition Height="Auto" />

<RowDefinition Height="Auto" />
</
Grid.RowDefinitions>
<
Grid.ColumnDefinitions>
<
ColumnDefinition />
<
ColumnDefinition />
</
Grid.ColumnDefinitions>
<
TextBlock Text="User Name" Grid.Row="0" Grid.Column="0"/>
<
TextBox Grid.Row="0" Grid.Column="1" Name="txtName" />
<
TextBlock Text="word" Grid.Row="1" Grid.Column="0"/>
<
wordBox Grid.Row="1" Grid.Column="1" Name="txtPwd" />
<
Button Content="OK" Grid.Row="2" Grid.Column="1" Click="PopUp_OK_Click"/>
</
Grid>
</
StackPanel>
</
Border>
</
popup>


What are Controls that implement Popup?

You can build Popup controls into other controls. The following controls implement the Popup control for specific uses:

  • Tool Tip
  • Context Menu
  • Expander
  • Combo Box

How to Close and Open a Popup?

Open a Popup - The Popup Control displays its contents when IsOpen set true.

privatevoid Popup_Ok_Click(object sender, RoutedEventArgs e)
{
   Popup1.IsOpen = true;

}


Where popup1 is the name of the popup control.

Closing a Popup - The Popup Control displays its contents when IsOpen is set to false.

privatevoid Popup_Ok_Click(object sender, RoutedEventArgs e)
{
   Popup1.IsOpen = false;

}


Where popup1 is the name of the popup control.

How to set the placement behavior of a Popup

To customize the placement of a Popup use the placement property of a Popup control and there are various options for customizing the placement of a Popup, such as custom, right, left, mouse and so on.

For example: Placement="Mouse"

Summary

In this article I showed how to use a Popup control in WPF. If you have any questions regarding improvement of this article then please do comment. Thank you for reading my article.

Up Next
    Ebook Download
    View all
    Learn
    View all