Alternativas a Dialog Boxes en WPF y Silverlight

Muchas veces necesitamos abrir una serie de ventanas secundarias, para mostrar un mensaje informativo, un error, etc..Una alternativa es la utilización de los famosos Dialog Boxes, aunque esta opción no es recomendable si la aparición de estos mensajes es muy frecuente. Debido a la limitación de esta funcionalidad en XBAP de WPF y Silverlight, ahora propongo una solución alternativa para cada una de las plataformas nombradas con anterioridad.

Para WPF la alternativa es la inclusión de un objeto PopUP, este aparecerá en la interfaz de Usuario con los elementos que nosotros queramos incluir dentro del mismo. A su vez el resto de la interfaz de Usuario será deshabilitada, de esta forma el usuario se centrará únicamente en el PopUP.

El primer paso es crear el objeto PopUp, incluyendo dentro del mismo los correspondientes elementos:

 

PopUp
  1. <Popup Name=”Dialogo” StaysOpen=”True” Placement=”Center” MaxWidth=”200″>
  2.             <Border>
  3.                 <Border.Background>
  4.                     <LinearGradientBrush>
  5.                         <GradientStop Color=”AliceBlue” Offset=”1″/>
  6.                         <GradientStop Color=”LightBlue” Offset=”0″/>
  7.                     </LinearGradientBrush>
  8.                 </Border.Background>
  9.                 <StackPanel Margin=”5″ Background=”White”>
  10.                     <TextBlock Margin=”10″ TextWrapping=”Wrap”>
  11.                         Introduzca su Nombre de Usuario
  12.                     </TextBlock>
  13.                     <TextBox Name=”txtNombre” Margin=”10″/>
  14.                     <TextBlock Margin=”10″ TextWrapping=”NoWrap”>
  15.                         Introduzca su contraseña
  16.                     </TextBlock>
  17.                     <PasswordBox Name=”pass”></PasswordBox>
  18.                     <StackPanel Orientation=”Horizontal” Margin=”10″>
  19.                         <Button Click=”Button_Click” Padding=”3″ Margin=”0,0,5,0″>Aceptar</Button>
  20.                         <Button Click=”Button_Click_1″ Padding=”3″>Cancelar</Button>
  21.                     </StackPanel>
  22.                 </StackPanel>
  23.             </Border>
  24.         </Popup>

 

Como podemos observar los elementos que están incluidos en el PopUp son realmente sencillos (el grado de complejidad queda de tu mano). Simulamos un formulario de login e incluimos un botón de cancelación y de aceptación de ese Login. Por otro lado podemos ver la utilización de la propiedad StaysOpen que nos proporcionará la visibilidad del objeto al que nos estamos refiriendo, hasta que presionemos sobre alguno de los botones incluidos dentro del mismo.

El resultado de toda la interfaz de usuario es el siguiente:

  1. <Window x:Class=”PopUp.MainWindow”
  2.         xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
  3.         xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
  4.         Title=”MainWindow” Height=”800″ Width=”600″>
  5.     <Grid>
  6.         
  7.         <Popup Name=”Dialogo” StaysOpen=”True” Placement=”Center” MaxWidth=”200″>
  8.             <Border>
  9.                 <Border.Background>
  10.                     <LinearGradientBrush>
  11.                         <GradientStop Color=”AliceBlue” Offset=”1″/>
  12.                         <GradientStop Color=”LightBlue” Offset=”0″/>
  13.                     </LinearGradientBrush>
  14.                 </Border.Background>
  15.                 <StackPanel Margin=”5″ Background=”White”>
  16.                     <TextBlock Margin=”10″ TextWrapping=”Wrap”>
  17.                         Introduzca su Nombre de Usuario
  18.                     </TextBlock>
  19.                     <TextBox Name=”txtNombre” Margin=”10″/>
  20.                     <TextBlock Margin=”10″ TextWrapping=”NoWrap”>
  21.                         Introduzca su contraseña
  22.                     </TextBlock>
  23.                     <PasswordBox Name=”pass”></PasswordBox>
  24.                     <StackPanel Orientation=”Horizontal” Margin=”10″>
  25.                         <Button Name=”Aceptar” Click=”Aceptar_Click” Padding=”3″ Margin=”0,0,5,0″>Aceptar</Button>
  26.                         <Button Name=”Cancelar” Click=”Cancelar_Click” Padding=”3″>Cancelar</Button>
  27.                     </StackPanel>
  28.                 </StackPanel>
  29.             </Border>
  30.         </Popup>
  31.         <TextBlock x:Name=”Inicio” HorizontalAlignment=”Left” Height=”44.4″ Margin=”34.2,48,0,0″ TextWrapping=”Wrap” VerticalAlignment=”Top” Width=”218.4″ FontFamily=”Arial Black” FontSize=”16″ Text=”Acceder a CESNAVARRA”/>
  32.         <Button Content=”Acceder” Name=”acesso” Height=”25.2″ Margin=”276.6,45.177,228.6,0″ VerticalAlignment=”Top” Click=”acesso_Click” />
  33.         <TextBlock x:Name=”Mensaje” HorizontalAlignment=”Left” Height=”45″ Margin=”34.2,92.4,0,0″ TextWrapping=”Wrap” VerticalAlignment=”Top” Width=”194.8″ FontFamily=”Arial Black” Foreground=”Red”/>
  34.     </Grid>
  35. </Window>

