Simulando uma janela Pop-up no Silverlight

Introdução

Podemos considerar a janela Pop-up como um grande investimento no contexto web (principalmente em sites com propagandas). Porém, além de uma infinidade de programas bloqueadores de Pop-up, os browsers mais atuais possuem um bloqueador padrão. Além das propagandas, podemos utilizar este tipo de janela para transmitir mensagens ou exibir alguns dados relativos à página que o usuário se encontra. Em aplicações RIA (Rich Interface Application) não é diferente. Muitas vezes podemos simular uma janela Pop-Up para transmitir ao usuário uma determinada mensagem. Outro ponto positivo é que ela será incorporada dentro da animação, não abrindo nenhuma janela a mais. Desta forma, conseguimos driblar os bloqueadores.

Neste artigo, irei abordar o desenvolvimento de uma janela Pop-up dentro de uma aplicação Silverlight.

Criando o Layout

Inicialmente criaremos o layout de nossa janela dentro de um objeto Canvas com a propriedade Visibility igualada a Collapsed. Assim, para fazer a nossa janela aparecer, basta mudar esta propriedade através do código. O Quadro 1 representa nosso arquivo Page.xaml com o layout de nossa janela Pop-up e um botão que irá disparar o evento para abrir a janela. Criaremos, também, um objeto do tipo Rectangle com opacidade para bloquear a interface enquanto a Pop-up esteja aberta.

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Grid.RenderTransform>

</Grid.RenderTransform>

</Grid>

</Canvas>

</Grid>

Quadro 1: Layout de nosso arquivo Page.xaml.

Nota: A propriedade TranslateTransform será usada para implementar Drag and Drop em nossa janela.

Criando e programando os eventos

Como já mencionado acima, para abrir a janela, basta atribuir o valor Visible para a propriedade Visibility de nosso Canvas e do nosso Rectangle. O Quadro 2 ilustra o evento Click de nosso botão.

private void btnOpenPopup_Click(object sender, RoutedEventArgs e)

{

//Abrir Popup

cvsPopup.Visibility = Visibility.Visible;

//Escurecer fundo

recBackground.Visibility = Visibility.Visible;

}

Quadro 2: Evento Click de nosso botão.

Agora devemos configurar o nosso TextBlock com o texto “X” para fechar nossa Pop-up. Criaremos o evento MouseLeftButtonDown quando nossa animação for carregada. Dentro deste evento, devemos mudar, novamente, a propriedade Visibility de nosso Canvas e Rectangle para Collapsed novamente. O código é representado pelo Quadro 3.

public Page()

{

InitializeComponent();

Loaded += new RoutedEventHandler(Page_Loaded);

}

void Page_Loaded(object sender, RoutedEventArgs e)

{

//Programando o botão "fechar"

txtFechar.MouseLeftButtonDown += new MouseButtonEventHandler(txtFechar_MouseLeftButtonDown);

void txtFechar_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

//Limpar a Tela

cvsPopup.Visibility = Visibility.Collapsed;

recBackground.Visibility = Visibility.Collapsed;

}

Quadro 3: Criando e programando o evento responsável em fechar nosso Pop-Up.

Implementando Drag and Drop

A implementação do recurso Drag and Drop faz com que nosso Pop-up simule melhor os convencionais.

Nota: Para entender melhor o processo, sugiro a leitura do artigo: http://www.linhadecodigo.com.br/Artigo.aspx?id=2247 .

O elemento que chamará os eventos necessários para a implementação do efeito será o nosso Grid que possui a propriedade x:Name com o valor grvPopup. Criaremos os eventos dentro do método Page_Loaded , um objeto do tipo Boolean e outro do tipo Point. O Quadro 4 exemplifica o nosso código.

private Boolean blnStatusMouse = false;

private Point ClickPosition;

void Page_Loaded(object sender, RoutedEventArgs e)

{

//Programando o botão "fechar"

txtFechar.MouseLeftButtonDown += new MouseButtonEventHandler(txtFechar_MouseLeftButtonDown);

//Implementando Drag and Drop

grvPopup.MouseLeftButtonDown += new MouseButtonEventHandler(grvPopup_MouseLeftButtonDown);

grvPopup.MouseLeftButtonUp += new MouseButtonEventHandler(grvPopup_MouseLeftButtonUp);

grvPopup.MouseMove += new MouseEventHandler(grvPopup_MouseMove);

}

void grvPopup_MouseMove(object sender, MouseEventArgs e)

{

}

void grvPopup_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

{

}

void grvPopup_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

}

Quadro 4: Criando os eventos necessários para implementar o Drag and Drop.

Com os eventos criados, basta adicionar a lógica contida no artigo indicado para implementar o efeito. O Quadro 5 representa como os eventos devem ser preenchidos para o funcionamento do Drag and Drop.

private Boolean blnStatusMouse = false;

private Point ClickPosition;

void Page_Loaded(object sender, RoutedEventArgs e)

{

//Programando o botão "fechar"

txtFechar.MouseLeftButtonDown += new MouseButtonEventHandler(txtFechar_MouseLeftButtonDown);

//Implementando Drag and Drop

grvPopup.MouseLeftButtonDown += new MouseButtonEventHandler(grvPopup_MouseLeftButtonDown);

grvPopup.MouseLeftButtonUp += new MouseButtonEventHandler(grvPopup_MouseLeftButtonUp);

grvPopup.MouseMove += new MouseEventHandler(grvPopup_MouseMove);

}

void grvPopup_MouseMove(object sender, MouseEventArgs e)

{

if (blnStatusMouse)

{

this.MyGridTransform.X = e.GetPosition(this).X - ClickPosition.X;

this.MyGridTransform.Y = e.GetPosition(this).Y - ClickPosition.Y;

}

void grvPopup_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

{

grvPopup.ReleaseMouseCapture();

blnStatusMouse = false;

}

void grvPopup_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

ClickPosition = e.GetPosition(sender as UIElement);

grvPopup.CaptureMouse();

blnStatusMouse = true;

}

Quadro 5: Implementação completa do efeito Drag and Drop.

Conclusão
Quando aproximamos as funcionalidades de nossa aplicação RIA a um contexto já conhecido pelo usuário (Web), fazemos com que sua usabilidade se torne fácil. É complicado criar um site onde a navegabilidade é totalmente diferente dos padrões, pois requer um envolvimento maior por parte do usuário. Criar uma aplicação rica não significa necessariamente criar algo totalmente diferente do contexto atual, e sim aumentar a interação Humano-Computador. Neste artigo vimos como simular um efeito já conhecido pelo usuário em uma aplicação Silverlight.

Desenvolvimento - Silverlight

Simulando uma janela Pop-up no Silverlight
Quando aproximamos as funcionalidades de nossa aplicação RIA a um contexto já conhecido pelo usuário (Web), fazemos com que sua usabilidade se torne fácil.
por Lucas Defacio

Leia também

Desenvolvimento - Silverlight

Simulando uma janela Pop-up no SilverlightQuando aproximamos as funcionalidades de nossa aplicação RIA a um contexto já conhecido pelo usuário (Web), fazemos com que sua usabilidade se torne fácil.por Lucas Defacio

Leia também

Simulando uma janela Pop-up no Silverlight
Quando aproximamos as funcionalidades de nossa aplicação RIA a um contexto já conhecido pelo usuário (Web), fazemos com que sua usabilidade se torne fácil.
por Lucas Defacio