Crear un "Hola mundo!" Aplicación para UWP con C++/WinRT

Este tema te guía a través de la creación de una aplicación "Hello, World!" de la Plataforma universal de Windows (UWP) de Windows mediante C++/WinRT. La interfaz de usuario (UI) de la aplicación se define mediante el lenguaje de marcado extensible de aplicaciones (XAML).

C++/WinRT es una proyección de lenguaje C++17 moderna totalmente estándar para las API de Windows Runtime (WinRT). Para obtener más información y más tutoriales y ejemplos de código, consulta la documentación de C++/WinRT . Un buen tema con el que empezar es Introducción a C++/WinRT.

Configuración de Visual Studio para C++/WinRT

Para obtener información sobre cómo configurar Visual Studio para el desarrollo de C++/WinRT, incluida la instalación y el uso de la extensión de Visual Studio de C++/WinRT (VSIX) y el paquete NuGet (que proporcionan junto la plantilla de proyecto y la compatibilidad con la compilación), consulte compatibilidad de Visual Studio con C++/WinRT.

Para descargar Visual Studio, consulte Descargas.

Para obtener una introducción a XAML, consulta visión general de XAML

Crear una aplicación en blanco (HelloWorldCppWinRT)

Nuestra primera aplicación es una aplicación "Hello, World!" que muestra algunas características básicas de interactividad, diseño y estilos.

Empiece por crear un nuevo proyecto en Microsoft Visual Studio. Cree un proyecto Aplicación en blanco (C++/WinRT) , y asígnele el nombre HelloWorldCppWinRT. Asegúrese de que la opción Colocar solución y proyecto en el mismo directorio esté desactivada. Tenga como destino la versión más reciente disponible con carácter general (es decir, no en versión preliminar) del SDK de Windows.

En una sección posterior de este tema, se le indicará que compile su proyecto (pero no lo haga hasta entonces).

Acerca de los archivos del proyecto

Normalmente, en la carpeta del proyecto, cada archivo de .xaml (marcaje XAML) tiene un archivo correspondiente de .idl, .h, y .cpp. Juntos, esos archivos se compilan en un tipo de página XAML.

Puedes modificar un archivo de marcado XAML para crear elementos de interfaz de usuario y puedes enlazar esos elementos a orígenes de datos (una tarea conocida como enlace de datos). Modificas los .harchivos , y .cpp (y a veces el .idl archivo) para agregar lógica personalizada para tu página XAML: controladores de eventos, por ejemplo.

Echemos un vistazo a algunos de los archivos del proyecto.

• App.idl, App.xaml, App.h y App.cpp. Estos archivos representan la especialización de la aplicación de la clase Windows::UI::Xaml::Application , que incluye el punto de entrada de la aplicación. App.xaml no contiene ningún marcado específico de página, pero puede agregar estilos de elemento de interfaz de usuario allí, así como cualquier otro elemento al que quiera que se pueda acceder desde todas las páginas. Los .h archivos y .cpp contienen controladores para varios eventos de ciclo de vida de la aplicación. Normalmente, añades código personalizado para inicializar tu aplicación cuando esta se inicia y para realizar tareas de limpieza cuando se suspende o finaliza.
• MainPage.idl, MainPage.xaml, MainPage.h y MainPage.cpp. Contiene el marcado XAML y la implementación para el tipo de página principal (inicio) predeterminado en una aplicación, que es la clase en tiempo de ejecución MainPage . MainPage no tiene compatibilidad con la navegación, pero proporciona alguna interfaz de usuario predeterminada y un controlador de eventos para empezar.
• pch.h y pch.cpp. Estos archivos representan el archivo de encabezado precompilado del proyecto. En pch.h, incluya los archivos de encabezado que no cambien a menudo y, a continuación, incluya pch.h en otros archivos del proyecto.

Un primer vistazo al código

Clases en tiempo de ejecución

Como puede saber, todas las clases de una aplicación para la Plataforma universal de Windows (UWP) escrita en C# son tipos de Windows Runtime. Pero cuando creas un tipo en una aplicación de C++/WinRT, puedes elegir si ese tipo es un tipo de Windows Runtime o una clase/estructura/enumeración de C++ normal.

