Creación de una aplicación C++ básica de la Tienda (tutorial 1 de 4)

En Visual Studio 2013 con Update 2, puedes usar C++ para desarrollar una aplicación para Windows 8.1 y Windows Phone 8.1 con una interfaz de usuario definida en lenguaje XAML.

En este tema se describe el desarrollo para Windows 8.1. Para ver un tutorial de introducción para el desarrollo de Windows 10 Insider Preview en C++, consulta Crear una aplicación "hola a todos" en C++ (Windows 10). Puedes redestinar aplicaciones escritas para Windows 8.1 y Windows Phone 8.1 a Windows 10 Insider Preview.

Consulta los siguientes temas para acceder a tutoriales en otros lenguajes de programación:

Antes de comenzar...

  • Para completar este tutorial, debes usar Microsoft Visual Studio Express 2013 para Windows con Update 2 o posterior, o una de las versiones no Express de Visual Studio 2013 con Update 2 o posterior, en un equipo con Windows 8.1 o Windows 10 Insider Preview. Para su descarga, consulta Obtener las herramientas En la edición de Visual Studio que uses, asegúrate de seleccionar la configuración de desarrollo de Visual C++.
  • También debes tener una licencia de desarrollador. Si necesitas instrucciones, consulta el tema para obtener una licencia de desarrollador.
  • Damos por hecho que tienes conocimientos básicos de C++ y XAML estándar, y estás familiarizado con los conceptos de Introducción a XAML.
  • Se supone que estás usando el diseño de ventana predeterminado en Visual Studio. Para restablecer el diseño predeterminado, en la barra de menús, elige Ventana > Restablecer diseño de la ventana.
  • Puedes ver el código completo de este tutorial en la muestra Hello World (C++) en la Galería de código.

El compilador de Visual C++ en Microsoft Visual Studio 2015 RC no admite el desarrollo de aplicaciones de Windows en tiempo de ejecución destinadas a Windows 8 o Windows 8.1. Para tener estas plataformas como destino, asegúrate de que Visual Studio 2013 Update 2 o una versión posterior está instalada en el equipo y, después, en el proyecto de Visual Studio 2015, abre el proyecto de Windows 8 o Windows 8.1, elige Proyecto > Propiedades desde el menú principal y en la sección General, establece la propiedad Conjunto de herramientas de la plataforma en Visual Studio 2013 (v120).

Comparación de aplicaciones de escritorio C++ con aplicaciones de Windows

Si has trabajado en un entorno de programación de escritorio de Windows en C++, posiblemente encontrarás que algunos aspectos de la programación de aplicaciones de la Tienda Windows y de Windows Phone te resultan familiares, pero otros aspectos requieren algo de estudio por tu parte.

¿Qué es igual?

  • Puedes usar la STL, la CRT (salvo algunas excepciones), y cualquier otra biblioteca de C++ siempre que el código no intente llamar a funciones de Windows a las que no se puede acceder desde el entorno de Windows en tiempo de ejecución.

  • Si estás acostumbrado a los diseñadores visuales, puedes seguir usando el diseñador integrado en Microsoft Visual Studio o puedes usar Blend for Microsoft Visual Studio 2013, que es una herramienta más completa. Si estás acostumbrado a codificar la interfaz de usuario a mano, puedes codificar a mano tu XAML.

  • Sigues creando aplicaciones que usan tipos de sistemas operativos Windows y tus propios tipos personalizados.

  • Continúas usando el depurador, generador de perfiles y otras herramientas de desarrollo de Visual Studio.

  • Sigues creando aplicaciones que se compilan en el código máquina nativo mediante el compilador de Visual C++. Las aplicaciones de la Tienda Windows en C++ no se ejecutan en un entorno de tiempo de ejecución administrado.

Novedades

  • Los principios de diseño para las aplicaciones de la Tienda Windows y las aplicaciones universales para Windows son muy distintos de los principios para las aplicaciones de escritorio. Se quita énfasis a los bordes, etiquetas, cuadros de diálogo, etc. de las ventanas. El contenido es lo más importante. Las grandes aplicaciones universales para Windows incorporan estos principios desde el comienzo de la etapa de planeación.

  • Toda la interfaz de usuario se define con XAML. La separación entre la interfaz de usuario y la lógica de programa principal es mucho más clara en una aplicación universal para Windows que en una aplicación de MFC o Win32. Puede haber otras personas trabajando en la apariencia de la interfaz de usuario en el archivo XAML mientras tú trabajas en el comportamiento en el archivo de código.

  • Estás programando principalmente con una API nueva, fácil de navegar y orientada a objetos, Windows en tiempo de ejecución, aunque Win32 sigue estando disponible en los dispositivos de Windows para realizar algunas funciones.

  • Usas C++/CX para consumir y crear objetos de Windows en tiempo de ejecución. C++/CX permite controlar excepciones de C++, admite delegados y eventos, y permite realizar recuentos automáticos de referencias de objetos creados en forma dinámica. Cuando usas C++/CX, los detalles del COM subyacente y de la arquitectura de Windows están ocultos en el código de aplicación. Para más información, consulta la referencia de lenguaje de C++/CX.

  • La aplicación se compila en un paquete que también contiene metadatos sobre los tipos que incluye la aplicación, los recursos que usa y las funcionalidades que requiere (acceso a los archivos, acceso a Internet, acceso a la cámara, etc.).

  • En la Tienda Windows y la Tienda de Windows Phone, se comprueba que la aplicación sea segura mediante un proceso de certificación y se hace que millones de clientes potenciales puedan detectarla.

Aplicación Hello World de la Tienda en C++

Nuestra primera aplicación es "Hello World", que demuestra algunas características básicas de interactividad, diseño y estilos. Crearemos tanto una aplicación de la Tienda Windows 8.1 como una aplicación de Windows Phone 8.1 a partir de una solución de aplicación universal que contiene un proyecto para cada versión y un tercer proyecto para el código que comparten.

Empezaremos por los conceptos básicos:

  • Cómo crear una solución de aplicación universal en Visual Studio Express 2013 para Windows Update 2 o posterior.

  • Cómo comprender los proyectos y los archivos que se crean.

  • Cómo comprender las extensiones de componentes de Visual C++ (C++/CX) y cuándo usarlas.

Dn263168.wedge(es-es,WIN.10).gifLo primero: crear una solución en Visual Studio

  1. En la barra de menús de Visual Studio, elige Archivo > Nuevo > Proyecto.

  2. En el cuadro de diálogo Nuevo Proyecto, en el panel izquierdo, expande Instalado > Visual C++ > Aplicaciones de la Tienda > Aplicaciones universales.

  3. En el panel central, selecciona Aplicación vacía (aplicaciones universales).

  4. Escribe un nombre para el proyecto. La llamaremos Hello World.

    Plantillas de proyecto de C++ en el cuadro de diálogo Nuevo proyecto
  5. Selecciona el botón Aceptar. Se crean los archivos del proyecto.

Antes de continuar, veamos qué hay en la solución. En primer lugar, fíjate en que hay un proyecto de Windows 8.1, un proyecto de Windows Phone 8.1 y un proyecto compartido. El proyecto compartido no produce ninguna salida binaria, sino que contiene código que usan los otros dos proyectos. Cada proyecto de cada plataforma contiene el código específico correspondiente a su interfaz de usuario.

Solución de aplicación universal con los nodos contraídos

Ahora expande esos nodos, selecciona el nodo del proyecto de Windows 8.1 y haz clic en el icono Mostrar todos los archivos. Haz lo mismo para el proyecto de Windows Phone 8.1. Debería aparece algo similar a lo siguiente, según el nombre que asignaste a tu proyecto:

Solución de aplicación universal con los nodos descritos

Acerca de los archivos de proyecto

Cada archivo .xaml de una carpeta de proyecto tiene asociados en la misma carpeta un archivo .xaml.h y otro archivo .xaml.cpp y un archivo .g.hpp en la carpeta Archivos generados. Modifica los archivos XAML para crear elementos de la interfaz de usuario y conéctalos a orígenes de datos (enlace de datos). Modifica los archivos .h y .cpp files para agregar lógica personalizada para controladores de eventos. Los archivos autogenerados representan la transformación del marcado XAML en C++. No modifiques estos archivos, pero estúdialos para comprender mejor cómo funciona el código que se esconde tras ellos. Básicamente, el archivo generado contiene una definición de clase parcial para un elemento raíz de XAML; esta clase es la misma clase que modificas en los archivos *.xaml.h y .cpp. Los archivos generados declaran los elementos secundarios de la interfaz de usuario de XAML como miembros de clase para que puedas hacer referencia a ellos en el código que escribas. Durante la compilación, el código generado y tu código se combinan en una definición de clase completa y, después, se compilan.

Veamos primero los archivos del proyecto.

  • App.xaml, App.xaml.h, App.xaml.cpp: representan el objeto Application, que es un punto de entrada de la aplicación. App.xaml no contiene marcado de interfaz de usuario de la página, pero puedes agregar estilos de interfaz de usuario y otros elementos a los que desees que se pueda acceder desde cualquier página. Los archivos de código subyacente contienen controladores para los eventos OnLaunched y OnSuspending. Por lo general, aquí tienes que agregar código personalizado para que inicialice tu aplicación cuando se inicie y realice la limpieza cuando se suspenda o finalice.
  • MainPage.xaml, MainPage.xaml.h, MainPage.xaml.cpp: contienen el marcado XAML y el código subyacente para la página de "inicio" predeterminada de una aplicación. No dispone de compatibilidad de navegación ni de controles integrados.
  • pch.h, pch.cpp: un archivo de encabezado precompilado y el archivo que lo incluye en tu proyecto. En pch.h, puedes incluir cualquier encabezado que no cambie a menudo y que se incluyan en otros archivos de la solución.
  • package.appxmanifest: un archivo XML que describe las capacidades del dispositivo que requiere tu aplicación, así como la información de versión de la aplicación y otros metadatos. Para abrir este archivo en el Diseñador de manifiestos, solo tienes que hacer doble clic en él.
  • HelloWorld.Windows_TemporaryKey.pfx: una clave que permite la implementación de la aplicación en este equipo desde Visual Studio.

Un primer vistazo al código

Si examinas el código de App.xaml.h, de App.xaml.cpp en el proyecto compartido y de MainPage.xaml.h y .cpp en cada uno de los proyectos específicos de plataforma, verás que prácticamente todo es código ISO C++ bastante familiar. Sin embargo, es posible que no te parezcan familiares algunos elementos de la sintaxis. A continuación te mostramos los elementos de la sintaxis no estándares más comunes que verás en C++/CX:

  • Clases de referencia

    Prácticamente todas las clases de Windows en tiempo de ejecución, en las que se incluyen todos los tipos de la API de Windows (XAML de Windows, las páginas de tu aplicación, la propia clase App, todos los objetos de red y dispositivo, todos los tipos de contenedor), se declaran como ref class. (Algunos tipos de Windows son value class o value struct). Una clase de referencia se puede consumir desde cualquier lenguaje. En C++, la duración de estos tipos está regulada mediante recuentos automáticos de referencia (no la recolección de elementos no usados), para que nunca tengas que eliminar estos objetos de forma explícita. También puedes crear tus propias clases de referencia.

    
    
    namespace HelloWorld
        public ref class MainPage sealed
        {
          public:
              MainPage();
            ...
        };
    }
    
    

    Todos los tipos de Windows en tiempo de ejecución deben declararse con un espacio de nombres y, al contrario que en ISO C++, los propios tipos tienen un modificador de accesibilidad. El modificador public hace que los componentes de Windows en tiempo de ejecución puedan ver la clase fuera del espacio de nombres. La palabra clave sealed (sellada) significa que la clase no puede servir como una clase base. Prácticamente todas las clases de referencia están selladas; la herencia de clases no se admite mucho porque JavaScript no la comprende.

  • ref new y ^ (hats)

    Declaras una variable de una clase de referencia mediante el operador ^ (sombrero) y creas una instancia del objeto con la nueva palabra clave de la referencia. Después accedes a los métodos de instancia del objeto mediante el operador ->, como un puntero de C++. Para acceder a los métodos estáticos, es necesario usar el operador ::, como en ISO C++.

    En este código de abajo, usamos el nombre completo para crear una instancia del objeto y usamos el operador -> para llamar a un método de instancia.

    
    
    Windows::UI::Xaml::Media::Imaging::BitmapImage^ bitmapImage =
        ref new Windows::UI::Xaml::Media::Imaging::BitmapImage();
      
    bitmapImage->SetSource(fileStream);
    
    
    

    Por lo general, en un archivo .cpp file agregaríamos una directiva using namespace Windows::UI::Xaml::Media::Imaging y la palabra clave auto, para que el mismo código tuviese este aspecto:

    
    
    auto bitmapImage = ref new BitmapImage();
    bitmapImage->SetSource(fileStream);
    
    
    
  • Propiedades

    Una clase de referencia puede tener propiedades que, al igual que en los lenguajes administrados, son funciones de miembros especiales que aparecen como campos del código que se consume.

    
    public ref class SaveStateEventArgs sealed
    		{
    		public:
    
    			// Declare the property
    			property Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ PageState
    			{
    				Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ get();
    			}
    ...
    };
    
    ...
    // consume the property like a public field
    void PhotoPage::SaveState(Object^ sender, Common::SaveStateEventArgs^ e)
    {    
        if (mruToken != nullptr && !mruToken->IsEmpty())
        {
            e->PageState->Insert("mruToken", mruToken);
        }
    }
    
    
    
  • Delegados

    Al igual que en los lenguajes administrados, un delegado es un tipo de referencia que encapsula una función con una firma específica. Se usan principalmente con eventos y controladores de eventos

    
    // Delegate declaration (within namespace scope)
    public delegate void LoadStateEventHandler(Platform::Object^ sender, LoadStateEventArgs^ e);
    
    // Event declaration (class scope)
    public ref class NavigationHelper sealed
    {
      public:
        event LoadStateEventHandler^ LoadState;
    };
    
    // Create the event handler in consuming class
    MainPage::MainPage()
    {
        auto navigationHelper = ref new Common::NavigationHelper(this);
        navigationHelper->LoadState += ref new Common::LoadStateEventHandler(this, &MainPage::LoadState);
    }
    
    
    
    

Macro WINAPI_FAMILY

En una aplicación universal para Windows, algunos archivos de código se comparten entre los proyectos de teléfono y de Windows. En esos archivos a veces verás o tendrás que usar la directiva de compilación condicional para excluir código que solo está disponible en una de las dos plataformas. Por ejemplo, en app.xaml.cpp, el método RootFrame_FirstNavigated solo es relevante para proyectos de teléfono:

En app.xaml.cpp:


#if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP
/// <summary>
/// Restores the content transitions after the app is started.
/// </summary>
void App::RootFrame_FirstNavigated(Object^ sender, NavigationEventArgs^ e)
{
    ...
}
#endif


Agregar contenido a la aplicación

Vamos a agregar algo de contenido a la aplicación. Trabajaremos tanto en los proyectos de Windows 8.1 como de Windows Phone 8.1 a medida que vayamos avanzando y al final tendremos dos aplicaciones en ejecución.

Dn263168.wedge(es-es,WIN.10).gifPaso 1: Modificar tu página de inicio

  1. En el Explorador de soluciones, en el proyecto de Windows 8.1, abre MainPage.xaml.
  2. Crea controles para la interfaz de usuario agregando el siguiente código XAML a la raíz Grid, justo antes de su etiqueta de cierre. Contiene un StackPanel con un TextBlock que pregunta el nombre del usuario, un elemento TextBox que acepta el nombre del usuario, un Button y otro elemento TextBlock.
    
    
    <StackPanel  Margin="120,30,0,0">
        <TextBlock HorizontalAlignment="Left" Text="Hello World" FontSize="36"/>
        <TextBlock Text="What's your name?"/>
        <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
            <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
            <Button Content="Say &quot;Hello&quot;"/>
        </StackPanel>
        <TextBlock x:Name="greetingOutput"/>
    </StackPanel>
    
    
    

    Proporcionamos más información acerca del diseño XAML en el artículo sobre navegación, diseño y vistas.

  3. En este punto, has creado una aplicación de la Tienda Windows muy básica. (A continuación trabajaremos en la aplicación de Windows Phone: los conceptos son muy parecidos). Para ver el aspecto de la aplicación de la Tienda Windows, haz clic con el botón derecho en el proyecto de Windows 8.1 y elige Establecer como proyecto de inicio. y, a continuación, presiona F5 para compilar, implementar y ejecutar la aplicación en el modo de depuración.

    Primero aparece la pantalla de presentación predeterminada. Tiene una imagen, Assets\SplashScreen.scale-100.png, y un color de fondo especificados en el archivo de manifiesto de la aplicación. Para aprender a personalizar la pantalla de presentación, consulta Agregar una pantalla de presentación.

    Cuando desaparezca la pantalla de presentación, aparecerá tu aplicación. Muestra una pantalla negra y el título "Mi aplicación".

    No hay ningún botón ni comando para cerrar la aplicación. Aunque puedes usar el gesto de cerrar o la combinación de teclas Alt+F4 para cerrarla, uno generalmente no cierra las aplicaciones de la Tienda Windows. (Esto se explica en Parte 2: Administrar el ciclo de vida y el estado de la aplicación). Presiona la tecla de Windows y ve a la pantalla Inicio y observa que al implementar la aplicación, se agrega su icono en la pantalla Inicio. Para volver a ejecutar la aplicación, pulsa o haz clic en su icono, o presiona F5 en Visual Studio para ejecutarla en modo de depuración.

    Pantalla de la aplicación de la Tienda Windows con controles

    Aunque todavía no hace muchas cosas, te felicitamos por haber compilado tu primera aplicación de la Tienda Windows.

    Para detener la depuración y cerrar la aplicación, vuelve a Visual Studio y presiona Mayús+F5.

    Si quieres más información, consulta el tema sobre cómo ejecutar aplicaciones de la Tienda Windows en Visual Studio.

    En la aplicación puedes escribir en el TextBox, pero si haces clic en el Button, no se realiza ninguna acción. En los pasos posteriores, crearás un controlador de eventos para el evento Click del botón que muestra un saludo personalizado. Agregas un código de controlador de eventos a tus archivos MainPage.xaml.h y MainPage.xaml.cpp.

  4. Ahora, en el proyecto de Windows Phone 8.1, abre MainPage.xaml y agrega el mismo código XAML que agregaste anteriormente en la aplicación de la Tienda Windows.
  5. Puesto que la pantalla del teléfono es más pequeña, hagamos dos cambios en el código XAML: en primer lugar, reduce el margen izquierdo del StackPanel exterior a "20". A continuación cambia la orientación del StackPanel interior a vertical para que el botón se muestre debajo del cuadro de texto. El código XAML tendrá ahora el siguiente aspecto:

    
    <StackPanel  Margin="20,30,0,0">
        <TextBlock HorizontalAlignment="Left" Text="Hello World" FontSize="36"/>
        <TextBlock Text="What's your name?"/>
        <StackPanel Orientation="Vertical" Margin="0,20,0,20">
            <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
            <Button Content="Say &quot;Hello&quot;"/>
        </StackPanel>
        <TextBlock x:Name="greetingOutput"/>
    </StackPanel>
    
    
  6. Haz clic con el botón derecho en el proyecto de Windows Phone 8.1, elige Establecer como proyecto de inicio y, luego, presiona F5 para ejecutar la aplicación en Windows Phone Emulator. Deberías ver esto:

    Pantalla de la aplicación de la Tienda de Windows Phone, con controles

Paso 2: Crear un controlador de eventos

  1. (Completa estos pasos en el proyecto de Windows y en el proyecto de Windows Phone). En MainPage.xaml, en la vista de diseño o XAML, selecciona el Button "Decir Hola" que agregaste en el StackPanel creado anteriormente.
  2. Abre la ventana de propiedades presionando Alt+Enter y después elige el botón Eventos (Botón de eventos).
  3. Busca el evento Click. En su cuadro de texto, escribe el nombre de la función que controla el evento Click. Para este ejemplo, escribe "Button_Click".

    Ventana de propiedades, vista Eventos

  4. Presiona Entrar. El método del controlador de eventos se crea en MainPage.xaml.cpp y se abre de modo tal que puedas agregar el código que se ejecutará cuando se produzca el evento.

    Al mismo tiempo, en MainPage.xaml, el XAML para Button se actualiza para declarar el controlador de eventos de Click, de esta manera:

    
    <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
    
    
  5. Agrega el siguiente código al controlador de eventos Button_Click que acabas de crear en MainPage.xaml.cpp. Este código recupera el nombre de usuario del control nameInput TextBox y lo usa para crear un saludo. El TextBlock greetingOutput muestra el resultado.
    
    void HelloWorld::MainPage::Button_Clicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
        greetingOutput->Text = "Hello, " + nameInput->Text + "!";
    }
    
    
  6. Establece el proyecto como el proyecto de inicio y a continuación presiona F5 para compilar y ejecutar la aplicación. Cuando escribes un nombre en el cuadro de texto y haces clic en el botón, la aplicación muestra un saludo personalizado.

    Pantalla de la aplicación mostrando un mensaje

Paso 3: Otorgar estilo a la página de inicio

Elección de un tema

Es fácil personalizar la apariencia de tu aplicación. De manera predeterminada, tu aplicación usa recursos con un estilo oscuro. Los recursos del sistema también incluyen un tema claro. Vamos a probarlo y ver cómo es.

Dn263168.wedge(es-es,WIN.10).gifPara cambiar al tema claro

  1. En el proyecto compartido, abre App.xaml.
  2. En la etiqueta Application de apertura, agrega la propiedad RequestedTheme y establece su valor en: Light.
    
    RequestedTheme="Light"
    
    

    Esta es la etiqueta Application completa con el tema claro agregado:

    
    <Application
        x:Class="HelloWorld.App"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:HelloWorld" 
        RequestedTheme="Light">
    
    
  3. Convierte el proyecto de una de las plataformas en el proyecto de inicio y luego presiona F5 para compilarlo y ejecutarlo. Observa que usa el tema claro. Ahora establece el proyecto de la otra plataforma como el proyecto de inicio, presiona F5 y observa que también usa el tema claro. Esto se debe a que ambos proyectos comparten App.xaml.

    Pantalla de la aplicación con tema claro

¿Qué tema deberías usar? El que quieras. Esta es nuestra perspectiva: te recomendamos que uses el tema oscuro para las aplicaciones que muestren principalmente imágenes o vídeo y el tema claro para las aplicaciones que contengan mucho texto. Si vas a usar un esquema de colores personalizado, usa el tema que mejor se ajuste al aspecto de la aplicación.

Nota  El tema se aplica cuando se inicia la aplicación y no se puede cambiar mientras la aplicación se está ejecutando.

Usar estilos del sistema

Ahora mismo, en la aplicación de Windows el texto es muy pequeño y difícil de leer. Vamos a solucionarlo aplicando un estilo del sistema.

Dn263168.wedge(es-es,WIN.10).gifPara cambiar el estilo de un elemento

  1. En el proyecto de Windows, abre MainPage.xaml.
  2. En la vista de diseño o en XAML, selecciona el TextBlock "¿Cómo te llamas?" que agregaste anteriormente.
  3. En la ventana Propiedades (F4), elige el botón Propiedades (Botón Propiedades) en la parte superior derecha.
  4. Expande el grupo Texto y establece el tamaño de fuente en 18 px.
  5. Expande el grupo Varios y busca la propiedad Style.
  6. Haz clic en el marcador de propiedad (el cuadro verde situado a la derecha de la propiedad Style y después elige Recurso del sistema > BaseTextBlockStyle.

    BaseTextBlockStyle es un recurso definido en el ResourceDictionary en <root>\Program Files\Windows Kits\8.1\Include\winrt\xaml\design\generic.xaml.

    Ventana de propiedades, vista Propiedades

    En la superficie de diseño XAML, la apariencia del texto cambia. En el editor XAML, el XAML para el TextBlock se actualiza:

    
    <TextBlock Text="What's your name?" Style="{StaticResource BasicTextStyle}"/>
    
    
  7. Repite el proceso para establecer el tamaño de fuente y asignar BaseTextBlockStyle al elemento greetingOutputTextBlock.
    Sugerencia  Aunque no hay texto en este TextBlock, cuando mueves el puntero del mouse sobre la superficie de diseño XAML, un contorno azul muestra dónde está para que puedas seleccionarlo.

    Tu XAML ahora tiene esta apariencia:

    
    <StackPanel Margin="120,30,0,0">
        <TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="16" Text="What's your name?"/>
        <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
            <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
            <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
        </StackPanel>
        <TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="16" x:Name="greetingOutput"/>
    </StackPanel>
    
    
  8. Presiona F5 para compilar y ejecutar la aplicación. Ahora tiene esta apariencia:

    Pantalla de la aplicación con texto más grande

  9. Puedes repetir estos pasos para el proyecto de Windows Phone.

Resumen

Felicitaciones. Has completado el primer tutorial. En él aprendiste cómo se agrega contenido a una aplicación universal de Windows, cómo se le agrega interactividad y cómo se cambia su apariencia.

Consultar el código

¿Te has quedado atascado o quieres revisar tu trabajo? Si es así, consulta la muestra Hello World (C++) en la Galería de código.

Pasos siguientes

En el siguiente tutorial de esta serie, Administrar el ciclo de vida y el estado de la aplicación, podrás aprender cómo funciona el ciclo de vida de la aplicación y cómo guardar el estado de tu aplicación.

 

 

Mostrar:
© 2015 Microsoft