Popup Control

Beta 2 includes a wealth of new controls including the Popup (that is new, right? It’s not that I just didn’t notice it before?).

I received an email today asking if I’d do a short How Do I video on creating a Popup and I certainly will, but here is a wicked fast tutorial for those of you who can’t wait….

There are three approaches.

1. Create the Popup as Xaml, most easily in Blend

2. Create the Popup dynamically, most easily in Visual Studio

3. Create the Popup as a User Control (the right answer, once you’re comfortable with how Popups are created


Creating the Popup in Xaml

Here is a picture of what we’re going to build. The basic Silverlight control will have a button and an image…..


The button’s event handler makes the Popup visible.


If you are old enough to get the reference, from having watched it when it was first on, remind me to buy you a glass of milk the next time we’re at a conference together

There are two important things to notice:

  • the Popup covers any elements that are at  its location (when you create it you give it a vertical and horizontal offset from the upper left of the control) and
  • the Popup is entirely within the Silverlight control.

Method 1 – Xaml


Create your basic project with the Click Me button and the Image in Blend. Set their properties as usual.


Then select a Popup from the Asset Library


and place that inside your Grid as well. Make the Popup the container by double clicking on it, and you are ready to add the border and StackPanel. Double click on the panel to make it  the container and add the TextBlock and Button.  Set all the properties.

Once you have the controls set, it is time to save all the files and edit in Visual Studio.

Your Xaml file will look more or less like this:

    Width="640" Height="480" >

    <Grid x:Name="LayoutRoot" Background="White" >
            <RowDefinition Height="0.15*"/>
            <RowDefinition Height="0.85*"/>
        <Button x:Name="ShowPopupButton"
              FontFamily="Comic Sans MS" 
              Content="Click me!"/>
        <Image x:Name="LandscapeImage"
             Source="Desert Landscape.jpg" 
        <Popup x:Name="MyPopup" 
         <Border BorderBrush="Black" BorderThickness="5">
               <StackPanel x:Name="PopUpPanel" 
                        Height="Auto" Width="Auto" >
                   <TextBlock  x:Name="PopUpText"
                  Height="143" Width="Auto" 
                      Text="Danger Will Robinson!!"  
                      FontFamily="Comic Sans MS" FontSize="48" 
                  HorizontalAlignment="Center" VerticalAlignment="Center" 
                   <Button x:Name="ClosePopup"
                       FontFamily="Verdana" FontSize="14" />

Notice that the Popup has a VerticalOffset and a HorizontalOffset; that positions it with respect to the upper left hand corner of the Silverlight control.

The Code-behind

The Constructor sets up Page_Loaded which in turn sets up the event handlers for the two buttons,

public Page()
    // Required to initialize variables
   Loaded += new RoutedEventHandler( Page_Loaded );

void Page_Loaded( object sender, RoutedEventArgs e )
   ShowPopup.Click += new RoutedEventHandler( ShowPopup_Click );
   ClosePopup.Click += new RoutedEventHandler( ClosePopup_Click );

void ClosePopup_Click( object sender, RoutedEventArgs e )
   MyPopup.IsOpen = false;

void ShowPopup_Click( object sender, RoutedEventArgs e )
   MyPopup.IsOpen = true;

Creating the Popup Dynamically


An alternative approach is to set up the first button and the image as before, but to create the Popup in code.  In your Xaml file you just eliminate the Popup altogether. No other changes. The big change is in the code-behind:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Controls.Primitives;

namespace PopUpInCode
   public partial class Page : UserControl
      private Popup myPopup = new Popup();

      public Page()
         Loaded += new RoutedEventHandler( Page_Loaded );

      void Page_Loaded( object sender, RoutedEventArgs e )
         ShowPopup.Click += new RoutedEventHandler( ShowPopup_Click );  

      void ShowPopup_Click( object sender, RoutedEventArgs e )

         Border border = new Border();
         border.BorderBrush = new SolidColorBrush( Colors.Black );
         border.BorderThickness = new Thickness( 5.0 );

         StackPanel myStackPanel = new StackPanel();
         myStackPanel.Background = new SolidColorBrush( Colors.LightGray );

         TextBlock tb = new TextBlock();
         tb.Text = "Danger Will Robinson!!";
         tb.FontFamily = new FontFamily("Comic Sans MS");
         tb.FontSize = 48.0;
         tb.HorizontalAlignment = HorizontalAlignment.Left;
         tb.VerticalAlignment = VerticalAlignment.Center;
         tb.Foreground = new SolidColorBrush( Colors.Black );

         Button closePopup = new Button();
         closePopup.Content = "Close";
         closePopup.Background = new SolidColorBrush( Colors.Magenta );
         closePopup.FontFamily = new FontFamily( "Verdana" );
         closePopup.FontSize = 14.0;
         closePopup.Width = 50.0;
         closePopup.Click += new RoutedEventHandler(ClosePopup_Click);
         closePopup.Margin = new Thickness( 10 );

         myStackPanel.Children.Add( tb );
         myStackPanel.Children.Add( closePopup );

         border.Child = myStackPanel;

         myPopup.Child = border;

         myPopup.VerticalOffset = 75.0;
         myPopup.HorizontalOffset = 25.0;
         myPopup.IsOpen = true;

      void ClosePopup_Click( object sender, RoutedEventArgs e )
         myPopup.IsOpen = false;

You’ll notice that I hewed pretty close in the code to what I had created in the Xaml without making myself too crazy. 

The Third, and Right Way

The right way to do this, now that I’ve shown all that, is to make the Popup as a UserControl, which of course you can create as a separate .xaml file and design beautifully in Blend. then the PopUp has only to contain your UserControl and you are all set.

I’ll show that in the video. (Hey! I need something to add in the video).




Source code  How to use this source code

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen online courses. His latest book, Building APIs with .NET will be released early in 2025. Liberty is a Senior SW Engineer for CNH and he was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Microsoft MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.

4 Responses to Popup Control

Comments are closed.