Ejemplo básico de biblioteca de interfaz de usuario de Windows 2 para C++/WinRT (UWP)

  • Artículo

Este tema le ayudará durante el proceso de adición de compatibilidad básica para la biblioteca de la interfaz de usuario de Windows (WinUI) a su proyecto UWP en C++/WinRT. En concreto, este tema trata sobre WinUI 2, que es para aplicaciones para UWP. En el caso de las aplicaciones de escritorio, está disponible WinUI 3. A propósito, WinUI está escrita en C++/WinRT.

Importante

En el caso de las aplicaciones de escritorio, el SDK de Aplicaciones para Windows proporciona la biblioteca de interfaz de usuario de Windows (WinUI) 3. WinUI 3 no está diseñada para funcionar con el tutorial de este tema, que es para UWP. Consulte también Migración de UWP al SDK de Aplicaciones para Windows.

Nota

El kit de herramientas de la biblioteca de interfaz de usuario de Windows (WinUI) está disponible como paquetes NuGet que puedes agregar a cualquier proyecto nuevo o existente mediante Visual Studio, como veremos en este tema. Para más información sobre el contexto, la configuración y la compatibilidad, consulta Getting started with the Windows UI Library (Introducción a la biblioteca de interfaz de usuario de Windows).

Creación de una aplicación en blanco (HelloWinUICppWinRT)

En Visual Studio, cree un nuevo proyecto UWP con la plantilla de proyecto Aplicación en blanco (C++/WinRT). Asegúrate de que usas la plantilla de (C++/WinRT) , y no la de (Windows universal) .

Establece el nombre del nuevo proyecto en HelloWinUICppWinRT y, para que la estructura de carpetas coincida con el tutorial, desactiva Colocar la solución y el proyecto en el mismo directorio.

Instala el paquete NuGet Microsoft.UI.Xaml

Haga clic en Proyecto>Administrar paquetes NuGet...>Examinar, escriba o pegue Microsoft.UI.Xaml en el cuadro de búsqueda, seleccione el elemento en los resultados de búsqueda y luego haga clic en Instalar para instalar el paquete en su proyecto (también verá un mensaje de acuerdo de licencia). Ten cuidado de instalar solo el paquete Microsoft.UI.Xaml y no Microsoft.UI.Xaml.Core.Direct.

Declarar recursos de la aplicación de WinUI

Abre App.xaml y pega el marcado siguiente entre las etiquetas de apertura y cierre existentes de Application.

<Application.Resources>
    <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
</Application.Resources>

Agregar un control de WinUI a MainPage

A continuación, abre MainPage.xaml. En la etiqueta de apertura existente de Página hay algunas declaraciones de espacio de nombres XML. Agrega la declaración de espacio de nombres XML xmlns:muxc="using:Microsoft.UI.Xaml.Controls". Luego, pega el marcado siguiente entre las etiquetas de apertura y cierre existentes de Page, sobrescribiendo el elemento StackPanel existente.

<muxc:NavigationView PaneTitle="Welcome">
    <TextBlock Text="Hello, World!" VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource TitleTextBlockStyle}"/>
</muxc:NavigationView>

Editar el archivo pch.h, según sea necesario

Al agregar un paquete NuGet a un proyecto de C++/WinRT (como el paquete Microsoft.UI.Xaml que agregaste antes) y compilar el proyecto, las herramientas generan un conjunto de encabezados de proyección en la carpeta \Generated Files\winrt del proyecto. Si has seguido el tutorial, ahora tendrás una carpeta \HelloWinUICppWinRT\HelloWinUICppWinRT\Generated Files\winrt. Para incorporar esos archivos de encabezados al proyecto, de modo que se resuelvan las referencias a esos nuevos tipos, puede dirigirse al archivo de encabezado precompilado (por lo general, pch.h) e incluirlos.

Solo tiene que incluir los encabezados que corresponden a los tipos que usa. A continuación se muestra un ejemplo que incluye todos los archivos de encabezado generados para el paquete Microsoft.UI.Xaml.

// pch.h
...
#include "winrt/Microsoft.UI.Xaml.Automation.Peers.h"
#include "winrt/Microsoft.UI.Xaml.Controls.h"
#include "winrt/Microsoft.UI.Xaml.Controls.Primitives.h"
#include "winrt/Microsoft.UI.Xaml.Media.h"
#include "winrt/Microsoft.UI.Xaml.XamlTypeInfo.h"
...

Editar MainPage.cpp

En MainPage.cpp, elimina el código dentro de la implementación de MainPage::ClickHandler, ya que myButton ya no está en el marcado XAML.

Ahora puedes compilar y ejecutar el proyecto.

Simple C++/WinRT Windows UI Library screenshot