Cualquier tipo de página XAML en tu proyecto debe ser del tipo Windows Runtime. Por lo tanto, MainPage es un tipo de Windows Runtime. En concreto, es una clase en tiempo de ejecución . Cualquier tipo que sea utilizado por una página XAML también debe ser un tipo de Windows Runtime. Al estar escribiendo un componente de Windows Runtime, y si quieres crear un tipo que se pueda consumir desde otra aplicación, entonces crearás un tipo de Windows Runtime. En otros casos, el tipo puede ser un tipo de C++ normal. Por lo general, un tipo de Windows Runtime se puede consumir con cualquier lenguaje de Windows Runtime.

Una buena indicación de que un tipo es un tipo de Windows Runtime es que se define en Microsoft Interface Definition Language (MIDL) dentro de un archivo de lenguaje de definición de interfaz (.idl). Vamos a tomar MainPage como ejemplo.

// MainPage.idl
namespace HelloWorldCppWinRT
{
    [default_interface]
    runtimeclass MainPage : Windows.UI.Xaml.Controls.Page
    {
        MainPage();
        Int32 MyProperty;
    }
}

Y esta es la estructura básica de la implementación de la clase runtime MainPage y su factoría de activación, como se ve en MainPage.h.

// MainPage.h
...
namespace winrt::HelloWorldCppWinRT::implementation
{
    struct MainPage : MainPageT<MainPage>
    {
        MainPage();

        int32_t MyProperty();
        void MyProperty(int32_t value);
        ...
    };
}

namespace winrt::HelloWorldCppWinRT::factory_implementation
{
    struct MainPage : MainPageT<MainPage, implementation::MainPage>
    {
    };
}

Para obtener más información sobre si debe crear o no una clase en tiempo de ejecución para un tipo determinado, consulte el tema Author API with C++/WinRT. Y para obtener más información sobre la conexión entre clases en tiempo de ejecución e IDL (archivos.idl), puedes leer y seguir junto con el tema controles XAML; enlazar a una propiedad de C++/WinRT. Este tema le guía por el proceso de creación de una nueva clase en tiempo de ejecución, el primer paso del cual se va a agregar un nuevo Archivo Midl (.idl) elemento al proyecto.

Ahora vamos a agregar algo de funcionalidad al proyecto HelloWorldCppWinRT.

Paso 1. Modificación de la página de inicio

En el Explorador de soluciones, abra MainPage.xaml para que pueda crear los controles que forman la interfaz de usuario (UI).

Elimine el StackPanel que ya está allí, así como su contenido. En su lugar, pegue el código XAML siguiente.

<StackPanel x:Name="contentPanel" Margin="120,30,0,0">
    <TextBlock HorizontalAlignment="Left" Text="Hello, World!" FontSize="36"/>
    <TextBlock Text="What's your name?"/>
    <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
        <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
        <Button x:Name="inputButton" Content="Say &quot;Hello&quot;"/>
    </StackPanel>
    <TextBlock x:Name="greetingOutput"/>
</StackPanel>

Este nuevo StackPanel tiene un TextBlock que solicita el nombre del usuario, un TextBox que acepta el nombre del usuario, un Button y otro elemento TextBlock .

Puesto que hemos eliminado el botón denominado myButton, tendremos que quitar la referencia a él del código. Por lo tanto, en MainPage.cpp, elimine la línea de código dentro de la función MainPage::ClickHandler .

En este momento, ha creado una aplicación universal de Windows muy básica. Para ver el aspecto de la aplicación para UWP, compile y ejecute la aplicación.

En la aplicación, puede escribir en el cuadro de texto. Pero al hacer clic en el botón aún no se hace nada.

Paso 2. Agregar un controlador de eventos

En , busque el button inputButtony declare un controlador de eventos para su evento ButtonBase::Click . El marcado del botón debería tener este aspecto.

<Button x:Name="inputButton" Content="Say &quot;Hello&quot;" Click="inputButton_Click"/>

Implemente el controlador de eventos como este.

