Migración del SDK de Aplicaciones para Windows de la aplicación de muestra Photo Editor de UWP (C++/WinRT)

Artículo
05/31/2024

Este tema es un caso práctico en el que se toma la aplicación de ejemplo de Editor de fotos para UWP en C++/WinRT y se migra al SDK de Aplicaciones para Windows.

Comience por clonar el repositorio de la aplicación de ejemplo de UWP y abrir la solución en Visual Studio.

Importante

Para conocer consideraciones y estrategias para abordar el proceso de migración y cómo configurar el entorno de desarrollo para la migración, consulte Estrategia general de migración.

Instalación de herramientas para el SDK de Aplicaciones para Windows

Para configurar el equipo de desarrollo, consulte Instalación de herramientas para el SDK de Aplicaciones para Windows.

Importante

Encontrará temas de notas de la versión junto con el tema Canales de versión del SDK de Aplicaciones para Windows. Hay notas de la versión para cada canal. Asegúrese de consultar las limitaciones y los problemas conocidos en esas notas de la versión, ya que pueden afectar los resultados que se devuelven al seguir este caso práctico o a la ejecución de la aplicación migrada.

Creación de un proyecto

En Visual Studio, cree un nuevo proyecto de C++/WinRT a partir de la plantilla de proyecto Aplicación vacía empaquetada (WinUI 3 en escritorio). Asigne al proyecto el nombre PhotoEditor, desmarque Colocar la solución y el proyecto en el mismo directorio. Puede tener como destino la versión más reciente (no en versión preliminar) del sistema operativo cliente.

Nota:

Nos referiremos a la versión de UWP del proyecto de ejemplo (la que ha clonado desde su repositorio) como solución o proyecto de origen. Nos referiremos a la versión de SDK de Aplicaciones para Windows como solución o proyecto de destino.

El orden en el que se migrará el código.

MainPage es una parte importante y destacada de la aplicación. Pero si empezáramos por la migración, pronto nos daríamos cuenta de que MainPage tiene una dependencia de la vista DetailPage; y luego que DetailPage tiene una dependencia del modelo Photo. Por lo tanto, para este tutorial tomaremos este enfoque.

Comenzaremos copiando los archivos de recursos.
A continuación, migraremos el modelo Photo.
A continuación, migraremos la clase App (porque necesita que se le agreguen algunos miembros de los que dependerán DetailPage y MainPage).
A continuación, empezaremos a migrar las vistas, empezando por DetailPage primero.
Y terminaremos migrando la vista MainPage.

Vamos a copiar archivos de código fuente completos.

En este tutorial copiaremos archivos de código fuente mediante el Explorador de archivos. Si prefiere copiar el contenido del archivo, consulte la sección Apéndice: copiar el contenido de los archivos del modelo Photo que hay al final de este tema para ver un ejemplo de cómo puede hacerlo para Photo (y luego podría aplicar un procedimiento similar a otros tipos del proyecto). Sin embargo, esa opción implica mucho más pasos.

Copia de archivos de recursos

En el clon del proyecto de origen, en el Explorador de archivos, busque la carpeta Windows-appsample-photo-editor>PhotoEditor>Recursos. Encontrará ocho archivos de recursos en esa carpeta. Seleccione esos ocho archivos y cópielos en el Portapapeles.
También en Explorador de archivos, busque ahora la carpeta correspondiente en el proyecto de destino que creó. La ruta de acceso a esa carpeta es PhotoEditor>PhotoEditor>Recursos. Pegue en esa carpeta los archivos de recursos que acaba de copiar y acepte la solicitud para reemplazar los siete archivos que ya existen en el destino.
En el proyecto de destino de Visual Studio, en el Explorador de soluciones, expanda la carpeta Recursos. Agregue a esa carpeta el archivo de recursos existente bg1.png que acaba de pegar. Puede mantener el puntero del mouse sobre los archivos de recursos. Aparecerá una vista previa de miniaturas para cada una, confirmando que ha reemplazado o agregado correctamente los archivos de recursos.

Migración del modelo Photo

Photo es una clase en tiempo de ejecución que representa una foto. Es un modelo (en el sentido de modelos, vistas y modelos de vista).

Copia de los archivos de código fuente de Photo

