14 Junio, 2013 a las 20:39

windows_phone

Como vimos en la entrada anterior, generar una interfaz para Windows Phone es bastante sencillo gracias a Visual Studio, que nos crea la mayoría de código XAML y nos lo muestra de forma que podamos modificar aspectos como los margenes (atributo margin), el texto  (atributo text), etc.

En la entrada de hoy veremos cómo crear un formulario de usuario y contraseña, en el que al introducir bien los datos nos muestre un nuevo formulario o ventana y si se introducen mal dará un mensaje de error.

De esta forma aprenderemos a obtener datos de elementos del formulario (los campos de texto), a editar elementos (el mensaje de error que se muestra o no) y a lanzar nuevas ventanas (el formulario que se lanzará al introducir bien los datos).

Es importante tener en cuenta que hay que tener nociones básicas de programación para seguir este manual. Por otro lado, si no has leído aún la primera parte del curso, este es el mejor momento ya que damos una introducción al entorno de programación de Windows Phone.

Creando nuestro primer programa en Windows Phone

Lo primero que haremos para hacer nuestro formulario de inicio de sesión será añadir a nuestra interfaz los elementos necesarios, en nuestro caso un textbox dónde escribir el usuario, un passwordbox dónde se escribirá la contraseña, un botón y  un textblock que mostrará un mensaje que nosotros elijamos, podemos alinearlo a nuestro gusto de forma gráfica o mediante los atributos margin en el que se establecen los diferentes margenes establecidos por comas, HorizontalAligment donde daremos una orientación tipo left, center o right y el atributo VerticalAligement que admite “Top, Bottom o Center”.

interfaz

Además, en nuestro ejemplo usaremos el atributo “text” para que aparezca el texto por defecto “Usuario” en el textbox, de esta forma el usuario sabrá que debe introducir y de la misma forma vaciaremos el atributo Text del TextBlock, dejandolo en Text=””, de esta forma no se verá al arrancar el programa, por último debemos cambiar el texto del botón, esto se hace a través del atributo Content=”TEXTO” en lugar del atributo text, que usamos en los elementos anteriores.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <TextBlock HorizontalAlignment="Left" Margin="83,37,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" RenderTransformOrigin="0.643,-0.059"/>
   <TextBox HorizontalAlignment="Left" Height="72" Margin="68,151,0,0" TextWrapping="Wrap" Text="Usuario" VerticalAlignment="Top" Width="305"/>
   <PasswordBox HorizontalAlignment="Left" Margin="68,228,0,0" VerticalAlignment="Top" Width="305"/>
   <Button Content="Entrar" HorizontalAlignment="Left" Margin="165,326,0,0" VerticalAlignment="Top"/>
</Grid>

Por ultimo, si nos fijamos en la interfaz que nos crea por defecto, nos añade un texto de título, podemos pulsar sobre el para que nos resalte el código dónde está definido y así modificar el texto para que tenga algo mas de sentido, por ejemplo, nosotros pondremos “Nuestro primer programa” e “Inicio de sesión” en el subtitulo.

Una vez tengamos lista nuestra interfaz, es muy importante asignar un nombre a cada elemento que vayamos a llamar mediante funciones, esto se hace mediante el atributo name=”NOMBRE”, por ejemplo, al textbox le llamaremos “tbUsuario”, quedando así

<TextBox HorizontalAlignment="Left" Height="72" Margin="68,151,0,0" TextWrapping="Wrap" Text="Usuario" VerticalAlignment="Top" Width="305" Name="tbUsuario"/>

Lo mismo haremos para el TextBlock, llamandole tbMensaje, para el Passworbox llamandole pbPassword y para el botón llamándolo btEntrar.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <TextBlock HorizontalAlignment="Left" Margin="83,37,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" RenderTransformOrigin="0.643,-0.059" Name="tbMensaje"/>
   <TextBox HorizontalAlignment="Left" Height="72" Margin="68,151,0,0" TextWrapping="Wrap" Text="Usuario" VerticalAlignment="Top" Width="305" Name="tbUsuario"/>
   <PasswordBox HorizontalAlignment="Left" Margin="68,228,0,0" VerticalAlignment="Top" Width="305" Name="pbPassword"/>
   <Button Content="Entrar" HorizontalAlignment="Left" Margin="165,326,0,0" VerticalAlignment="Top" Name="btEntrar"/>
</Grid>

Muy bien, ya tenemos toda nuestra interfaz preparada para empezar a programar. Como lo que queremos es hacer que el botón verifique los campos usuario y contraseña al ser pulsado, hacemos doble clic sobre el. Esto nos llevará a la función que se ejecutará al haber pulsarlo

private void btEntrar_Click(object sender, RoutedEventArgs e)
{

}

