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.
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.
Roshan LalPosted Dec 13, 2017, 1:56 AM
Is there a way from stopping that popup from overflowing from the window and show a scrollbar instead if such a situation arises
SubashPosted Sep 30, 2016, 6:58 AM
Nice
SubashPosted Sep 30, 2016, 6:58 AM
Its working
Shweta LodhaPosted Feb 27, 2014, 3:10 PM
Nice article