How to use Pop-Ups in WP7

Comments

Hamishwillee - Minor subedit and suggestions

Hi Vishaili

Thanks for the article. I've given it a minor subedit. Firstly I moved the images to the introduction which makes it more obvious what the article is "about" even earlier.

I then made some minor changes for wiki style - we tend to use :

• bold style for button presses and filenames and button presses.
• either italic or bold for dialog names (ie "References").
• First time we mention a class/namespace/method "in text" we link to it, and if it is used again we mark it up with Icode template.

Please be aware that for Windows Phone on this wiki we always try to improve on the materials in MSDN and the general literature - there isn't much point just having basic examples that don't add much over the reference. So when you write an article, please "add value" as much as possible.

Here are some specific suggestions to help you improve this even further, so that will be better than what is on MSDN:

1. Please link to the documentation for using Popups in your abstract (ie the specific class API reference - is it this one?)
2. If there is some official "guide" on using Popups, or any other articles you recommend on the topic then please use a Template:SeeAlso to link to them
3. You say that it is possible to create a popup in XAML or C# - please show both ways. Explain if there are any benefits in creating the control dynamically in code - why would you use XAML or C#?
4. Explain how to get the results back from the popup and use them in your program (could just write to console). This is a key part of using any dialog type control
5. Are there any rules for destruction of the object, or is the standard behaviour to simply hide and display it?
6. Say something about the contents of the popup - ie here you have just defined a bordered stackpanel. Are there any rules about what you can put in the panel?
7. In the popup you've chosen to use a green borderbrush. Would you not be better off using a colour you know would work with the theme? So perhaps use a theme resource or the accent colour. It is always a useful tip to remind people to use theme aware controls.
8. It is probably good for popups to be dismissed by pressing the back button. If this is not done automatically, show how this can be done in WP7
9. You have (wisely) stated some cases where using apopups make sense. Is there any way of explaining what makes a popup a "good idea" to use as opposed to some other control?

Does that make sense?

Regards

Hamish

hamishwillee 04:42, 18 September 2012 (EEST)

Hamishwillee - PS ArticleMetaData

Excellent to see you've used the ArticleMetaData. One note, in the "devices" section don't put "All devices", but specifically list the actual devices you tested on. For example, did you test on the Lumia 800? Did you only test on the Simulator?

hamishwillee 04:43, 18 September 2012 (EEST)

Vaishali Rawat - @ Hamishwillee

Thanks for your suggestions and i tried incorporating few of them.

-Regards,

Vaishali

Vaishali Rawat 15:15, 18 September 2012 (EEST)

Hamishwillee - Thanks - you have done well

Much appreciated!

I have subedited to add more headings and to explain in more detail what the article (now) covers. I have removed the FeaturedArticle template - the moderators will add this if they choose to feature the article.

Regards

Hamish

hamishwillee 09:41, 19 September 2012 (EEST)

Log in or Join to leave comments.

See Also

• Login dialog for Windows Phone apps

This article explains how to use Pop-Up in WP7. The PopUp class is used to temporarily display content that accomplishes a particular task.

Article Metadata

---

Code Example

Source file: Media:Updated-Pop-Up_Control.zip

---

Tested with

SDK: Windows Phone 7.1

---

Compatibility

Platform(s): Windows Phone 7.5

---

Article

Keywords: PopUp class

Created: Vaishali Rawat (17 Sep 2012)

Last edited: hamishwillee (30 Nov 2012)

Introduction

A pop-up is a graphical user interface ( GUI ) display area, usually a small window, that suddenly appears ("pops up") in the foreground of the visual interface. It can be used to display customized messages, grab login credentials and other inputs.

This article shows how to define a popup in both XAML and C#, how to display and hide the popup in code and return user selected values, and how to close the popup when the back key is pressed (in addition to when it is closed or acknowledged using on-screen buttons).

The sample application simply displays a customized message.

• 

  Sample Application Page

• 

  Pop-up on "Show Pop-up from Xaml" button press

• 

  Pop-up on "Show Pop-up from .cs" button press

Getting Started

First create a Windows Phone application.

• Open Visual Studio and select Windows Phone Application from the installed templates
• Select Windows Phone 7.1 as the Target Version.
• Right-click on the References in the project and click Add Reference…. Find the Microsoft.Phone.Controls reference and add it to the project.

Defining Pop-Up through XAML

  <Popup x:Name="my_popup_xaml" Grid.Row="2">
    <Border  BorderThickness="2" Margin="10" BorderBrush="{StaticResource PhoneAccentBrush}">
      <StackPanel Background="LightBlue">
        <Image Source="/Images/disclaimer.png" HorizontalAlignment="Center" Stretch="Fill" Margin="0,15,0,5"/>
        <TextBlock Text="Disclaimer" TextAlignment="Center" FontSize="40" Margin="10,0" />
        <TextBlock Text="This is a pop-up window to display disclaimer" FontSize="21" Margin="10,0" />                      
        <StackPanel Orientation="Horizontal" Margin="0,10">
          <Button x:Name="btn_continue"  Content="continue" Width="215" Click="btn_continue_Click"/>
          <Button x:Name="btn_cancel"    Content="cancel"   Width="215" Click="btn_cancel_Click"/>
        </StackPanel>
      </StackPanel>
    </Border>
  </Popup>

In this sample application we have taken a stackpanel inside the pop-up. All other controls displayed in pop-up - Textblocks, Image and buttons, are wrapped inside the stack panel.

Defining Pop-up using CSharp

• first we create an instance of Pop-Up:

   Popup my_popup_cs = new Popup();