image

Ahora vamos a crear en el código Behind las distintas funcionalidades del PopUp , para que este funcione de forma correcta.

Comenzaremos con el evento del botón de acceso a nuestra aplicación, en el incluiremos el siguiente fragmento de código:

  1. private void acesso_Click(object sender, RoutedEventArgs e)
  2.         {
  3.             DesactivarUI();
  4.         }
  5.         private void DesactivarUI()
  6.         {
  7.             MainWindow ventana = new MainWindow();
  8.             ventana.IsEnabled = false;
  9.             this.Background = Brushes.LightGray;
  10.             Dialogo.IsOpen = true;
  11.         }

image

 

 

Como podemos observar hemos desactivado los elementos de la interfaz de usuario que están en segundo plano. Además cambiamos el fondo de estos elemento a gris para mejorar la experiencia de usuario. Por último abrimos el objeto PopUp.

El siguiente paso es incluir el código Behind de los botones del PopUp. Comenzamos con el botón Aceptar:

  1.  
  2. private void Aceptar_Click(object sender, RoutedEventArgs e)
  3. {
  4.     Mensaje.Text = “Bienvenido “ + txtNombre.Text;
  5.     this.Background = null;
  6.     HabilitarUI();
  7. }
  8. private void HabilitarUI()
  9. {
  10.     MainWindow ventana = new MainWindow();
  11.     ventana.IsEnabled = true;
  12.     Dialogo.IsOpen = false;
  13. }

image           image  

Como podemos observar mostraremos en la página principal un mensaje con el nombre de la persona logueada. Además eliminamos el fondo de la misma para que el usuario se entere que se ha logueado (aquí dejen su imaginación volar). Por último cerramos el PopUP y habilitamos la ventana.

En el evento del botón cancelar  introducimos el siguiente código:

  1. private void Cancelar_Click(object sender, RoutedEventArgs e)
  2.         {
  3.             HabilitarUI();
  4.             this.Background = Brushes.White;
  5.         }

Como podemos observar realizamos similares acciones que en el anterior evento para dejar la interfaz de usuario como estaba por defecto.

 

 

 

 

En Silverlight realmente es mucho más sencillo que en WPF, a nuestro proyecto tenemos que añadir un nuevo elemento, eligiendo como plantilla ChildWindow como podemos observar a continuación:

image

Ahora nos encargaremos de añadir las propiedades de la ventana (tamaño, fondo, etc) y los elemento que estarán incluidos en la misma. Para que la ventana aparezca y el resto de la interfaz de usuario este deshabilitada, simplemente tenemos que llamar al método Show desde el nombre del objeto que hace referencia a la ventana emergente como podemos observar a continuación:

nuevoelemento.Show();

La conclusión es que aunque no tengamos la funcionalidad nombrada, podemos utilizar diversos caminos para ofrecer al usuario una mejor experiencia de usuario en la que se centre en lo que realmente es importante en cada momento.

Podeis descargar el ejemplo del artículo aquí

2 comentarios en “Alternativas a Dialog Boxes en WPF y Silverlight”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *