Desarrollo de Windows 10: primera aplicación

En este capítulo, crearemos nuestra primera aplicación simple "Hello world" en la Plataforma universal de Windows (UWP) usando XAML y C # en Windows 10. Demostraremos cómo una sola aplicación para UWP creada en Visual Studio se puede ejecutar y ejecutar en cualquier dispositivo Windows 10.

Comencemos a crear la aplicación siguiendo los pasos que se detallan a continuación.

Inicie Visual Studio 2015.
Clickea en el File menú y seleccione New > Project.

El seguimiento New ProjectSe mostrará la ventana de diálogo. Puede ver los diferentes tipos de plantillas en el panel izquierdo del cuadro de diálogo.

En el panel izquierdo, puede ver la vista de árbol. SeleccioneUniversal template desde Templates > Visual C# > Windows.
Desde el panel central, seleccione el Blank App (Universal Windows) modelo
Dale un nombre al proyecto escribiendo UWPHelloWorld en el Name field.
Hacer clic OK para crear un nuevo proyecto para UWP.

Puede ver el proyecto recién creado en el Solution Explorer.
Esta es una aplicación en blanco pero contiene muchos archivos, que es el requisito mínimo para cualquier aplicación para UWP.
MainPage.xaml y MainPage.xaml.cs ejecutar cuando ejecuta su aplicación.
Por defecto, MainPage.xaml archivo contiene la siguiente información.

<Page 
   x:Class = ”UWPHellowWorld.MainPage” 
   xmlns = ”http://schemas.microsoft.com/winfx/2006/xaml/presentation” 
   xmlns:x = ”http://schemas.microsoft.com/winfx/2006/xaml” 
   xmlns:local = ”using:UWPHellowWorld” 
   xmlns:d = ”http://schemas.microsoft.com/expression/blend/2008” 
   xmlns:mc = ”http://schemas.openxmlformats.org/markup-compatibility/2006” 
   mc:Ignorable = ”d”>  
	
   <Grid Background = ”{ThemeResource ApplicationPageBackgroundThemeBrush}”>
   </Grid>
	
</Page>

A continuación se muestra la información predeterminada disponible en MainPage.xaml.cs.

using System; 
using System.Collections.Generic; 
using System.IO; 
using System.Linq; 
using System.Runtime.InteropServices.WindowsRuntime; 

using Windows.Foundation; 
using Windows.Foundation.Collections; 

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Controls.Primitives; 
using Windows.UI.Xaml.Data; 
using Windows.UI.Xaml.Input; 
using Windows.UI.Xaml.Media; 
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at 
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace UWPHellowWorld {
 
   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage(){ 
         this.InitializeComponent(); 
      } 
   } 
	
}

Agreguemos algunos bloques de texto, un cuadro de texto y un botón como se muestra en el código XAML a continuación.

<Page 
   x:Class = ”UWPHellowWorld.MainPage” 
   xmlns = ”http://schemas.microsoft.com/winfx/2006/xaml/presentation” 
   xmlns:x = ”http://schemas.microsoft.com/winfx/2006/xaml” 
   xmlns:local = ”using:UWPHellowWorld” 
   xmlns:d = ”http://schemas.microsoft.com/expression/blend/2008”
   xmlns:mc = ”http://schemas.openxmlformats.org/markup-compatibility/2006” 
   mc:Ignorable = ”d”>  
   
   <Grid Background = ”{ThemeResource ApplicationPageBackgroundThemeBrush}”> 
	
      <StackPanel HorizontalAlignment = ”Center”> 
         <TextBlock Text = ”Hello, world!”  Margin = ”20”  Width = ”200” 
            HorizontalAlignment = ”Left”/> 
				
         <TextBlock Text = ”Write your name.” Margin = ”20” Width = ”200” 
            HorizontalAlignment = ”Left”/> 
				
         <TextBox x:Name = ”txtbox”  Width = ”280” Margin = ”20” 
            HorizontalAlignment = ”Left”/> 
				
         <Button x:Name = ”button” Content = ”Click Me” Margin = ”20” 
            Click = ”button_Click”/> 
				
         <TextBlock x:Name = ”txtblock” HorizontalAlignment = ”Left” 
            Margin = ”20”/> 
      </StackPanel> 
		
   </Grid> 
	
</Page>

A continuación se muestra el botón de evento de clic en C #.

using System; 
using System.Collections.Generic; 
using System.IO; 
using System.Linq; 

using System.Runtime.InteropServices.WindowsRuntime; 
using Windows.Foundation; 
using Windows.Foundation.Collections;
 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Controls.Primitives; 
using Windows.UI.Xaml.Data; 
using Windows.UI.Xaml.Input; 
using Windows.UI.Xaml.Media; 
using Windows.UI.Xaml.Navigation; 
 
// The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  

namespace UWPHellowWorld {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage() {
         this.InitializeComponent(); 
      }  
		
      private void button_Click(object sender, RoutedEventArgs e) {
         if (txtbox.Text != “”) 
            txtblock.Text = “Hello: “ + txtbox.Text; 
         else 
            txtblock.Text = “You have not write your name”; 
      } 
		
   }	
	
}

En el proyecto UWP, device preview La opción está disponible en el Design Window, con la ayuda de la cual puede cambiar el diseño fácilmente, para que se ajuste al tamaño de pantalla de todos los dispositivos de una familia de dispositivos a la que apunta para su aplicación.

Puede ejecutar y probar su aplicación en una máquina local, un simulador o un emulador, o en un dispositivo remoto. Puede seleccionar el dispositivo de destino del siguiente menú como se muestra a continuación:

Ejecutemos el código anterior en una máquina local y verá la siguiente ventana. Ahora, escriba cualquier nombre en el cuadro de texto y haga clic en el botónClick Me.

Ahora, si desea probar su aplicación en un emulador, puede seleccionar un emulador en particular del menú y ejecutar su aplicación. Verá el siguiente emulador:

Le recomendamos que ejecute la aplicación anterior con diferentes dispositivos.

↰ Previous page Next page ↱