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

Artículo
04/03/2023

Este tema es un caso práctico de tomar la aplicación de ejemplo Editor de fotos para UWP de C++/WinRT y migrarla a la SDK de Aplicaciones para Windows.

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

Importante

Para conocer consideraciones y estrategias para acercarse al 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 comprobar las limitaciones y los problemas conocidos en esas notas de la versión, ya que podrían afectar a los resultados de seguir con este caso práctico o ejecutar la aplicación migrada.

Creación de un nuevo 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, desactive Colocar solución y 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 migraremos el código

MainPage es una parte importante y destacada de la aplicación. Pero si empezamos migrando eso, pronto nos diremos cuenta de que MainPage tiene una dependencia en la vista DetailPage ; y, a continuación, detailPage tiene una dependencia en el 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 (ya que necesita algunos miembros que lo agreguen a detailPage y MainPage dependerán).
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 se va a copiar a través de archivos de código fuente mediante Explorador de archivos. Si prefiere copiar el contenido del archivo, vea el Apéndice: copiar el contenido de los archivos del modelo photo al final de este tema para obtener un ejemplo de cómo podría 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 Explorador de archivos, busque la carpeta Windows-appsample-photo-editor>PhotoEditor>Assets. 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 esPhotoEditor PhotoEditor>>Assets. Pegue en esa carpeta los archivos de recursos que acaba de copiar y acepte el mensaje para reemplazar los siete archivos que ya existen en el destino.
En el proyecto de destino de Visual Studio, en Explorador de soluciones, expanda la carpeta Activos. Agregue a esa carpeta el archivo de recurso existente bg1.png que acaba de pegar. Puede mantener el puntero del mouse sobre los archivos de recursos. Aparecerá una vista previa en miniatura para cada una, lo que confirma que ha reemplazado o agregado correctamente los archivos de recursos.

Migración del modelo de fotos

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

Copiar archivos de código fuente de foto

