TALLER DE DESARROLLO PARA WINDOWS 8

TIPO DE APLICACION: Mostrar Contenido Estatico

Elegir el tema del Contenido:

Salmo del Dia

Poema del Dia

Frases Celebres

Memes

Lyrics (Canciones de un artista)

Libros famosos

1. ES MUY IMPORTANTE el nombre del App , debe seleccionar en este punto el nombre del App, para

ayudarse un poco, puede ir a alguna de las siguientes paginas que lo ayudan a generar un nombre y

luego adaptarlo a su App:

http://superpatanegra.com/metanom.php : Genera un Nombre

http://www.dotomator.com/index.html : Genera un nombre combinando 2 criterios que son

variables ambos

http://suggest.name/ : genera nombre con 2 criterios que son variables ambos.

Una característica es seleccionar un nombre de estos y combinarlos con el tema que vamos a

desarrollar: por ejemplo en suggest.name yo seleccione colores sencillos y botes para generar mi

nombre, de los generados, tome GreenTrawlerFrases

INICIO DEL TALLER

2.Abra VS2012 y en el Start Page seleccione New Project

2.1 Seleccione en la parte izquierda el lenguaje con el cual vamos a desarrollar el App de Windows 8,

en nuestro caso C#, ubique en la sección de la izquierda la categoría: Windows Store y selecciónela

3. En la sección central de la pantalla, verifique que en la parte superior este seleccionado la versión

del framework correcta: .NET Framework 4.5, y seleccione en la parte central inferior la plantilla

Aplicación en Blanco: Blank App (XAML).

4. Coloque el nombre de su App seleccionado, seleccione una carpeta donde va a alojar los archivos

de su App y de clic sobre el botón OK.

Esto empezara a generar las plantillas necesarias para nuestra App.

5. Damos clic derecho sobre el nombre del proyecto: GreenTrawlerFrases y seleccionamos del menu

Add, New Item y nos muestra la siguiente pantalla:

6. En esta pantalla seleccionamos basic page, y le colocamos el nombre de PaginaPrincipal y presionamos el botón de Add de la derecha en la parte inferior de esta pantalla.

7. Ahora configuremos nuestra pagina inicial MainPage, para esto vamos a acondicionar el Grid para que tenga 2 filas y 2 columnas para respetar la C que nos propone el estilo Metro para Windows 8.

Para esto vamos a abrir la página llamada MainPage que se crea de manera automática al crear el App.

Vamos al código XAML y ubicamos el tag <Grid>, bajo este tag vamos a iniciar la configuración de nuestra pantalla inicial, vamos a colocar el siguiente código para generar las filas que necesitamos:

<Grid.RowDefinitions>

<RowDefinition Height="140"/>

<RowDefinition Height="*"/>

<RowDefinition Height="140"/>

</Grid.RowDefinitions>

Lo que definimos aquí es que la primera fila va atener una altura de 140 pixeles y la segunda fila va a ocupar el resto del espacio de la pantalla hasta que encuentre la ultima fila que también tiene una

altura de 140 pixeles.

8. hora necesitamos definir las columnas para la grilla, esto lo hacemos adicionando el siguiente código XAML debajo del código anteriormente adicionado:

<Grid.ColumnDefinitions>

<ColumnDefinition Width="140"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

Con esto definimos que la columna de la izquierda tiene un ancho de 140 pixeles para ir formando la C que nos recomienda el estilo de los App Windows 8.

En este momento debe poder ver en la pantalla varias líneas, una vertical y dos horizontales indicando las filas creadas y las columnas dándonos una idea de la C que debemos respetar.

9. Ahora vamos a colocar el titulo de nuestra App en la fila superior, para esto vamos a hacer uso de un control TextBlock de XAML para esto e indicarle que se coloque en la fila 1 del grid que estamos configurando.

Cree el siguiente código debajo del código creado en los pasos anteriores