• Adding controls to the pop-up:

 public void display_cspopup()
{
            Border border = new Border();                                                     // to create green color border
            border.BorderBrush = new SolidColorBrush(Colors.Green);
            border.BorderThickness = new Thickness(2);
            border.Margin = new Thickness(10, 10, 10, 10);
 
            StackPanel skt_pnl_outter = new StackPanel();                             // stack panel 
            skt_pnl_outter.Background = new SolidColorBrush(Colors.LightGray);
            skt_pnl_outter.Orientation = System.Windows.Controls.Orientation.Vertical;
 
            Image img_disclaimer = new Image();                                       // Image
            img_disclaimer.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
            img_disclaimer.Stretch = Stretch.Fill;
            img_disclaimer.Margin = new Thickness(0, 15, 0, 5);
            Uri uriR = new Uri("Images/disclaimer.png", UriKind.Relative);
            BitmapImage imgSourceR = new BitmapImage(uriR);
            img_disclaimer.Source = imgSourceR;
 
            TextBlock txt_blk1 = new TextBlock();                                         // Textblock 1
            txt_blk1.Text = "Disclaimer";
            txt_blk1.TextAlignment = TextAlignment.Center;
            txt_blk1.FontSize = 40;
            txt_blk1.Margin = new Thickness(10, 0, 10, 0);
            txt_blk1.Foreground = new SolidColorBrush(Colors.White);
 
            TextBlock txt_blk2 = new TextBlock();                                      // Textblock 2
            txt_blk2.Text = "This is a pop-up window to display disclaimer";
            txt_blk2.TextAlignment = TextAlignment.Center;
            txt_blk2.FontSize = 21;
            txt_blk2.Margin = new Thickness(10, 0, 10, 0);
            txt_blk2.Foreground = new SolidColorBrush(Colors.White);
 
 
            //Adding control to stack panel
            skt_pnl_outter.Children.Add(img_disclaimer);
            skt_pnl_outter.Children.Add(txt_blk1);                                     
            skt_pnl_outter.Children.Add(txt_blk2);
 
            StackPanel skt_pnl_inner = new StackPanel();
            skt_pnl_inner.Orientation = System.Windows.Controls.Orientation.Horizontal;
 
            Button btn_continue = new Button();                                         // Button continue
            btn_continue.Content = "continue";
            btn_continue.Width = 215;
            btn_continue.Click += new RoutedEventHandler(btn_continue_Click);
 
            Button btn_cancel = new Button();                                           // Button cancel                                     
            btn_cancel.Content = "cancel";
            btn_cancel.Width = 215;
            btn_cancel.Click += new RoutedEventHandler(btn_cancel_Click);
 
            skt_pnl_inner.Children.Add(btn_continue);
            skt_pnl_inner.Children.Add(btn_cancel);
 
 
            skt_pnl_outter.Children.Add(skt_pnl_inner);
 
            // Adding stackpanel  to border
            border.Child = skt_pnl_outter;                       
 
           // Adding border to pup-up
            my_popup_cs.Child = border;                         
 
            my_popup_cs.VerticalOffset = 400;
            my_popup_cs.HorizontalOffset = 10;
 
            my_popup_cs.IsOpen = true;
}

Displaying the popup

To show the pop-up :

    popup.IsOpen = true;

To hide/cancel the pop-up :

   popup.IsOpen = false;

To display the pop-up on Show Pop-Up from Xaml button press :

 private void btn_displayfrom_xaml_Click(object sender, RoutedEventArgs e)
{
            if (my_popup_cs.IsOpen && !my_popup_xaml.IsOpen)
            {
                my_popup_cs.IsOpen = false;
                my_popup_xaml.IsOpen = true;
            }
            else
            { 
                my_popup_xaml.IsOpen = true; 
            }
}

To display the pop-up on Show Pop-Up from .cs button press :

 private void btn_displayfrom_cs_Click(object sender, RoutedEventArgs e)
 {
            if (my_popup_xaml.IsOpen && !my_popup_cs.IsOpen)
            {
                my_popup_xaml.IsOpen = false;
                display_cspopup();
            }
            else
            {
                display_cspopup();
            }
 }

Hiding the popup and returning values

In this sample application we are capturing 2 events from the pop-up

• on continue button key press :

private void btn_continue_Click(object sender, RoutedEventArgs e)
{
             if (my_popup_xaml.IsOpen)
            {
                my_popup_xaml.IsOpen = false;
            }
            else if (my_popup_cs.IsOpen)
            {
                my_popup_cs.IsOpen = false;
            }      
}

here we are simply hiding the pop-up , whereas one can use this function to perform the desired module like "navigating to another page"

• on cancel button key press :

 private void btn_cancel_Click(object sender, RoutedEventArgs e)
 {
          if (my_popup_xaml.IsOpen)
          {
                my_popup_xaml.IsOpen = false;
          }
          else if (my_popup_cs.IsOpen)
          {
                my_popup_cs.IsOpen = false;
          }
 }

Hiding the popup when backkey is pressed

This code shows how to hide the popup when the backkey is pressed

 protected override void OnBackKeyPress(CancelEventArgs e)
 {
       if (this.my_popup_cs.IsOpen )
       {
                my_popup_cs.IsOpen = false;
                e.Cancel = true;
       }
       else if (this.my_popup_xaml.IsOpen)
       {
                my_popup_xaml.IsOpen = false;
                e.Cancel = true;
       }     
 }

Downloads

You can download sample project code from this file File:Updated-Pop-Up Control.zip.