POP UP 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 buttonthat is its parent.

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 Is Openproperty is set to true.

The following Xaml Code Will Create a Popup Window and 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="Password" Grid.Row="1" Grid.Column="0"/>

<PasswordBox 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 aPopup ?

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 set false.

privatevoid Popup_Ok_Click(object sender, RoutedEventArgs e)

{

Popup1.IsOpen = false;

}

where popup1 is the name of the popup control

How to set placement behavior of Popup?

To customize the placement of Popup use the placement property of a

Popup control and there are various options in customizing the placement of a Popup such as

custom, right, left, mouse etc.

EX: Placement=”Mouse”

Summary:

In this article I showed how to use Popup control in WPF. If you have any question regarding

improvement of this article please do comment. Thank you for reading my article :)

Source Code:Download