<TextBlock x:Name="pageTitle" Grid.Column="1" Text="GreenTrawlerFrases" Style="{StaticResource PageHeaderTextStyle}"/>

En la propiedad Text, deben colocar el nombre de su App para que resalte, el estilo que utilizamos, es de los estilos por defecto que ya vienen en la plantilla de las Apps.

10. Ahora vamos a crear una descripción a nuestra pantalla inicial, para esto vamos a adicionar un control StackPanel y dentro de el un Textblock que contendrá la explicación de nuestra aplicación.

Adicione el siguiente código XAML a su app.

<StackPanel Grid.Column="1" HorizontalAlignment="Left" Height="100" Margin="10,10,0,0" Grid.Row="1" VerticalAlignment="Top" Width="1128">

<TextBlock TextWrapping="Wrap" FontSize="24"

Text="Este App le permitira disfrutar de diferentes frases celebres de diferentes autores, inicialmente sera una frase para el dia, pero podria ser tambien la frase de la hora."/>

</StackPanel>

Este código va debajo del código del textblock colocado antes.

11. Luego vamos a colocar un botón que nos permitirá mostrar la frase del día seleccionada por el sistema.

<Button Content="Generar Frase" FontSize="38" Grid.Column="1" HorizontalAlignment="Left" Margin="418,194,0,0" Grid.Row="1" VerticalAlignment="Top"

Height="75" Width="279"/>

Este código XAML debe ser colocado debajo del código anterior.

Para su caso deben cambiar el texto del botón, este texto es el que va en la propiedad "Content" del botón, de acuerdo a su aplicación y al tema que estén desarrollando deben colocar este texto.

12. En este punto el App se debe ver de esta manera

13. Ahora vamos a seleccionar el botón y dar doble clic sobre el, con esto se abre la ventana del code behind para adicionar el código que se debe ejecutar al presionar el botón.

