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

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.

<Grid x:Name="LayoutRoot" Background="White">

        <!--Layout da Aplicação-->

        <Button x:Name="btnOpenPopup" VerticalAlignment="Top" Margin="20" Content="Abrir Popup" Width="100" Height="25" Click="btnOpenPopup_Click" />

       

        <!--Background-->

        <Rectangle x:Name="recBackground" Fill="LightGray" Width="400" Height="300" Opacity="0.7" Visibility="Collapsed" />

       

        <!--Layout do Popup-->

        <Canvas x:Name="cvsPopup" Visibility="Collapsed">

            <Grid x:Name="grvPopup" Background="Transparent">

                <Rectangle x:Name="recBarraPopup" Width="200" Height="120" RadiusY="6" RadiusX="6" >

                  <Rectangle.Fill>

                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                              <GradientStop Color="#FF808080"/>

                              <GradientStop Color="#FF333232" Offset="1"/>

                        </LinearGradientBrush>

                  </Rectangle.Fill>

                </Rectangle>

                <Rectangle Width="196" Height="96" Margin="0,19,0,0" Fill="#FFF4F4F4" RadiusY="4.5" RadiusX="4.5" />

                <TextBlock x:Name="txtFechar" Text="X" Cursor="Hand" Foreground="White" HorizontalAlignment="Right" Margin="2" />

                <TextBlock Text="Silverlight" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="16" />

                <Grid.RenderTransform>

                    <TranslateTransform x:Name="MyGridTransform" X="0" Y="0" />

                </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.