×
Namespaces

Variants
Actions

How to use Pop-Ups in Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to use the PopUp class to temporarily display content over another control.

WP Metro Icon UI.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone 8.0/7.1.1
Devices(s): Nokia Lumia 920, Nokia Lumia 800
Compatibility
Platform(s): Windows Phone 8.0/7.5
Windows Phone 8
Windows Phone 7.5
Article
Keywords: PopUp class
Created: Vaishali Rawat (17 Sep 2012)
Last edited: saramgsilva (06 Nov 2013)

Contents

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.

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.

This page was last modified on 6 November 2013, at 11:07.
1609 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×