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…..

PopupNotShowing

The button’s event handler makes the Popup visible.

PopUpShowing

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.

ObjectsInBlend

Then select a Popup from the Asset Library

AssetLibrary

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:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="PopUpControl.Page"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable="d"
    Width="640" Height="480" >

    <Grid x:Name="LayoutRoot" Background="White" >
        <Grid.RowDefinitions>
            <RowDefinition Height="0.15*"/>
            <RowDefinition Height="0.85*"/>
        </Grid.RowDefinitions>
      
        <Button x:Name="ShowPopupButton"
               Height="40" 
              HorizontalAlignment="Left" 
              VerticalAlignment="Bottom" 
              Width="100" 
              FontFamily="Comic Sans MS" 
              FontSize="24" 
              Content="Click me!"/>
        <Image x:Name="LandscapeImage"
             Margin="20,5,50,50" 
             Grid.Row="1"  
             Source="Desert Landscape.jpg" 
             HorizontalAlignment="Left" 
             VerticalAlignment="Top"/>
      
        <Popup x:Name="MyPopup" 
             VerticalOffset="75" 
             HorizontalOffset="25">
         <Border BorderBrush="Black" BorderThickness="5">
               <StackPanel x:Name="PopUpPanel" 
                        Background="#FFB9F4E2"
                        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" 
                  Foreground="#FFD91F1F"/>
                   <Button x:Name="ClosePopup"
                       Height="34" 
                       Width="73" 
                       Content="Close" 
                       Background="#FF86F922" 
                       FontFamily="Verdana" FontSize="14" />
               </StackPanel>
         </Border>
        </Popup>
    </Grid>
</UserControl>

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
    InitializeComponent();
   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()
      {
         InitializeComponent();
         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).

Thanks.

-jesse

 

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 Pluralsight & LinkedIn Learning courses. 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 Xamarin Certified Mobile Developer and a Xamarin MVP and a Microsoft MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.

5 Responses to Popup Control

  1. Andrea Domenichini says:

    Hi,

    how can I close the popup when I click everywhere in the page except the popup (suppose in your example to not have the Close button in the popup)?

    Is there a Popup method or propety that automatically do this or it must be done manually handling MouseLeftButtonUp in the page?

  2. RJ says:

    Seems like the video or example of Popup as a UserControl is missing. Good guidance on how to implement a popup, especially like a confirmation prompt, will never go out of style! An update would be much appreciated. Thx

    http://jesseliberty.com/2008/06/06/popup-control/

  3. Dan says:

    Where is the video held? I’m trying to do this and would like to see how Jesse has done it.

  4. Pingback: Script Smart | Ground Zero 2012

Comments are closed.