En el clon del proyecto de origen, en el Explorador de archivos, busque la carpeta Windows-appsample-photo-editor>PhotoEditor. En esa carpeta encontrará los tres archivos de código fuente Photo.idl, Photo.hy Photo.cpp, y esos archivos juntos implementan la clase en tiempo de ejecución Photo. Seleccione esos tres archivos y cópielos en el Portapapeles.
En Visual Studio, haga clic con el botón derecho en el nodo del proyecto de destino y haga clic en Abrir carpeta en Explorador de archivos. Se abre la carpeta del proyecto de destino en el Explorador de archivos. Pegue en esa carpeta los tres archivos que acaba de copiar.
De nuevo en el Explorador de soluciones, con el nodo de proyecto seleccionado, asegúrese de que Mostrar todos los archivos esté activado. Haga clic con el botón derecho en los tres archivos que acaba de pegar y, luego, haga clic en Incluir en el proyecto. Desactive Mostrar todos los archivos.
En el proyecto de origen, en el Explorador de soluciones, Photo.h y .cpp están anidados en Photo.idl para indicar que se generan a partir de él (dependientes). Si le gusta esa disposición, puede hacer lo mismo en el proyecto de destino editando \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj manualmente (primero deberá guardar todo en Visual Studio). Busque lo siguiente:
```
<ClInclude Include="Photo.h" />
```
Y reemplácelo por esto:
```
<ClInclude Include="Photo.h">
  <DependentUpon>Photo.idl</DependentUpon>
</ClInclude>
```
Repítalo para Photo.cpp y guarde y cierre el archivo del proyecto. Al volver a establecer el foco en Visual Studio, haga clic en Volver a cargar.

Migración del código fuente de Photo

En Photo.idl, busque el nombre del espacio de nombres Windows.UI.Xaml (que es el espacio de nombres para XAML de UWP) y cámbielo a Microsoft.UI.Xaml (que es el espacio de nombres para XAML de WinUI).

Nota:

El tema Asignación de API para UWP al SDK de Aplicaciones para Windows proporciona una asignación de las API de UWP a sus equivalentes de SDK de Aplicaciones para Windows. El cambio realizado anteriormente es un ejemplo de un cambio de nombre de espacio de nombres necesario durante el proceso de migración.

En Photo.cpp, agregue #include "Photo.g.cpp" a las directivas include existentes, inmediatamente después de #include "Photo.h". Se trata de una de las diferencias de nombre de archivo y carpeta (C++/WinRT) para tener en cuenta entre proyectos de UWP y SDK de Aplicaciones para Windows.
Realice la siguiente búsqueda/reemplazo (coincidir con mayúsculas y minúsculas y palabra completa) en el contenido de todo el código fuente de los archivos que acaba de copiar y pegar.
- Windows::UI::Xaml =>Microsoft::UI::Xaml
Desde pch.h en el proyecto de origen, copie lo siguiente incluye y péguelo en pch.h, en el proyecto de destino. Se trata de un subconjunto de los archivos de encabezado incluidos en el proyecto de origen; estos son solo los encabezados que necesitamos para admitir el código que hemos migrado hasta ahora.
```
#include <winrt/Microsoft.UI.Xaml.Media.Imaging.h>
#include <winrt/Windows.Storage.h>
#include <winrt/Windows.Storage.FileProperties.h>
#include <winrt/Windows.Storage.Streams.h>
```
Ahora confirme que puede construir la solución de destino (pero no la ejecute todavía).

Migración de la clase App

No es necesario realizar ningún cambio en App.idl y App.xaml del proyecto. Pero es necesario editar App.xaml.h y App.xaml.cpp para agregar algunos miembros nuevos a la clase App. Lo haremos de una manera que nos permita compilar después de cada sección (con la excepción de la última sección, que se trata de App::OnLaunched).

Hacer que el objeto de ventana principal esté disponible

En este paso, realizaremos el cambio que se explica en Cambio de Windows.UI.Xaml.Window.Current a App.Window.

En el proyecto de destino, App almacena el objeto de ventana principal en su window de miembro de datos privados. Más adelante en el proceso de migración (cuando migramos el uso de Window.Current del proyecto de origen), nos resultará cómodo si ese miembro de datos window es estático y también está disponible a través de una función de descriptor de acceso. Por lo tanto, realizaremos esos cambios a continuación.

Dado que estamos haciendo que window sea estático, es necesario inicializarlo en App.xaml.cpp en su lugar mediante el inicializador de miembro predeterminado que el código está usando actualmente. Este es el aspecto que tienen los cambios en App.xaml.h y App.xaml.cpp.

