Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Como usar Pop-Ups em Windows Phone

From Wiki
Jump to: navigation, search

Este artigo explicar como usar PopUp.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata

Exemplo de código
Testado com
SDK: Windows Phone 8.0/7.1 .1 SDK
Aparelho(s): Nokia Lumia 920, Nokia Lumia 800

Compatibilidade
Artigo
Tradução:
Por saramgsilva
Última alteração feita por hamishwillee em 08 Nov 2013

Contents

Introdução

A pop-up é uma interface gráfica do utilizdor (GUI) área de exposição, geralmente uma pequena janela, que aparece de repente ("pops-up") no plano da interface visual. Ele pode ser usado para exibir mensagens personalizadas, pegue as credenciais de login e outros insumos.

Este artigo mostra como definir um pop-up, tanto em XAML como em C #, como exibir e ocultar o pop-up no código e os valores selecionados de usuários de retorno, e como fechar o pop-up quando a tecla volta for pressionada (além para quando ele é fechado ou reconhecido usando botões na tela).

A aplicação exemplo mostra uma mensagem customizada.

Começando

Primeiro crie um aplicativo para Windows Phone

  • Abra o Visual Studio e selecione 'Windows Phone Application' dos modelos instalados
  • Seleccione Windows Phone 8.0 como versão "target".
  • Clique direito sobre o projeto,"References", e clicar "Add Reference...". De seguida, procurar por Microsoft.Phone.Controls e selecionar e adicionar ao projeto.

Definindo o Pop-Up através de 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>

Nesta aplicação de exemplo adicionamos um "StackPanel" dentro do pop-up. Todos os outros controles exibidos no pop-up - TextBlocks, botões, estarão contido no StackPanel.

Definindo Pop-up usando CSharp

  • primeiro criamos uma instância do pop-up:
     Popup my_popup_cs = new Popup();
  • Adicionando controles para o 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;
}


Exibindo o pop-up

Para mostrar o pop-up :

    popup.IsOpen = true;

Para esconder ou cancelar o pop-up :

   popup.IsOpen = false;

Para exibir o pop-up pressione Mostrar Pop-Up em Xaml :

 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;
}
}

Para exibir o pop-up pressione Mostrar Pop-Up em .cs:

 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();
}
}


Escondendo o pop-up e retorno de valores

Neste exemplo de aplicativo que está capturando dois eventos no menu pop-up

  • on continue botão pressione a tecla:
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;
}
}

aqui estamos simplesmente esconder o pop-up, enquanto pode-se usar esta função para executar o módulo desejado, como "navegar para outra página"


  • on cancel 'botão pressione a tecla:
 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;
}
}


Escondendo o pop-up quando 'backkey' é pressionado

Este código mostra como esconder o pop-up quando o 'backkey' é pressionado

 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;
}
}

Código Fonte

O código fonte pode ser obtido em File:Updated-Pop-Up Control.zip.

This page was last modified on 8 November 2013, at 05:01.
270 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.

×