Vale, ahora simplemente vamos a poner el código que queramos que se ejecute, en este caso comprobara si usuario es “miguel” y contraseña “12345” y en tal caso pondrá en el TextBlock “Correcto”, si alguno de los datos falla pondrá “Incorrecto”

    private void btEntrar_Click(object sender, RoutedEventArgs e)
    {
        if (tbUsuario.Text.ToString() == "miguel" && pbPassword.Password.ToString() == "12345")
        {
            tbMensaje.Text = "Correcto";
        }
        else
        {
            tbMensaje.Text = "Incorrecto";
        }
    }

Como veis en la línea 3 nos referimos a los elementos mediante el nombre que le hemos dado, y en uno comparamos el parametro “Text” y en el otro el parámetro “password”, si estais acostumbrados a WindowsForms os habréis dado cuenta de que este es un elemento nuevo ya que antes se trataban por igual los campos de texto y los de contraseña, después y dependiendo de si se cumple la condición se establecerá un texto u otro para el elemento tbMensaje, cambiando su propiedad “text” (líneas 5 y 9).

Perfecto, pero vamos a hacerlo un poco mas bonito y vamos a llamar a una nueva ventana si el usuario es correcto, emulando a cualquier otro tipo de aplicación.

Es bastante sencillo llamar a una nueva ventana, lo primero es crearla, para ello nos vamos a la barra de Explorador de soluciones, pulsamos con el botón derecho sobre nuestro proyecto>Agregar>Nuevo elemento

nuevo elemeto

En la nueva ventana podriamos seleccionar otra ventana vacía o una de las plantillas que hay, en nuestro caso y para poder reutilizar el proyecto en nuestra próxima entrega seleccionaremos “Página de Panorama de Windows Phone” si estáis acostumbrados a usar Windows Phone rápidamente veréis que tipo de ventanas son, si no, básicamente son ventanas con diferentes “pestañas” entre las que se puede cambiar deslizando el dedo a derecha o izquierda, seleccionamos el nombre que queramos (en nuestro caso Bienvenida.xaml) y pulsamos “Agregar”.

Ahora que ya tenemos una nueva página volvemos al código del botón y sustituimos la línea donde cambiaba el texto de “Correcto” por la función encargada de llamar a la nueva página (NavigationServices.Navigate)


private void btEntrar_Click(object sender, RoutedEventArgs e)
 {
    if (tbUsuario.Text.ToString() == "miguel" && pbPassword.Password.ToString() == "12345")
    {

       NavigationService.Navigate(new Uri("/Bienvenida.xaml", UriKind.Relative));
    }
    else
    {
       tbMensaje.Text = "Incorrecto";
    }
 }

Como veis la función tiene dos parámetros, el primero es un String con el archivo xaml a llamar y el segundo define si la ruta dada es una ruta relativa o absoluta. Normalmente para llamar a ventanas de nuestro propio proyecto usaremos rutas relativas.

¡Ahora solo toca ejecutar nuestro proyecto y ver que todo funciona correctamente!

Guardar cerca el proyecto por que en la próxima entrega el curso lo usaremos como base para continuar aprendiendo sobre la navegación de ventanas y los controles “panorama”.

Acerca de Miguel Díaz

Informático, enamorado de la programación, diseño Web y el deporte.
Categorías: Programación. Etiquetas: , , , , .

7 comentarios en Curso de programación en Windows Phone (Parte 2): Interactuando con los diferentes elementos de la interfaz y ventanas

  1.  Manuel dice:

    disculpa una pregunta, en la linea “if (tbUsuario.Text.ToString() == “miguel” && pbPassword.Password.ToString() = “12345”)” me marca un error, me dice que el operador “&&” no puede aplicar a operandos del tipo ‘bool’ y ‘string’…

    Qué puedo hacer para solucionarlo?

  2.  gustavo dice:

    hola muy buena pagina y minicurso, una pregunta este programa para windows phone, se podra instalar en un nokia lumia 520, para que se ejecute cuando se apriete el boton de desbloquear el telefono, o cuando se encienda el telefono, para usarlo cmo seguridad del telefono y no cualquiera entre a usarlo? y si se puede hacer lo que te comento como podria instalarlo y direccionarlo a que se ejecute cuando se encienda el telefono o cuando se apriete el boton de encendido para desbloquear el telefono, espero me puedas ayudar o mostrar en algun video como funcionaria este programa en un celular, seria la primera vez que programo para windows phone, y quiero aprender hacer aplicaciones para mi lumia 520, espero tu respuesta y gracias

  3.  jose dice:

    hola amigo quisiera saber como puedo exportar una aplicacion a mi telefono?

  4.  Jair Tovar dice:

    como programo un button para que me permita cerrar la aplicacion??

Deja un comentario

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