// App.xaml.h
...
struct App : AppT<App>
{
     ...
     static winrt::Microsoft::UI::Xaml::Window Window(){ return window; };

private:
     static winrt::Microsoft::UI::Xaml::Window window;
};
...

// App.xaml.cpp
...
winrt::Microsoft::UI::Xaml::Window App::window{ nullptr };
...

App::OnNavigationFailed

La aplicación de ejemplo Photo Editor usa la lógica de navegación para navegar entre MainPage y DetailPage. Para obtener más información sobre las aplicaciones del SDK de Aplicaciones para Windows que necesitan navegación (y las que no), consulte ¿Necesito implementar la navegación de páginas?.

Por lo tanto, los miembros que migraremos en las secciones siguientes existen para admitir la navegación dentro de la aplicación.

Comencemos migrando el controlador de eventos OnNavigationFailed. Copie la declaración y la definición de esa función miembro del proyecto de origen y péguela en el proyecto de destino (en App.xaml.h y App.xaml.cpp).
En el código pegado en App.xaml.h, cambie Windows::UI::Xaml a Microsoft::UI::Xaml.

App::CreateRootFrame

El proyecto de origen contiene una función auxiliar denominada App::CreateRootFrame. Copie la declaración y la definición de esa función auxiliar del proyecto de origen y péguela en el proyecto de destino (en App.xaml.h y App.xaml.cpp).
En el código pegado en App.xaml.h, cambie Windows::UI::Xaml a Microsoft::UI::Xaml.
En el código pegado en App.xaml.cpp, cambie las dos apariciones de Window::Current() a window (que es el nombre del miembro de datos de la clase App que vimos anteriormente).

App::OnLaunched

El proyecto de destino ya contiene una implementación del controlador de eventos OnLaunched. Su parámetro es una referencia constante a Microsoft::UI::Xaml::LaunchActivatedEventArgs, que es correcto para el SDK de Aplicaciones para Windows (contrasta con el proyecto de origen, que usa Windows::ApplicationModel::Activation::LaunchActivatedEventArgs, que es correcto para UWP).

Solo tenemos que combinar las dos definiciones (origen y destino) de OnLaunched para que App::OnLaunched en App.xaml.cpp en el proyecto de destino sea similar a la siguiente lista. Ten en cuenta que usa window (en lugar de Window::Current(), como hace la versión de UWP).

void App::OnLaunched(LaunchActivatedEventArgs const&)
{
     window = make<MainWindow>();

     Frame rootFrame = CreateRootFrame();
     if (!rootFrame.Content())
     {
         rootFrame.Navigate(xaml_typename<PhotoEditor::MainPage>());
     }

     window.Activate();
}

El código anterior proporciona a App una dependencia en MainPage, por lo que no se podrá compilar desde este punto hasta que se haya migrado DetailPage y, a continuación, MainPage. Cuando podamos volver a compilar, lo diremos.

Migración de la vista DetailPage

DetailPage es la clase que representa la página del editor de fotos, donde los efectos Win2D se alternan, establecen y encadenan juntos. Para acceder a la página del editor de fotos, seleccione una miniatura de foto en MainPage. DetailPage es una vista (en el sentido de modelos, vistas y modelos de vista).

Referencia al paquete NuGet Win2D

Para admitir código en DetailPage, el proyecto de origen tiene una dependencia de Microsoft.Graphics.Win2D. Por lo tanto, también necesitaremos una dependencia de Win2D en nuestro proyecto de destino.

En la solución de destino, en Visual Studio, haga clic en Herramientas>Administrador de paquetes NuGet>Administrar paquetes NuGet para la solución...>Examinar. Asegúrese de que la opción Incluir versión preliminar no está activada y escriba o pegue Microsoft.Graphics.Win2D en el cuadro de búsqueda. Seleccione el elemento correcto en los resultados de búsqueda, compruebe el proyecto de PhotoEditor y haga clic en Instalar para instalar el paquete.

Copiar archivos de código fuente de DetailPage

