Microsoft > WPF >> Intro To WPF Views : 11043
Rate This Article :

Different types of PopUp used in WPF

Different types of Pop-Up in WPF

Table of Contents

  •          Introduction
  •          How to create a Pop-Up in WPF
  •          Calling the Pop-Up page in Main Window
  •          Conclusion




The Popup in XAML represents a WPF Popup control(<Popup></Popup>). As you see there are many properties present among which I will be listing few for your reference.

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. There are other properties like Horizontal Alignment and Vertical Alignment which 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.

 <Popup Margin="10,13,2,13" Name="myPopup" HorizontalAlignment="Right"

                 VerticalAlignment="Bottom" Width="122" Height="400" />

        And there is also another property that you should keep in mind to make a popup control visible, is to set IsOpen property always true.


 How to create a POP UP in WPF

Follow the below mentioned steps for creation of popup in wpf using xaml.


Basic Popup creation

                1. Create a new project in Visual Studio 2010, and after project is loaded successfully the solution explorer screen will appear as shown below:


.                                2.  In the above shown screen shot open MainWindow.xaml in that screen will appear as shown below, in that below shown screen xaml code for popup is placed.

second screen.png

              3.      Inside the grid tag, place the popup tag and set the IsOPen property to true. The screen will appear as shown below. And the content in the textblock will be placed inside the popup,with the background color Red.


        <Popup HorizontalAlignment="Right" VerticalAlignment="Top" Width="194" Height="200" IsOpen="True">

            <TextBlock Background="IndianRed" >This is my popup</TextBlock></Popup>


          third screen.png

            This is the simple popup creation using WPF.

Now we discuss about the popup created using button click in XAML window.

Popup Creation Using Button Click

Now I have created a checkbox and when I press the check box the pop up need to displayed in the screen

                    1.    Initially we need to create a Check box inside the xaml screen for that we need to configure the Check box in xaml

 <CheckBox x:Name="btnPopup" Height="30" Width="50" Content="Click" VerticalAlignment="Top"                     HorizontalAlignment="Left"/>

                After entering these values the screen will appear as shown below:

fourth screen.png

                   2.     After completion of the above step, we should bind the Check box name inside the IsOPen property of the Popup tag inside the WPF. 

IsOpen="{Binding ElementName=btnPopup, Path= IsChecked}"

                                        3.   After binding the IsOpen property, the screen will appear as shown below:

fifth screen.png

Placing PopUp inside a frame in XAML

Now we see how to place a popup inside a frame WPF.

1.       For this we need to create a new page in the solution explore. Name the page as the Page1.xaml:

sixth screen.png

2.       Now open that Page1.xaml and enter your contents that need to be displayed. I have placed my contents inside the Page1.xaml as shown below:

seventh screen.png

3.       Now moving into the MainWindow.xaml screen placing the page1.xaml inside the frame and the steps shown below:

eight screen.png

4.       Now as you see the I have placed the frame tag inside the border and the popup tag and in the frame tag I have given the source as my newly created page.

5.       So if we give the page1.xaml inside the frame the page will be given the border and the page1 will be placed inside the border.

6.       The screen shot is shown below for you reference:

ninth screen.png

final screen.png


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.

About Author
Venkatraman Natarajan
Total Posts 3
Comment this article
Email Address* (Will not be shown on this website.)
Enter Image Text*
View All Comments
I want to bind buttons dynamically to grid inside the popup. Their should also be a border and a textblock. I want to assign specific grid column to a specific button
  Privacy   Terms Of Use   Contact Us
© 2016 Developerin.Net. All rights reserved.
Trademarks and Article Images mentioned in this site may belongs to Microsoft and other respective trademark owners.
Articles, Tutorials and all other content offered here is for educational purpose only and its author copyrights.