Photo Editor C++/WinRT sample application

The Photo Editor application is a Universal Windows Platform (UWP) sample that showcases development with the C++/WinRT language projection. The sample application allows you to retrieve photos from the Pictures library, and then edit the selected image with assorted photo effects. In the sample's source code, you'll see a number of common practices—such as data binding, and asynchronous actions and operations—performed using the C++/WinRT projection.

Features

Photo Editor primarily demonstrates:

• Use of Standard C++17 syntax and libraries with Windows Runtime (WinRT) APIs.
• Use of coroutines, including the use of co_await, co_return, IAsyncAction, and IAsyncOperation<TResult>.
• Creation and use of custom Windows Runtime class (runtime class) projected types and implementation types. For more info about these terms, see Consume APIs with C++/WinRT and Author APIs with C++/WinRT.
• Event handling, including the use of auto-revoking event tokens.
• Use of the external Win2D NuGet package, and Windows::UI::Composition, for image effects.
• XAML data binding, including the {x:Bind} markup extension.
• XAML styling and UI customization, including connected animations.

Prerequisites

This sample requires:

• Visual Studio 2017 and the latest version of the Windows 10 SDK (10.0.17134.0). You can use the free Visual Studio Community Edition to build and run Windows Universal Platform (UWP) apps.
• Download and install the C++/WinRT Visual Studio Extension.
• You'll need to have a collection of images available in your local Pictures folder. If there are no images or photos available at that location, the app will not show anything but the background when you run it.

To get the latest updates to Windows and the development tools, and to help shape their development, join the Windows Insider Program.

Running the sample

The default project is PhotoEditor and you can Start Debugging (F5) or Start Without Debugging (Ctrl+F5) to try it out, just make sure to set the platform target appropriately. The app will run in the emulator or on physical devices.

Code at a glance

If you're just interested in code snippets for certain areas, and don't want to browse or run the full sample, check out the following files.

A custom runtime class that represents a photo.

• Photo.idl
  • Photo.h
  • Photo.cpp

The first page that loads the photos from the Pictures Library and displays a tiled thumbnail view.

• MainPage.xaml
  • MainPage.idl
  • MainPage.h
  • MainPage.cpp

Tapping a photo from the MainPage thumbnail view will take you to the photo editor page, where Win2D effects are toggled, set, and chained together.

• DetailPage.xaml
  • DetailPage.idl
  • DetailPage.h
  • DetailPage.cpp

Related C++/WinRT documentation and blogs.

• C++/WinRT UWP conceptual documentation
• C++/WinRT base.h reference documentation
• ModernCpp blog

Related XAML documentation and code samples.

• Controls and patterns for UWP apps
• Layout for UWP apps
• Data binding in depth
• UWP style guide
• Visual layer
• ListView and GridView data virtualization
• Data virtualization sample

External libraries used in this sample

• Win2D