En el clon del proyecto de origen, en el Explorador de archivos, busque la carpeta Windows-appsample-photo-editor>PhotoEditor. En esa carpeta encontrará los cuatro archivos de código fuente DetailPage.idl, DetailPage.xaml, DetailPage.h y DetailPage.cpp, y esos archivos implementan juntos la vista DetailPage. Seleccione esos cuatro archivos y cópielos en el Portapapeles.
En Visual Studio, haga clic con el botón derecho en el nodo del proyecto de destino y haga clic en Abrir carpeta en Explorador de archivos. Se abre la carpeta del proyecto de destino en el Explorador de archivos. Pegue en esa carpeta los cuatro archivos que acaba de copiar.
Si salir del Explorador de archivos, cambie los nombres de DetailPage.h y DetailPage.cpp a DetailPage.xaml.h y DetailPage.xaml.cpp, respectivamente. Se trata de una de las diferencias de nombre de archivo y carpeta (C++/WinRT) para tener en cuenta entre proyectos de UWP y SDK de Aplicaciones para Windows.
De nuevo en el Explorador de soluciones, con el nodo de proyecto seleccionado, asegúrese de que Mostrar todos los archivos esté activado. Haga clic con el botón derecho en los cuatro archivos que acaba de pegar (y cambiar de nombre) y haga clic en Incluir en el proyecto. Desactive Mostrar todos los archivos.
En el proyecto de origen, en el Explorador de soluciones, DetailPage.idl está anidado en DetailPage.xaml. Si le gusta esa disposición, puede hacer lo mismo en el proyecto de destino editando \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj manualmente (primero deberá guardar todo en Visual Studio). Busque lo siguiente:
```
<Midl Include="DetailPage.idl" />
```
Y reemplácelo por esto:
```
<Midl Include="DetailPage.idl">
  <DependentUpon>DetailPage.xaml</DependentUpon>
</Midl>
```

Guarda y cierra el archivo de proyecto. Al volver a establecer el foco en Visual Studio, haga clic en Volver a cargar.

Migración del código fuente de DetailPage

En DetailPage.idl, busque Windows.UI.Xaml y cámbielo a Microsoft.UI.Xaml.
En DetailPage.xaml.cpp, cambie #include "DetailPage.h" por #include "DetailPage.xaml.h".
Inmediatamente debajo, agregue #include "DetailPage.g.cpp".
Para la llamada al método estático App::Window (que estamos a punto de agregar) para compilar, sin salir de DetailPage.xaml.cpp, agregue #include "App.xaml.h" inmediatamente antes de #include "Photo.h".
Realice las siguientes búsquedas/reemplazos (coincidir con mayúsculas y minúsculas y palabra completa) en el contenido del código fuente de los archivos que acaba de copiar y pegar.
- En DetailPage.xaml.h y .xaml.cpp, Windows::UI::Composition =>Microsoft::UI::Composition
- En DetailPage.xaml.h y .xaml.cpp, Windows::UI::Xaml =>Microsoft::UI::Xaml
- En DetailPage.xaml.cpp, Window::Current() =>App::Window()

Desde pch.h en el proyecto de origen, copie lo siguiente incluye y péguelo en pch.h, en el proyecto de destino.

#include <winrt/Windows.Graphics.Effects.h>
#include <winrt/Microsoft.Graphics.Canvas.Effects.h>
#include <winrt/Microsoft.Graphics.Canvas.UI.Xaml.h>
#include <winrt/Microsoft.UI.Composition.h>
#include <winrt/Microsoft.UI.Xaml.Input.h>
#include <winrt/Windows.Graphics.Imaging.h>
#include <winrt/Windows.Storage.Pickers.h>

Además, en la parte superior de pch.h, inmediatamente después de #pragma once, agregue esto:

// This is required because we are using std::min and std::max, otherwise 
// we have a collision with min and max macros being defined elsewhere.
#define NOMINMAX

Todavía no se puede compilar, lo haremos después de migrar MainPage (que es el siguiente).

Migración de la vista MainPage

La página principal de cualquier aplicación representa la vista que ve primero al ejecutar la aplicación. Es la página que carga las fotos de la biblioteca de imágenes y muestra una vista en miniatura en mosaico.

Copiar archivos de código fuente de MainPage