En el clon del proyecto de origen, en Explorador de archivos, busque la carpeta Windows-appsample-photo-editor>PhotoEditor. En esa carpeta, encontrará los tres archivos Photo.idlde código fuente , Photo.hy Photo.cpp; 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 Explorador de archivos. Pegue en esa carpeta los tres archivos que acaba de copiar.
De nuevo en Explorador de soluciones, con el nodo de proyecto de destino 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 haga clic en Incluir en el proyecto. Desactive Mostrar todos los archivos desactivados.
En el proyecto de origen, en 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 tendrá que 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>
```
Repita esto para Photo.cppy 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 la foto

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

Nota

En el tema Asignación de API para UWP al SDK de Aplicaciones para Windows se 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 #include "Photo.h"de . 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 o reemplazo (coincidencia mayúscula y minúscula 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 en el proyecto de pch.h origen, copie las siguientes inclusión y péguelas 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 compilar la solución de destino (pero aún no se ejecuta).

Migración de la clase App

No es necesario realizar ningún cambio en el proyecto de App.idl destino y App.xaml. 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 crear después de cada sección (con la excepción de la última sección, que es sobre 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 ventana de miembro de datos privado. Más adelante en el proceso de migración (cuando se migra el uso del proyecto de origen de Window.Current), será conveniente si ese miembro de datos de ventana es estático; y también se pone a disposición 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 la ventana sea estática, es necesario inicializarla en App.xaml.cpp en lugar del inicializador de miembro predeterminado que el código está usando actualmente. Estos son los cambios que se parecen 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 SDK de Aplicaciones para Windows aplicaciones que necesitan navegación (y las que no lo hacen), consulta ¿Necesito implementar la navegación por páginas?.

Por lo tanto, los miembros migraremos en las secciones siguientes 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 correcta 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 es necesario 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 lista siguiente. Ten en cuenta que usa window (en lugar de , como hace la versión de Window::Current()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 podremos compilar desde este punto hasta que hayamos 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 están alternados, establecidos y encadenados 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).

Hacer referencia al paquete NuGet win2D

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

En la solución de destino de Visual Studio, haga clic en Herramientas> Administrador > depaquetes NuGet Administrar paquetes NuGet para la solución...>Examinar. Asegúrese de que incluir versión preliminar está desactivada y escriba o pegue Microsoft.Graphics.Win2D en el cuadro de búsqueda. Seleccione el elemento correcto en los resultados de la búsqueda, compruebe el proyecto 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 Explorador de archivos, busque la carpeta Windows-appsample-photo-editor>PhotoEditor. En esa carpeta encontrará los cuatro archivos DetailPage.idlde código fuente , DetailPage.xaml, DetailPage.hy DetailPage.cpp; esos archivos juntos implementan 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 Explorador de archivos. Pegue en esa carpeta los cuatro archivos que acaba de copiar.
Todavía en 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 Explorador de soluciones, con el nodo de proyecto de destino 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 ha cambiado el nombre) y haga clic en Incluir en el proyecto. Desactive Mostrar todos los archivos desactivados.
En el proyecto de origen, en 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 tendrá que 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.Xamly cámbiela a Microsoft.UI.Xaml.
En DetailPage.xaml.cpp, cambie #include "DetailPage.h" por #include "DetailPage.xaml.h".
Inmediatamente debajo de eso, agregue #include "DetailPage.g.cpp".
Para la llamada al método estático App::Window (que estamos a punto de agregar) para compilar, todavía en DetailPage.xaml.cpp, agregue #include "App.xaml.h" inmediatamente antes de #include "Photo.h".
Realice las siguientes buscar o reemplazos (coincidir mayúsculas y minúsculas y palabras completas) 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 en el proyecto de pch.h origen, copie las siguientes inclusión y péguelas 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 #pragma oncede , 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, pero después de migrar MainPage (que es el siguiente).

Migración de la vista MainPage

La página principal de la 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, copie ahora sobre MainPage.idl, MainPage.xaml, MainPage.hy MainPage.cpp.
Cambie el nombre de los .h archivos 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 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.Xamly cambie ambas apariciones a Microsoft.UI.Xaml.
En MainPage.xaml.cpp, cambie #include "MainPage.h" por #include "MainPage.xaml.h".
Inmediatamente debajo de eso, agregue #include "MainPage.g.cpp".
Para la llamada al método estático App::Window (que estamos a punto de agregar) para compilar, todavía en MainPage.xaml.cpp, agregue #include "App.xaml.h" inmediatamente antes de #include "Photo.h".

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

Por lo tanto, todavía en , en MainPage.xaml.cppel 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 buscar o reemplazos (coincidir mayúsculas y minúsculas y palabras completas) 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 en el proyecto de pch.h origen, copie las siguientes inclusión y péguelas 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 aún no se ejecuta).

Actualizar 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;, dejando 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 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 de fotos 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 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 bombean (no devuelve inmediatamente y realizan todo su trabajo asincrónico) y eso provoca reentrada. El resultado es que GridView ha cambiado su colección Items mientras se está llevando a cabo el diseño 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 StorageFile.GetThumbnailAsync sea explícitamente asincrónica esperando 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 debemos 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 con la plantilla de proyecto de VSIX para 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 Explorador de soluciones, haga clic con el botón derecho en el nodo del proyecto y 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. Haga clic con el botón derecho en el nodo del proyecto y haga clic en Volver a cargar proyecto. Ahora vuelva a generar el proyecto.

Prueba de la aplicación migrada

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

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

Como se ha explicado anteriormente, tiene la opción de copiar los propios archivos de código fuente o el contenido de los archivos de código fuente. Ya hemos mostrado cómo copiar archivos de código fuente por 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.hy 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éguelos en el Photo.idl archivo que acaba de agregar al proyecto de destino. En el código pegado, busque Windows.UI.Xamly cámbiela 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 ejecutará hasta su finalización en este momento, pero se pondrá lo suficientemente lejos como para realizar 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 abrirá la carpeta del proyecto de destino en Explorador de archivos. Allí, vaya a la Generated Files\sources carpeta (por lo que estará en \PhotoEditor\PhotoEditor\PhotoEditor\Generated Files\sources). Copie los archivos Photo.h de código auxiliar 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 Explorador de soluciones, con el nodo de proyecto de destino seleccionado, asegúrese de que mostrar todos los archivos está activado. Haga clic con el botón derecho en los archivos de código auxiliar que acaba de pegar (Photo.h y ) y .cpphaga clic en Incluir en el proyecto. Desactive Mostrar todos los archivos desactivados.

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

Confirme que puede compilar de nuevo (pero aún no se ejecuta).

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 Migrar código fuente de foto.

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 nuevo proyecto

El orden en el que migraremos el código

Vamos a copiar archivos de código fuente completos

Copia de archivos de recursos

Migración del modelo de fotos

Copiar archivos de código fuente de foto

Migración del código fuente de la foto

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

Hacer 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

Actualizar 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)

Prueba de la aplicación migrada

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

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

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

Comentarios

Recursos adicionales

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 nuevo proyecto

El orden en el que migraremos el código

Vamos a copiar archivos de código fuente completos

Copia de archivos de recursos

Migración del modelo de fotos

Copiar archivos de código fuente de foto

Migración del código fuente de la foto

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

Hacer 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

Actualizar 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)

Prueba de la aplicación migrada

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

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

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

Temas relacionados

Comentarios

Recursos adicionales