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:

<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