De forma similar a lo que hizo con DetailPage, ahora copie MainPage.idl, MainPage.xaml, MainPage.h y MainPage.cpp.
Cambie el nombre de los archivos .h y .cpp a .xaml.h y .xaml.cpp, respectivamente.
Incluya los cuatro archivos del proyecto de destino como antes.
En el proyecto de origen, en el Explorador de soluciones, MainPage.idl está anidado en MainPage.xaml. Si le gusta esa disposición, puede hacer lo mismo en el proyecto de destino editando \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxprojmanualmente. Busque lo siguiente:
```
<Midl Include="MainPage.idl" />
```
Y reemplácela con:
```
<Midl Include="MainPage.idl">
  <DependentUpon>MainPage.xaml</DependentUpon>
</Midl>
```

Migración del código fuente de MainPage

En MainPage.idl, busque Windows.UI.Xaml y cambie ambas repeticiones a Microsoft.UI.Xaml.
En MainPage.xaml.cpp, cambie #include "MainPage.h" por #include "MainPage.xaml.h".
Inmediatamente debajo, agregue #include "MainPage.g.cpp".
Para la llamada al método estático App::Window (que estamos a punto de agregar) para compilar, sin salir de MainPage.xaml.cpp, agregue #include "App.xaml.h" inmediatamente antes de #include "Photo.h".

Para el siguiente paso, realizaremos el cambio que se explica en ContentDialog y Popup.

Por lo tanto, sin salir de MainPage.xaml.cpp, en el método MainPage::GetItemsAsync, inmediatamente después de la línea ContentDialog unsupportedFilesDialog{};, agregue esta línea de código.
```
unsupportedFilesDialog.XamlRoot(this->Content().XamlRoot());
```
Realice las siguientes búsquedas/reemplazos (coincidir con mayúsculas y minúsculas y palabra completa) en el contenido del código fuente de los archivos que acaba de copiar y pegar.
- En MainPage.xaml.h y .xaml.cpp, Windows::UI::Composition =>Microsoft::UI::Composition
- En MainPage.xaml.h y .xaml.cpp, Windows::UI::Xaml =>Microsoft::UI::Xaml
- En MainPage.xaml.cpp, Window::Current() =>App::Window()

Desde pch.h en el proyecto de origen, copie lo siguiente incluye y péguelo en pch.h, en el proyecto de destino.

#include <winrt/Microsoft.UI.Xaml.Hosting.h>
#include <winrt/Microsoft.UI.Xaml.Media.Animation.h>
#include <winrt/Windows.Storage.Search.h>

Confirme que puede compilar la solución de destino (pero no la ejecute aún).

Actualización de MainWindow

En MainWindow.xaml, elimine StackPanel y su contenido, ya que no necesitamos ninguna interfaz de usuario en MainWindow. Esto deja solo el elemento Window vacío.
En MainWindow.idl, elimine el marcador de posición Int32 MyProperty; y deje solo el constructor.
En MainWindow.xaml.h y MainWindow.xaml.cpp, elimine las declaraciones y definiciones del marcador de posición MyProperty y myButton_Click, dejando solo el constructor.

Cambios de migración necesarios para la diferencia del modelo de subprocesos

Los dos cambios de esta sección son necesarios debido a una diferencia de modelo de subprocesos entre UWP y el SDK de Aplicaciones para Windows, como se describe en el Modelo de subprocesos de ASTA a STA. Estas son breves descripciones de las causas de los problemas y, a continuación, una manera de resolver cada uno.

MainPage

MainPage carga archivos de imagen desde la carpeta Imágenes, llama a StorageItemContentProperties.GetImagePropertiesAsync para obtener las propiedades del archivo de imagen, crea un objeto de modelo Photo para cada archivo de imagen (guardando esas mismas propiedades en un miembro de datos) y agrega ese objeto Photo a una colección. La colección de objetos de Photo está enlazada a datos a GridView en la interfaz de usuario. En nombre de ese GridView, MainPage controla el evento ContainerContentChanging y, para la fase 1, ese controlador llama a una corrutina que llama a StorageFile.GetThumbnailAsync. Esta llamada a GetThumbnailAsync da como resultado que los mensajes se bombeen (no se devuelve inmediatamente y realizan todo su trabajo asincrónico) y eso provoca la reentrada. El resultado es que GridView tiene cambiada su colección Items mientras el diseño tiene lugar y que provoca un bloqueo.

Si comentamos la llamada a StorageItemContentProperties::GetImagePropertiesAsync, no obtenemos el bloqueo. Pero la corrección real es hacer que la llamada a StorageFile.GetThumbnailAsync sea explícitamente asincrónica, esperando de forma cooperativa a wil::resume_foreground inmediatamente antes de llamar a GetThumbnailAsync. Esto funciona porque wil::resume_foreground programa el código que sigue para que sea una tarea en DispatcherQueue.

Este es el código que se va a cambiar:

// MainPage.xaml.cpp
IAsyncAction MainPage::OnContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
{
    ...
    if (args.Phase() == 1)
    {
        ...
        try
        {
            co_await wil::resume_foreground(this->DispatcherQueue());
            auto thumbnail = co_await impleType->GetImageThumbnailAsync(this->DispatcherQueue());
            image.Source(thumbnail);
        }
        ...
    }
}

Foto

La propiedad Photo::ImageTitle está enlazada a datos a la interfaz de usuario, por lo que la interfaz de usuario llama a la función de descriptor de acceso para esa propiedad siempre que necesite su valor. Pero cuando intentamos acceder a ImageProperties.Title desde esa función de descriptor de acceso en el subproceso de la interfaz de usuario, obtenemos una infracción de acceso.

Por lo tanto, solo podemos acceder a ese título una vez, desde el constructor de Photo y almacenarlo en el miembro de datos m_imageName si no está vacío. A continuación, en la función de descriptor de acceso Photo::ImageTitle solo es necesario acceder al miembro de datos m_imageName.

Este es el código que se va a cambiar:

// Photo.h
...
Photo(Photo(Windows::Storage::FileProperties::ImageProperties const& props,
    ...
    ) : ...
{
    if (m_imageProperties.Title() != L"")
    {
        m_imageName = m_imageProperties.Title();
    }
}
...
hstring ImageTitle() const
{
    return m_imageName;
}
...

Estos son los últimos cambios que necesitamos realizar para migrar la aplicación de ejemplo Photo Editor. En la sección Probar la aplicación migrada, confirmaremos que hemos seguido correctamente los pasos.

Problemas conocidos

Problema de tipo de aplicación (afecta solo a la versión preliminar 3)

Si ha seguido este caso práctico mediante la plantilla de proyecto de VSIX para el SDK de Aplicaciones para Windows versión 1.0 Preview 3, deberá realizar una pequeña corrección en PhotoEditor.vcxproj. Aquí te mostramos cómo hacerlo.

En Visual Studio, en el Explorador de soluciones, haga clic con el botón derecho en el nodo del proyecto y, a continuación, haga clic en Descargar proyecto. Ahora PhotoEditor.vcxproj está abierto para su edición. Como primer elemento secundario de Project, agregue un elemento PropertyGroup de la siguiente manera:

<Project ... >
    <PropertyGroup>
        <EnableWin32Codegen>true</EnableWin32Codegen>
    </PropertyGroup>
    <Import ... />
...

Guarde y cierre PhotoEditor.vcxproj. Haz clic con el botón derecho en el nodo y haga clic en Volver a cargar el proyecto. Ahora vuelva a compilar el proyecto.

Probar la aplicación migrada

Ahora construya el proyecto, y ejecute la aplicación para probarla. Seleccione una imagen, establezca un nivel de zoom, elija efectos y configúrela.

Apéndice: copiar el contenido de los archivos del modelo de Photo

Como hemos explicado anteriormente, tiene la opción de copiar los archivos de código fuente en sí mismos o copiar el contenido de los archivos de código fuente. Ya hemos mostrado cómo copiar archivos de código fuente en sí mismos. Por lo tanto, en esta sección se proporciona un ejemplo de copia del contenido del archivo.

En el proyecto de origen de Visual Studio, busque la carpeta PhotoEditor (Windows Universal)>Models. Esa carpeta contiene los archivos Photo.idl, Photo.h y Photo.cpp, que juntos implementan la clase en tiempo de ejecución Photo.

Adición de IDL y generación de códigos auxiliares

En el proyecto de destino de Visual Studio, agregue un nuevo elemento Midl File (.idl) al proyecto. Asigne el nombre Photo.idl al nuevo elemento. Elimine el contenido predeterminado de Photo.idl.

En el proyecto de origen de Visual Studio, copie el contenido de Models>Photo.idl y péguelo en el archivo Photo.idl que acaba de agregar al proyecto de destino. En el código pegado, busque Windows.UI.Xaml y cámbielo a Microsoft.UI.Xaml.

Guarde el archivo.

Importante

Estamos a punto de realizar una compilación de la solución de destino. La compilación no se completará en este punto, pero llegará lo suficientemente lejos como para hacer el trabajo necesario para nosotros.

Ahora compile la solución de destino. Aunque no se complete, la compilación es necesaria ahora porque generará los archivos de código fuente (códigos auxiliares) que necesitamos para empezar a implementar el modelo Photo.

En Visual Studio, haga clic con el botón derecho en el nodo del proyecto de destino y haga clic en Abrir carpeta en Explorador de archivos. Se abre la carpeta del proyecto de destino en el Explorador de archivos. Ahí, vaya a la carpeta Generated Files\sources (por lo que estará en \PhotoEditor\PhotoEditor\PhotoEditor\Generated Files\sources). Copie los archivos de código auxiliar Photo.h y .cpp y péguelos en la carpeta del proyecto, que ahora está en dos niveles de carpeta en \PhotoEditor\PhotoEditor\PhotoEditor.

De nuevo en el Explorador de soluciones, con el nodo de proyecto seleccionado, asegúrese de que Mostrar todos los archivos esté activado. Haz clic con el botón derecho en los archivos de código auxiliar que acaba de pegar (Photo.h y .cpp) y haga clic en Incluir en el proyecto. Desactive Mostrar todos los archivos.

Verá static_assert en la parte superior del contenido de Photo.h y .cpp, que deberá eliminar.

Confirme que puede volver a compilar (pero no ejecute aún).

Migración del código a los códigos auxiliares

Copie el contenido de Photo.h y .cpp del proyecto de origen en el proyecto de destino.

Desde aquí, los pasos restantes para migrar el código que copió son los mismos que los que se proporcionan en la sección Migración de código fuente de Photo.

Compartir a través de

Migración del SDK de Aplicaciones para Windows de la aplicación de muestra Photo Editor de UWP (C++/WinRT)

Instalación de herramientas para el SDK de Aplicaciones para Windows

Creación de un proyecto

El orden en el que se migrará el código.

Vamos a copiar archivos de código fuente completos.

Copia de archivos de recursos

Migración del modelo Photo

Copia de los archivos de código fuente de Photo

Migración del código fuente de Photo

Migración de la clase App

Hacer que el objeto de ventana principal esté disponible

App::OnNavigationFailed

App::CreateRootFrame

App::OnLaunched

Migración de la vista DetailPage

Referencia al paquete NuGet Win2D

Copiar archivos de código fuente de DetailPage

Migración del código fuente de DetailPage

Migración de la vista MainPage

Copiar archivos de código fuente de MainPage

Migración del código fuente de MainPage

Actualización de MainWindow

Cambios de migración necesarios para la diferencia del modelo de subprocesos

MainPage

Foto

Problemas conocidos

Problema de tipo de aplicación (afecta solo a la versión preliminar 3)

Probar la aplicación migrada

Apéndice: copiar el contenido de los archivos del modelo de Photo

Adición de IDL y generación de códigos auxiliares

Migración del código a los códigos auxiliares

Recursos adicionales

Compartir a través de

Migración del SDK de Aplicaciones para Windows de la aplicación de muestra Photo Editor de UWP (C++/WinRT)

Instalación de herramientas para el SDK de Aplicaciones para Windows

Creación de un proyecto

El orden en el que se migrará el código.

Vamos a copiar archivos de código fuente completos.

Copia de archivos de recursos

Migración del modelo Photo

Copia de los archivos de código fuente de Photo

Migración del código fuente de Photo

Migración de la clase App

Hacer que el objeto de ventana principal esté disponible

App::OnNavigationFailed

App::CreateRootFrame

App::OnLaunched

Migración de la vista DetailPage

Referencia al paquete NuGet Win2D

Copiar archivos de código fuente de DetailPage

Migración del código fuente de DetailPage

Migración de la vista MainPage

Copiar archivos de código fuente de MainPage

Migración del código fuente de MainPage

Actualización de MainWindow

Cambios de migración necesarios para la diferencia del modelo de subprocesos

MainPage

Foto

Problemas conocidos

Problema de tipo de aplicación (afecta solo a la versión preliminar 3)

Probar la aplicación migrada

Apéndice: copiar el contenido de los archivos del modelo de Photo

Adición de IDL y generación de códigos auxiliares

Migración del código a los códigos auxiliares

Temas relacionados

Recursos adicionales