// MainPage.h
struct MainPage : MainPageT<MainPage>
{
    ...
    void inputButton_Click(
        winrt::Windows::Foundation::IInspectable const& sender,
        winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
};

// MainPage.cpp
namespace winrt::HelloWorldCppWinRT::implementation
{
    ...
    void MainPage::inputButton_Click(
        winrt::Windows::Foundation::IInspectable const& sender,
        winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
    {
        greetingOutput().Text(L"Hello, " + nameInput().Text() + L"!");
    }
}

Para obtener más información, consulta Manejar eventos mediante delegados.

La implementación recupera el nombre del usuario del cuadro de texto, lo usa para crear un saludo y lo muestra en el bloque de texto greetingOutput .

Compile y ejecute la aplicación. Escriba el nombre en el cuadro de texto y haga clic en el botón . La aplicación muestra un saludo personalizado.

Pantalla de aplicación

Paso 3. Estilo de la página de inicio

Elección de un tema

Es fácil personalizar la apariencia de la aplicación. De forma predeterminada, la aplicación usa recursos que tienen un estilo de color claro. Los recursos del sistema también incluyen un tema oscuro.

Para probar el tema oscuro, edite App.xamly agregue un valor para Application::RequestedTheme.

<Application
    ...
    RequestedTheme="Dark">

</Application>

En el caso de las aplicaciones que muestran principalmente imágenes o vídeos, se recomienda el tema oscuro; para las aplicaciones que contienen una gran cantidad de texto, se recomienda el tema claro. Si usas una combinación de colores personalizada, usa el tema que mejor se adapte a la apariencia de tu aplicación.

Usar estilos del sistema

En esta sección cambiaremos la apariencia del texto (por ejemplo, hacer que el tamaño de fuente sea mayor).

En MainPage.xaml, busque el mensaje "¿Cuál es su nombre?" TextBlock. Establezca la propiedad Style en una referencia a la clave de recurso del sistema BaseTextBlockStyle.

<TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>

BaseTextBlockStyle es la clave de un recurso que se define en el . Estos son los valores de propiedad establecidos por ese estilo.

<Style x:Key="BaseTextBlockStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="XamlAutoFontFamily" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="TextTrimming" Value="None" />
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="LineStackingStrategy" Value="MaxHeight" />
    <Setter Property="TextLineBounds" Value="Full" />
</Style>

También en , busque el TextBlock de denominado . Establezca también su Style en BaseTextBlockStyle. Si compila y ejecuta la aplicación ahora, verá que la apariencia de ambos bloques de texto ha cambiado (por ejemplo, el tamaño de fuente es ahora mayor).

Paso 4. Hacer que la interfaz de usuario se adapte a diferentes tamaños de ventana

Ahora vamos a hacer que la interfaz de usuario se adapte dinámicamente a un tamaño de ventana cambiante y para que se vea bien en los dispositivos con pantallas pequeñas. Para ello, agregará una sección VisualStateManager a MainPage.xaml. Definirá diferentes estados visuales para diferentes tamaños de ventana y, a continuación, establecerá las propiedades que se aplicarán para cada uno de esos estados visuales.

Ajustar el diseño de la interfaz de usuario

Agregue este bloque de XAML como primer elemento secundario del elemento StackPanel raíz.

<StackPanel ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="wideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="641" />
                </VisualState.StateTriggers>
            </VisualState>
            <VisualState x:Name="narrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="contentPanel.Margin" Value="20,30,0,0"/>
                    <Setter Target="inputPanel.Orientation" Value="Vertical"/>
                    <Setter Target="inputButton.Margin" Value="0,4,0,0"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    ...
</StackPanel>

Compile y ejecute la aplicación. Nota que la interfaz de usuario tiene el mismo aspecto que antes hasta que la ventana es redimensionada a menos de 641 DIPs (píxeles independientes del dispositivo). En ese momento, se aplica el estado visual narrowState y, junto con él, todas las definiciones de propiedades establecidas para ese estado.

El VisualState denominado wideState tiene un AdaptiveTrigger con su propiedad MinWindowWidth establecida en 641. Esto significa que el estado se va a aplicar solo cuando el ancho de la ventana no es menor que el mínimo de 641 DIP. No defines ningún objeto Setter para este estado, por lo cual utiliza las propiedades de diseño que definiste en el XAML para el contenido de la página.

La segunda VisualState, narrowState, tiene un AdaptiveTrigger con su propiedad MinWindowWidth establecida en 0. Este estado se aplica cuando el ancho de la ventana es mayor que 0, pero menor que 641 DIP. En exactamente 641 DIPs, wideState está vigente. En narrowState, defines los objetos Setter para modificar las propiedades de diseño de los controles en la interfaz de usuario.

• Se reduce el margen izquierdo del elemento contentPanel del al, de 120 a 20.
• Cambia la orientación de del elemento inputPanel de horizontal a vertical .
• Añade un margen superior de 4 DIPs al elemento inputButton.

Resumen

En este tutorial se muestra cómo agregar contenido a una aplicación universal de Windows, cómo agregar interactividad y cómo cambiar la apariencia de la interfaz de usuario.