Playing with the Popup Control

I've recently taken over the documentation for some of the Silverlight controls, and one of the controls I now own is Popup. One of the first things I do when preparing to document a control is play around with it in code. Using the Popup control is pretty straightforward, but I wanted to share the basics, particularly since we didn't get the documentation in for Beta1 (see Margaret's post; we are a bit understaffed) Popup is useful for hosting content, particularly a UserControl, in a new "popup" on top of the existing Silverlight content.

To get started, I created a Silverlight application project and added a user control named MyControl to the project.

Following is the code for my user control. It's a control that contains a button which, when clicked, causes the pop-up to disappear. (It's basic--I don't want to detract from the main point of this post). First the code in MyControl.xaml:

<UserControl x:Class="PopupEx.MyControl"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Width="150" Height="80">
<Border BorderThickness="5" BorderBrush="Black">
<StackPanel x:Name="LayoutRoot" Background="White">
<TextBlock Margin="5" Text="See the popup?" />
<Button Width=" 50" Content="Yes" Click="Button_Click"/>
</StackPanel>
</Border>
</UserControl>

Here's the click event handler for MyControl.xaml.cs. The event-handler simply sets the Visibility property to Visibility.Collapsed, to remove it from the layout.

private void Button_Click(object sender, RoutedEventArgs e)
{
// Remove the control from the layout.
this.Visibility = Visibility.Collapsed;
}

Next I'll add a button to Page.xaml for my main Silverlight control, which when clicked, shows my user control. Paste this into the existing Grid in Page.xaml:

<Button Width="100" Height="50" x:Name="showPopup" Click="showPopup_Click"
Content="Show Popup" />

My next task is to handle the click event for the ShowPopup button. I'll need to add a using statement for System.Windows.Controls.Primitives to Page.xaml.cs, because Popup is in the Primitives namespace:

using System.Windows.Controls.Primitives;

Now I need to handle the Click event and show my user control. I'll create a new Popup object and set its Child property to my user control. I can optionally tweak where the popup shows up on the screen with VerticalOffset and HorizontalOffset. Finally, I'll show the popup by setting its IsOpen property to true.

// Declare the popup object.
Popup p;
private void showPopup_Click(object sender, RoutedEventArgs e)
{
// Create a popup.
p = new Popup();

    // Set the Child property of Popup to an instance of MyControl.
p.Child = new MyControl();

    // Set where the popup will show up on the screen.
p.VerticalOffset = 200;
p.HorizontalOffset = 200;

    // Open the popup.
p.IsOpen = true;
}

That's all there is to it. When you run the sample, you can click the button to show the popup. When you click the popup button, the popup disappears.

--Cheryl

Comments

• Anonymous
  April 18, 2008
  PingBack from http://blogs.msdn.com/silverlight_sdk/archive/2008/04/18/playing-with-the-popup-control.aspx

• Anonymous
  April 19, 2008
  Cheryl; These write ups are so nice and helpful. Let me ask you this. Are we limited to use these popups only for "Windows" browsers or are they usable among the three platforms? Thanks! ..Ben

• Anonymous
  April 20, 2008
  OK so this isn't a pop-up at all, just some overlay behavior. Is security the reason for a refusal to support windowing?

• Anonymous
  April 23, 2008
  In response to the comments: You are correct the popup is an overlay. The popup appears within the boundaries of a Silverlight control hosted in a browser. It's not a true window because, as a part of Silverlight, it is cross-browser, cross OS. Write it once, and it should run everywhere. Cheryl

• Anonymous
  April 27, 2008
  ...but if you were looking for a control that popped content over html then we've blogged about a Silverlight 2 lightbox @ http://teamlive.wordpress.com/2008/04/27/silverlight-2-lightbox/

• Anonymous
  April 28, 2008
  Thank you. this article really helps me :)

• Anonymous
  June 19, 2009
  What happens when you put a combobox on your popup control?  It crashes for me.

• Anonymous
  June 23, 2010
  HI,   In my page i have a silverlight graph and a grid having a view link. By clicking on the link a pop up will come(i am using ajax modal popup control). But when i click on to the view the pop up displays behind the grarph. Can please help me in this matter.

• Anonymous
  July 21, 2010
  Hi if we want to make the pop up control movable with the mouse is there any properties associated with this

• Anonymous
  September 22, 2010
  Hello! Lets get a little more detailed, a little more complex.  Are you able to customise the appearance of a Popup control?  For example, a default header template or something like this (I think I know the answer to that is no already - there is no template). More importantly, I want to be able to completely control the animations involved in the popup appearing.  For my WP7 work I want it to look like the page turning animation, for my day job I want it to have the fade in animation, for a game I'd prefer the popup animation to be the child content appearing from the top of the screen and sliding down - sounds and everything.  Can these details be accessed by us, as developers - and how? Thanks!

• Anonymous
  May 24, 2015
  <a href="www.deltatechnologies.in>web designing in Agra</a> always thanks for this nice article. Thanks Again