private void Button_Click_1(object sender, RoutedEventArgs e) { //Navegar a la otra pagina a mostrar el resultado de la solicitud de la frase del dia this.Frame.Navigate(typeof(PaginaPrincipal)); }

14. En este momento deben tener un error en PaginaPrincipal, pues esta pagina aun no la hemos creado en nuestra Solución.

15. Vamos a crear nuestra pagina, para esto vamos a dar clic derecho sobre el nombre del ubmenproyecto que hallamos creado, en el menú que aparezca seleccionamos la opción de Adicionar (Add) y luego en el submenú Nuevo item (New Item..).

Esto lo podemos apreciar en la siguiente imagen:

15. En la pantalla que nos muestra seleccionamos en la parte izquierda Visual C# para el lenguaje, dentro de esta categoría, seleccionamos Windows Store para que nos muestre las diferentes plantillas a seleccionar:

De las plantillas que nos muestra vamos a seleccionar la plantilla de “Basic page” esta plantilla ya tiene lo que necesitamos para crear nuestra pagina, como se ve en la imagen de la derecha, ya contiene el boton de atrás o retornar para nuestra app de Windows 8 con XAML.

A continuación la pantalla:

16. En la casilla de la parte inferior de Nombre ( Name) colocamos el nombre de PaginaPrincipal.xaml y damos clic sobre el botón Add de la pantalla.

17. Esto nos muestra una pantalla que nos indica que Visual Studio adicionará al proyecto lo necesario para este tipo de Plantilla de amanera automática.

Damos clic sobre el botón Si, y el proceso inicia.

18. Esto adicionará una Carpeta y algunos archivos a nuestro Proyecto, esto lo podemos apreciar en la siguiente imagen.

Estos archivos se generan de manera automática al seleccionar el tipo de Plantilla.

19. Implementación SQLite

Este motor de base de datos permitirá almacenar la información en el Application Storage local del dispositivo donde se instalará la aplicación, para esto lo primero que debemos hacer es instalarla en nuestro VisualStudio (Esto solo se hace una vez) y luego habilitarla para nuestra aplicación (Esto se hace por cada aplicación en la que se desee implementar SQLite).

Para esto nos vamos a Herramientas – Extensiones y Actualizaciones (Tools – Extensions and Updates) en nuestro VisualStudio.

Acá se abrirá la ventana para descargar e instalar el SQLite for Windows Runtime en la ruta Online – Tools y en la casilla de búsqueda podemos escribir la extensión mencionada, la seleccionamos y hacemos clic sobre el botón install en la parte inferior de la ventana.

El siguiente paso consiste en habilitar el SQLite en nuestra aplicación, para esto abrimos el panel de administración de paquetes NuGet en Tools – Library Package Manager – Manage NuGet Packages for Solutions.

Esto nos abrirá el administrador de paquetes instalados, acá seleccionamos la opción online y en el buscador escribimos sqlite-net, al hacer clic sobre el botón install se abrirá una ventana en la que debe hacer check sobre el nombre de nuestra aplicación y luego hacemos clic sobre el botón OK.

Al finalizar aparecerán dos nuevas clases que corresponden a la implementación del SQLite que hicimos

Para finalizar agregamos dos referencias para que el SQLite corra en nuestra aplicación sin inconvenientes:

20. Creación de estructura de Almacenamiento de Información

Para estructurar el esquema de datos vamos a crear dentro de la carpeta DataModel dos clases una la llamaremos con el nombre de la tabla que queremos crear (si son varias tablas generamos una clase por tabla), para nuestro ejemplo se creó la clase Frase.

Nos muestra la ventana de creacion de un nuevo item, en este caso una clase que le vamos a dar el nombre correcto, Frase para nosotros:

Que tiene el siguiente código:

public class Frase { [SQLite.AutoIncrement,SQLite.PrimaryKey] public int Id { get; set; } /// <summary> /// El titulo de la Cancion, Frases va vacio, Poema el titulo del poema, etc. /// </summary> public String Titulo { get; set; } /// <summary> /// La letra de la canción, la Frase celebre, el poema como tal /// </summary> public String Descripcion { get; set; } /// <summary> /// El libro del salmo, la apgina web, el autor d ela frase, el cantante de la cancion /// </summary> public String Referencia { get; set; } /// <summary> /// categoria de la frase, del salmo, del poema, por ejemplo: poema de amor, de despecho, etc. /// </summary> public String Categoria { get; set; } }

21. La siguiente clase es el contexto para manejar la tabla que vamos a crear en la base de datos de SQLite, nuestra clase la vamos a llamar FrasesCelebresContext , para el caso propio ustedes deben llamar esta clase de acuerdo al tema escogido por ustedes para esta App.

A continuación el código de la clase a construir:

public class FracesCelebresContext : SQLiteConnection { /// <summary> /// Constructor de la clase /// </summary> /// <param name="nombreBasedatos">El nombre y la ruta de la base de datos</param> public FracesCelebresContext(String nombreBasedatos) : base(nombreBasedatos) { CreateTable<Frase>(); } /// <summary> /// Metodo que ubica una frase o un registro de acuerdo a su id /// </summary> /// <param name="id"></param> /// <returns></returns> public Frase GetFrase(int id) { return (from c in Table<Frase>() where c.Id == id select c).Single(); } /// <summary> /// Metodo que lista todos los registros /// </summary> /// <returns>Devuelve una lista generica</returns> public List<Frase> GetFrases() { return (from c in Table<Frase>() select c).ToList(); } /// <summary> /// Metodo que adiciona un registro a la tabla /// </summary> /// <param name="frase">Un objeto de tipo Frase para adcionar</param> /// <returns>Devueleve el id asignado al registro insertado </returns> public int AddFrase(Frase frase) { this.Insert(frase); return frase.Id; } /// <summary> /// metodo para grabar las modificaciones a una registro de la tabla /// </summary> /// <param name="frase">Un Objeto con los datos a eliminar</param> /// <returns>Un entero que indica el numero de registros afectados por el update</returns> public int UpdFrase(Frase frase) { return this.Update(frase); } }

Aquí en el constructor de esta clase, creamos las tablas necesarias de nuestra base de datos y los métodos o acciones necesarios a nuestra aplicación para nuestra clase.

21.2 Debemos crear la base de datos local en algún punto, el mejor es en el código del archivo App.xaml pues es global a nuestra app. Para ello vamos a abrir el code behind de este archivo, eso lo hacemos dando clic derecho sobre el código xaml del archivo, seleccionando la opción View Code del menú y adicionar lo siguiente:

public FracesCelebresContext bd;

Antes del constructor, se debe ver como aparece a continuación:

public FracesCelebresContext bd; /// <summary> /// Initializes the singleton application object. This is the first line of authored code /// executed, and as such is the logical equivalent of main() or WinMain(). /// </summary> public App() { this.InitializeComponent(); this.Suspending += OnSuspending; string Datapath; Datapath = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "MisFrases.sqlite"); bd = new FracesCelebresContext(Datapath);

}

Observe que despues del método initializeComponent() se adicionan una líneas que son las que nos aseguran la creación de la base de datos local con SQLite en el App.

También debe cambiar el nombre de la base de datos.

22. Ahora debemos crear una clase que utilice a estas dos anteriores para tener nuestra capa de Negocio, para ello vamos a crear una nueva clase con el sufijo Negocio, en nuestro caso la clase se llamara FrasesNegocio.cs y contendrá los métodos para llenar los datos en la base de datos por primera vez y para extraer la información de la tabla, a continuación el código de la clase de Negocio:

NOTA: EN ESTE PUNTO TODOS DEBEN CREAR EL NUMERO DE REGISTROS MINIMOS A MOSTRAR SON 20, DE ACUERDO A SU TEMA SELECCIONADO AL PRINCIPIO DEL TALLER Y CON COPIAR Y PEGAR CREAR O LLENAR LOS DATOS A MOSTRAR POR LA APLICACIÓN.

public class FrasesNegocio { // Definimos una variable de tipo Contexto y le pasamos al ruta de la base de datos FracesCelebresContext db = new FracesCelebresContext( Windows.Storage.ApplicationData.Current.LocalFolder.Path + @"\MisFrases.sqlite"); /// <summary> /// Metodo que carga los datos a tener en nuestra base de datos local /// </summary> public void CargarDatos() {

if (db.GetFrases().Count() == 0) { List<Frase> lista = new List<Frase>(); Frase oFrase = new Frase(); try { oFrase = new Frase() { Id = 0, Titulo = "", Descripcion = "El amor no mira con los ojos, sino con el alma", Referencia = "William Shakespeare", Categoria = "Amor" }; lista.Add(oFrase); oFrase = new Frase() { Id = 0, Titulo = "", Descripcion = "El respeto al derecho ajeno es la paz", Referencia = "Benito Juárez", Categoria = "Paz" }; lista.Add(oFrase); oFrase = new Frase() { Id = 0, Titulo = "", Descripcion = "La peor forma de extrañar a alguien es estar sentado a su lado y saber que nunca lo podrás tener", Referencia = "Gabriel García Márquez", Categoria = "Desamor" }; lista.Add(oFrase); oFrase = new Frase() { Id = 0, Titulo = "", Descripcion = "El amor es el olvido del yo", Referencia = "Henri-Frédéric Amiel", Categoria = "Amor" }; lista.Add(oFrase); oFrase = new Frase() { Id = 0, Titulo = "",

Descripcion = "Nunca dejes de sonreír, ni siquiera cuando estés triste, porque nunca sabes quien se puede enamorar de tu sonrisa", Referencia = "Gabriel García Márquez", Categoria = "Amor" }; lista.Add(oFrase); oFrase = new Frase() { Id = 0, Titulo = "", Descripcion = "Hemos aprendido a volar como los pájaros, a nadar como los peces, pero no hemos aprendido el arte de vivir juntos, como hermanos", Referencia = "Martin Luther King", Categoria = "Solidaridad" }; lista.Add(oFrase); oFrase = new Frase() { Id = 0, Titulo = "", Descripcion = "El amor es así, como el fuego; suelen ver antes el humo los que están fuera que las llamas los que están dentro", Referencia = "Jacinto Benavente", Categoria = "Amor" }; lista.Add(oFrase); oFrase = new Frase() { Id = 0, Titulo = "", Descripcion = "Te quiero no por quien eres, sino por quien soy cuando estoy contigo", Referencia = "Gabriel García Márquez", Categoria = "Amor" }; lista.Add(oFrase); oFrase = new Frase() { Id = 0, Titulo = "", Descripcion = "Ninguna persona merece tus lágrimas, y quien se las merezca no te hará llorar", Referencia = "Gabriel García Márquez", Categoria = "Amor" }; lista.Add(oFrase); oFrase = new Frase() {

Id = 0, Titulo = "", Descripcion = "El amor implica un fenómeno tan raro que se puede vivir toda la vida sin encontrar el ser a quien la naturaleza ha concedido el poder de hacernos feliz", Referencia = "Honoré de Balzac", Categoria = "Amor" }; // 10 registros lista.Add(oFrase); oFrase = new Frase() { Id = 0, Titulo = "", Descripcion = "Hay que seguir la lucha con lo que podamos hasta que podamos", Referencia = "Benito Juárez ", Categoria = "Constancia" }; lista.Add(oFrase); foreach (Frase item in lista) { db.AddFrase(item); } } catch (Exception) { throw; } } } /// <summary> /// Metodo que lee los datos y elige un registro de manera aleatoria /// </summary> /// <returns>Un objeto de tipo Fase, apra mostrar en la pantalla</returns> internal Frase TraerFrase() { List<Frase> lstFrase = new List<Frase>(); Frase oFrase = new Frase(); try { lstFrase = db.GetFrases(); Int32 maxReg = lstFrase.Count(); Random rnd = new Random(); int numero = rnd.Next(0, 10); oFrase = lstFrase[numero]; } catch (Exception) { throw; }

return oFrase; } }

23. Ahora vamos a configurar la pagina que creamos y que no hemos aun tocado. Lo primero es

abrir nuestra pagina PaginaPrincipal.xaml, irnos a la ventana del código xaml y ubicar al principio

de la pagina la sección <Page.Resources>

En esta sección encontraremos lo siguiente:

<x:String x:Key="AppName">My Application</x:String>

Esta línea la copiamos y abrimos el archivo App.xaml y la vamos a copiar debajo del tag:

</ResourceDictionary.MergedDictionaries>

Además cuando al copiemos vamos a reemplazar “My Application” por el nombre de nuestra App.

24. Regresamos a nuestra pagina PaginaPrincipal.xaml y eliminamos toda esta sección dela página:

<Page.Resources> <!-- TODO: Delete this line if the key AppName is declared in App.xaml --> <x:String x:Key="AppName">My Application</x:String> </Page.Resources>

25. Ahora vamos a colocar los controles que necesitamos para mostrar los datos de nuestra app en la

pantalla, para ello vamos a crear los siguientes controles TextBlock, lo primero es ubicar en nuestra

pagina PaginaPrincipal la siguiente seccion:

<!-- Back button and page title --> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>

<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>

</Grid>

En esta sección encontramos la definición del botón back y del titulo a mostrar en esta página, ahora

vamos a adicionar los controles que nos permitan mostrar la información de nuestra app.

<TextBlock x:Name="tbkTitulo" FontSize="32" TextTrimming="None" Grid.Column="1" HorizontalAlignment="Left" Margin="10,10,0,0" Grid.Row="1" TextWrapping="Wrap"

Text="TextBlock" VerticalAlignment="Top" Foreground="DarkSalmon"/> <TextBlock x:Name="tbkDescripcion" FontSize="28" TextTrimming="None" Grid.Column="1" HorizontalAlignment="Left" Margin="10,53,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/> <TextBlock x:Name="tbkReferencia" FontSize="28" FontStyle="Oblique" Foreground="Blue"

Grid.Column="1" HorizontalAlignment="Left" Margin="10,211,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/> <TextBlock x:Name="tbkCategoria" FontSize="24" Grid.Column="1" HorizontalAlignment="Left" Margin="10,271,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBlock"

VerticalAlignment="Top"/>

En estos 4 controles vamos a mostrar la información que requerimos.

Para los que usen una App de poemas o de canciones, el textblock de Titulo les servirá, para los de

frases celebres, no les servirá, la descripción es el texto del poema, canción, frase, etc., la referencia

es el autor, y la Categoría es la categoría si aplica.

Con esto ya podemos ver nuestro App, lógicamente aun no hemos llenado los datos a mostrar.

26. Ahora damos clic derecho sobre el código xaml y nos aparece el siguiente menú contextual para

seleccionar la opción de código:

Aquí seleccionamos la opción de View Code del menú esto nos lleva a la pantalla de código del App.

Al principio de la clase de la página debemos agregar los siguientes using para tener acceso al código

necesario:

using GreenTrawlerFrases.Common; using GreenTrawlerFrases.DataModel;

En el constructor de la página adicionamos el siguiente código, para que quede de la siguiente forma:

public PaginaPrincipal() { this.InitializeComponent();

// Cargo los datos del App FrasesNegocio frasesNeg = new FrasesNegocio(); Frase lstFrases = new Frase(); try { lstFrases = frasesNeg.TraerFrase(); tbkTitulo.Text = lstFrases.Titulo; tbkDescripcion.Text = lstFrases.Descripcion; tbkReferencia.Text = lstFrases.Referencia; tbkCategoria.Text = lstFrases.Categoria; } catch (Exception) { throw; } }

Ahora podemos ejecutar nuestro App y ponerlo a funcionar.

Pero antes, para evitar inconvenientes se recomienda cambiar la plataforma seleccionada a X64 en

las propiedades de nuestra aplicación en la opción Build.

Al seleccionar esta opcion aparece la siguiente pantalla en la cual debemos configurar que nuestra

compilacion sea a 64 bits oa 32 dependiendo del procesador en cual estemos trabajando.

27. Ahora ejecutemos nuestro App, para esto, lo primero que debemos hacer es verificar que el

destino de ejecución del App es “Local Machine”, como lo apreciamos en la siguiente imagen:

Para seleccionarlo hacemos clic sobre la flecha hacia abajo que se encuentra a la derecha de las

palabras y seleccionamos la opción correcta.

Al dar clic sobre el botón aparece nuestra App:

Al presionar el botón generar Frase nos muestra la frase:

Observamos el botón de atrás en al parte superior de la página y la frase seleccionada de manera al

azar por nuestra App.

28. Ahora vamos a crear una página en la cual le adicionaremos a los settings de nuestra App y con la

cual señalaremos que no estamos obteniendo información del usuario.

Adicionamos una nueva pagina a la solución, esto lo hacemos dando clic derecho sobre el proyecto,

Add, New Item… y seleccionamos la plantilla de Windows Store y Blank Page y como nombre le

colocamos SettingsFlyout.xaml:

Ahora entre los Tags de <Grid> y </Grid> vamos a copiar el siguiente código xaml para llenar lso

datos de la Política de Privacidad de la Aplicación.

<StackPanel> <TextBlock Margin="5,30,0,30" Style="{StaticResource SubheaderTextStyle}" >App desarrollada por:</TextBlock> <TextBlock Margin="5,0,0,0" FontSize="24" Style="{StaticResource SubheaderTextStyle}" > Roberto Alvarado Taborda </TextBlock> <TextBlock Margin="5,0,0,0" FontSize="24" Style="{StaticResource SubheaderTextStyle}" ></TextBlock> <TextBlock Margin="5,0,0,0" FontSize="24" Style="{StaticResource SubheaderTextStyle}" >Bogotá D.C., Colombia</TextBlock> <TextBlock Margin="5,0,0,0" FontSize="24" Style="{StaticResource SubheaderTextStyle}" > ralvaradot@hotmail.com </TextBlock> <TextBlock Margin="5,0,0,0" FontSize="24" Style="{StaticResource SubheaderTextStyle}" >http://bdotnet.wix.com/privacypolicy</TextBlock> <TextBlock Margin="5,30,0,30" Style="{StaticResource SubheaderTextStyle}" >Política de privacidad</TextBlock>

<TextBlock Margin="5,0,0,0" FontSize="18" Style="{StaticResource SubheaderTextStyle}" >La aplicación hace uso de la conexión a internet, única y exclusivamente, para descargar información relativa de la misma desde nuestros servidores.</TextBlock> <TextBlock Margin="5,0,0,0" FontSize="18" Style="{StaticResource SubheaderTextStyle}" >Ninguna información de la máquina o del usuario es enviada de vuelta a ellos ni a ningún otro servidor a través de internet ni de ningún otro medio por parte de esta aplicación.</TextBlock> <TextBlock Margin="5,0,0,0" FontSize="18" Style="{StaticResource SubheaderTextStyle}" >Es responsabilidad del usuario el manejo que este haga de los datos que son registrados a través de la aplicación.</TextBlock> </StackPanel>

Lo que debemos reemplazar de este código, es su nombre, y su email. Lo demás lo pueden dejar tal

cual se encuentra en el código xaml expuesto aquí.

Su página se verá de la siguiente manera:

29. Ahora vamos a escribir el código que necesitamos para que nos muestre esta pantalla de settings

en nuestra App.

Abrimos nuestra página de inicio del App, o sea la pagina MainPage.xaml y seleccionamos el code

behind, o sea clic derecho y en el menú seleccionar View Code, al hacer esto veremos la pantalla del

código, vamos a ir a la parte superior de la clase y bajo la llave de apertura de la clase ({) colocamos

el siguiente codigo:

private bool isEventRegistered; // Used to determine the correct height to ensure our custom UI fills the screen. private Rect windowBounds; // Desired width for the settings UI. UI guidelines specify this should be 346 or 646 depending on your needs. private double settingsWidth = 400; // This is the container that will hold our custom content. private Popup settingsPopup;

30. Ahora vamos a empezar a desarrollar la lógica para mostrar nuestra pantalla de settings,

ubicamos el constructor de nuestra página, sabiendo que el constructor tiene el mismo nombre de la

página, entonces tenemos:

public MainPage() { this.InitializeComponent(); }

Este es el método que vamos a modificar, nuestro constructor va a quedar de la siguiente manera:

public MainPage() { this.InitializeComponent(); windowBounds = Window.Current.Bounds; // Added to listen for events when the window size is updated. Window.Current.SizeChanged += OnWindowSizeChanged; //Evento de lanzamiento de settings //rootPage.NotifyUser("Defaults command added", NotifyType.StatusMessage); if (!this.isEventRegistered) { // Listening for this event lets the app initialize the settings commands and pause its UI until the user closes the pane. // To ensure your settings are available at all times in your app, place your CommandsRequested handler in the overridden // OnWindowCreated of App.xaml.cs SettingsPane.GetForCurrentView().CommandsRequested += onCommandsRequested; this.isEventRegistered = true; } }

31. Ahora vamos a crear los métodos que necesitamos para que el código anterior no contenga

errores:

private void onCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs eventArgs) { UICommandInvokedHandler handler = new UICommandInvokedHandler(onSettingsCommand); SettingsCommand generalCommand = new SettingsCommand("DefaultsId", "Acerca de", handler); eventArgs.Request.ApplicationCommands.Add(generalCommand); } private void onSettingsCommand(IUICommand command) { // Create a Popup window which will contain our flyout. settingsPopup = new Popup(); settingsPopup.Closed += OnPopupClosed; Window.Current.Activated += OnWindowActivated; settingsPopup.IsLightDismissEnabled = true; settingsPopup.Width = settingsWidth; settingsPopup.Height = windowBounds.Height; // Add the proper animation for the panel. settingsPopup.ChildTransitions = new TransitionCollection(); settingsPopup.ChildTransitions.Add(new PaneThemeTransition() { Edge = (SettingsPane.Edge == SettingsEdgeLocation.Right) ? EdgeTransitionLocation.Right : EdgeTransitionLocation.Left }); // Create a SettingsFlyout the same dimenssions as the Popup. SettingsFlyout mypane = new SettingsFlyout(); mypane.Width = settingsWidth; mypane.Height = windowBounds.Height; // Place the SettingsFlyout inside our Popup window. settingsPopup.Child = mypane; // Let's define the location of our Popup. settingsPopup.SetValue(Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation.Right ? (windowBounds.Width - settingsWidth) : 0); settingsPopup.SetValue(Canvas.TopProperty, 0); settingsPopup.IsOpen = true; } /// <summary> /// Invoked when the window size is updated. /// </summary> /// <param name="sender">Instance that triggered the event.</param> /// <param name="e">Event data describing the conditions that led to the event.</param> void OnWindowSizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e) { windowBounds = Window.Current.Bounds; } /// <summary>

/// We use the window's activated event to force closing the Popup since a user maybe interacted with /// something that didn't normally trigger an obvious dismiss. /// </summary> /// <param name="sender">Instance that triggered the event.</param> /// <param name="e">Event data describing the conditions that led to the event.</param> private void OnWindowActivated(object sender, Windows.UI.Core.WindowActivatedEventArgs e) { if (e.WindowActivationState == Windows.UI.Core.CoreWindowActivationState.Deactivated) { settingsPopup.IsOpen = false; } } /// <summary> /// When the Popup closes we no longer need to monitor activation changes. /// </summary> /// <param name="sender">Instance that triggered the event.</param> /// <param name="e">Event data describing the conditions that led to the event.</param> void OnPopupClosed(object sender, object e) { Window.Current.Activated -= OnWindowActivated; }

32. Y ahora nos falta colocar unos using para que se quiten los errores que tenemos de las clases que

estamos utilizando.

Como apreciamos en la imagen, al colocar el cursor sobre uno de los errores como el seleccionado en

el cuadro rojo, apreciamos una raya azul la cual al colocar el mouse sobre ella muestra un botón:

Al hacer clic sobre el botón nos muestra un menú desde donde podemos seleccionar el using a

insertar en nuestra Clase:

En cada uno de los puntos en los cuales tengamos esto, estaremos realizando estos mismo pasos, de

todas formas les coloco los using que se necesitan por si lo quieren copiar y pegar.

using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Media.Animation; using Windows.UI.Xaml.Navigation;

Ejecutémosla y probemos el App

33. Con esto ya tenemos nuestra App lista para ser subida al Store, probémosla y revisemos que todo

este bien, vamso al menú de Project, Store, Create App Package..

Nos muestra la siguiente pantalla, seleccionamos la opción No, y continuamos:

Presionamos el botón de Next, nos muestra la siguiente pantalla

Presionamos el botón Create y nos muestra la siguiente pantalla:

Indicando en que ruta de nuestro disco duro quedará el paquete de instalación a generar.

34. Ahora debemos crear las imágenes necesarias para subir el App

Ahora tome el directorio de su App, empaquetelo junto con las imágenes de la pantalla de su App y

envielo al email: bdotnet@outlook.com para ser subido al Windows Store.