mauroDev.NINJA

Entradas recientes


Comentarios recientes


Archivos


Categorías


Meta


Creando nuestra primera Aplicación Universal

Una aplicación, todos tus dispositivos.

Mauricio AndrésMauricio Andrés

Hola! y Bienvenidos a un nuevo Post

Anteriormente les conté sobre las nuevas características de Windows 10, y la nueva arquitectura de aplicaciones universales que trae consigo. Ahora llegó el momento de crear nuestra primera aplicación, en donde construiremos dos pantallas con algunos componentes gráficos básicos, interacciones y una navegación simple, let’s go!

Consideraciones

Manos a la obra

Crearemos un nuevo proyecto de tipo Windows -> Universal -> Aplicación Vacía (Windows Universal) y lo llamaremos MyFirstApp.Create_project

Una vez que hayamos creado nuestro proyecto, deberíamos tener una solución con una estructura mas o menos como esta

solucion
En este ejercicio nos enfocaremos sólo en dos archivos principalmente, ellos son MainPage.xaml y MainPage.xaml.cs, los cuales serían nuestra vista y nuestro code behind en este caso, veremos más adelante en otros post que dependiendo de la arquitectura o patrón de diseño utilizados estos archivos pueden cambiar de término, pero por ahora sólo serán nuestra vista y la lógica de programación.

En nuestra vista “MainPage.xaml”, dentro de nuestro <Page> implementaremos StackPanels verticales para alojar nuestros componentes y controles, dentro de estos implementaremos algunos TextBlocks y un Botón para la navegación, quedaría mas o menos así.

MainPage.xaml

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel VerticalAlignment="Center">
            <StackPanel >
                <TextBlock Text="mauroDevNinja" 
                       HorizontalAlignment="Center"
                       FontSize="45"
                       FontWeight="Light"/>

                <TextBlock Text="" 
                       FontFamily="Segoe MDL2 Assets"
                       FontSize="50"
                       HorizontalAlignment="Center"
                       Foreground="BlueViolet"/>

                <TextBlock Text="Windows 10" 
                       FontSize="45"
                       HorizontalAlignment="Center"
                       FontWeight="SemiLight"/>
            </StackPanel>
            <StackPanel>
                <Button x:Name="btn_Avanzar"
                        Content="Avanzar" 
                        HorizontalAlignment="Center"
                        FontSize="23"
                        Margin="30"
                        Background="DarkCyan"
                        Foreground="White"    
                        Click="btn_Avanzar_Click"
                        />
            </StackPanel>
        </StackPanel>
    </Grid>
xamldsgr1
Si seguiste bien el código, en tu diseñador XAML debería verse algo similar a la foto que pongo aquí.

Antes de seguir con el ejemplo, debes fijarte en algunos detalles del código xaml que quizás no notaste o no comprendiste al principio. El atributo Text de uno de nuestros Textblocks tiene un símbolo extraño Text=””. Bueno, fíjate en su FontFamily, es Segoe MDL2 Assets, una familia de símbolos nuevos, nativos en Window 10, si! es el ícono del corazón, pero hay muchos más!

 

Para encontrarlos y poder utilizarlos de manera fácil y rápida, en tu buscador de Windows escribe Mapa de Caracteres y encontrarás esta aplicación. Ahí podrás encontrar todos los íconos disponibles para hacer tu aplicación más llamativa y con un toque más moderno, pero recuerda siempre utilizar FontFamiliy=”Segoe MDL2 Assets” o nunca podrás visualizarlo correctamente.
segoe

Ok! sigamos con nuestra app!, ahora trabajaremos en nuestra segunda vista, para ello, necesitamos agregar un nuevo archivo a nuestro proyecto, click derecho en nuestro proyecto -> agregar -> nuevo elemento -> Página en blanco (Blank Page), para efectos del ejemplo, la llamaremos Page2.xaml, y en nuestro editor de XAML escribiremos el siguiente código, similar al de nuestro MainPage. Quedaría mas o menos así.

Page2.xaml

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel VerticalAlignment="Center">
            <StackPanel >
                <TextBlock Text="Felicidades, tu primera navegación!" 
                       HorizontalAlignment="Center"
                       FontSize="45"
                       FontWeight="Light"
                           TextWrapping="Wrap"
                           TextAlignment="Center"/>

                <TextBlock Text="" 
                       FontFamily="Segoe MDL2 Assets"
                       FontSize="50"
                       HorizontalAlignment="Center"
                       Foreground="BlueViolet"/>

                <TextBlock Text="Windows 10" 
                       FontSize="45"
                       HorizontalAlignment="Center"
                       FontWeight="SemiLight"/>
            </StackPanel>
            <StackPanel>
                <Button x:Name="btn_Volver"
                        Content="Volver a Inicio" 
                        HorizontalAlignment="Center"
                        FontSize="23"
                        Margin="30"
                        Background="DarkCyan"
                        Foreground="White"    
                        Click="btn_Volver_Click"
                        />
            </StackPanel>
        </StackPanel>
    </Grid>

 

Ahora es el momento del code behind!

En el code behind de nuestra primera pantalla (MainPage.xaml.cs) crearemos el evento click para nuestro botón Avanzar.

private void btn_Avanzar_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(Page2));
        }

Nota que nuestra clase MainPage hereda de Page, quien implementa Frame para poder manejar todo el contenido de nuestra página. Finalmente nuestro código debería quedar así.

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace MyFirstApp
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void btn_Avanzar_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(Page2));
        }
    }
}

Nota que he eliminado sentencias Using que no están siendo utilizadas, así como también removí la instrucción “this” ya que hacemos referencia al Frame de sí mismo, ésta es una cualidad que Visual Basic tiene desde hace tiempo y que ahora C# 6 ha adquirido.

Para saber más sobre las nuevas características de C# te invito al siguiente video de MVA https://www.microsoftvirtualacademy.com/en-us/training-courses/developer-productivity-what-s-new-in-c-6-8733

Ahora iremos al code behind de nuestra segunda pantalla, el que llamamos Page2.xaml.cs para implementar la navegación y volver a nuestra pantalla principal.

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace MyFirstApp
{ 
    public sealed partial class Page2 : Page
    {
        public Page2()
        {
            this.InitializeComponent();
        }

        private void btn_Volver_Click(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(MainPage));
        }
    }
}

¿Bastante simple y directo no?, ahora llego el momento de compilar y desplegar, esto lo haremos de la siguiente manera.

deployimgEn nuestro menú superior marcaremos la opción Debug, arquitectura x86, y elegiremos primero el Mobile Emulator, nota que existen diversos emuladores de Windows Mobile que varían en memoria RAM, calidad de imagen y tamaños de pantalla, cuando ya hayas verificado como funciona en Phone, haz el mismo proceso con el Simulador (Tablet), y Equipo (Desktop).

Si seguiste todos los pasos correctamente, nuestra aplicación debería verse así.

MyFirstUniversal

Eso es todo por ahora! 😀 , espero haberte mantenido atento hasta el final y que te haya gustado la primera aplicación universal de Windows 10 que hemos hecho juntos. Ahora es momento de ponerse creativo y experimentar con lo aprendido, y si tienes dudas con esto y más no dudes en contactarme.

En el siguiente post veremos cómo implementar la navegación utilizando los botones nativos de Windows Mobile, Introducción al SplitView, y otras sorpresas!, cada vez iremos adentrándonos en lo más entretenido.

Saludos y no olvides compartirlo con tus amigos, hasta la próxima! 😉

Descarga el Código desde GitHub

I love to make impact through #coding and #technology, I'm a #software #developer and #musician!

Comments 2