microsoft / windows-appsample-photo-editor

Photo Editor is a UWP photo viewing and editing sample that highlights development with C++/WinRT.

page_type	languages	products	statusNotificationTargets
sample	cppwinrt cpp	windows windows-uwp	[email protected]

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.

Note - This sample is targeted and tested for Windows 10, version 2004 (10.0; Build 19041), and Visual Studio 2019. If you prefer, you can use project properties to retarget the project(s) to Windows 10, version 1903 (10.0; Build 18362).

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.

Universal Windows Platform development

Prerequisites

• Windows 10. Minimum: Windows 10, version 1809 (10.0; Build 17763), also known as the Windows 10 October 2018 Update.
• Windows 10 SDK. Minimum: Windows SDK version 10.0.17763.0 (Windows 10, version 1809).
• Visual Studio 2019 (or Visual Studio 2017). You can use the free Visual Studio Community Edition to build and run Windows Universal Platform (UWP) apps.
• 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.

You can optionally install the C++/WinRT Visual Studio Extension (VSIX). When you open the project, it will install the Microsoft.Windows.CppWinRT NuGet package.

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

Changing the project's target platform version

If you build the project on a given target platform version (TargetPlatformVersion in the project file), and then you retarget and rebuild, you may see this error message in Visual Studio: "error MIDL2003: [msg]redefinition [context]: ". If you do, then here are some options to resolve the issue.

• Sometimes, the resolution is as simple as deleting the file \Windows-appsample-photo-editor\PhotoEditor\<CONFIGURATION>\XamlMetaDataProvider.idl, and rebuilding.
• If that doesn't clear the issue, then you can try deleting all temporary/generated folders and files, and rebuilding.
• If you haven't made changes, then you can alternatively re-clone the repo, re-target, and build.

windows-appsample-photo-editor's Issues

winrt::from_abi was declared deprecated on version 10.0.17763.0 (Windows 10, version 1809) and above

Issue

Error C4996 'winrt::from_abi': was declared deprecated.

Cause

As of version 10.0.17763.0 (Windows 10, version 1809) of the Windows SDK, winrt::from_abi is obsolete. Use winrt::get_self instead.

Solution

Just simply replace all from_abi with get_self.

Reference

• https://docs.microsoft.com/en-us/uwp/cpp-ref-for-winrt/from-abi
• https://docs.microsoft.com/en-us/windows/uwp/cpp-and-winrt-apis/author-apis#instantiating-and-returning-implementation-types-and-interfaces

This repo is missing important files

There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.

Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.

Merge this pull request

GetImageThumbnailAsync null reference exception

GetTumbnailAsync sometimes returns NULL, which your code does not account for. Do this instead:

    IAsyncOperation<BitmapImage> Photo::GetImageThumbnailAsync() const
    {
        auto thumbnail = co_await m_imageFile.GetThumbnailAsync(FileProperties::ThumbnailMode::PicturesView);
        BitmapImage bitmapImage{};

		// fix for when thumbnail is NULL
		if (NULL != thumbnail)
		{
			bitmapImage.SetSource(thumbnail);
			thumbnail.Close();
		}

        co_return bitmapImage;
    }

Broken documentation links

The documentation as accessible from https://docs.microsoft.com/en-us/samples/microsoft/windows-appsample-photo-editor/photo-editor-cwinrt-sample-application/ has all its links broken, displaying 404 Github error messages.

Broken Link

Broken Links

All links in the "Code At A Glance" section in the document are broken. However, the links in the "Code At A Glance" section in the README.md file on GitHub are working.

Conclusion and Recommendations

The links in the "Code At A Glance" section in Microsoft Docs can be corrected by referencing the README.md file on GitHub.

compile problem

compile this project is too slow.
although is had generated a pch file of 1.88G.
I use VS 15.9.3 and my windows version is 10.0.18277.

Use winrt::single_threaded_observable_vector(std::vector<IInspectable>) instead of winrt::make<observable_vector<IInspectable>>()

In the MainPage.cpp file in the MainPage constructor the code initializes m_photos using winrt::make<observable_vector>(). This could instead be winrt::single_threaded_observable_vector(std::vector). Would doing so eliminate the need to define an implementation of observable_vector in the app? Would it be possible to eliminate ObservableVector.h entirely?

Also, why is the item type IInspectable rather than Photo? Is it because XAML doesn't understand the type Photo? Could you add the [Windows.UI.Xaml.Data.Bindable] attribute to the Photo.idl to force the XamlCompiler to emit type information about Photo for usage in XAML?

Win2D version conflict?

I get:
PhotoEditor.vcxproj(175,5): error : This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them. For more information, see http://go.microsoft.com/fwlink/?LinkID=322105. The missing file is ..\packages\Win2D.uwp.1.21.0\build\native\Win2D.uwp.targets.

So I cloned Win2D and built it successfully according to the Win2D instructions. I still get the message above. My Win2D version is currently 1.23.0.

If it is a version conflict, what is the proper way to solve it?

thanks

Compile error

I am getting this error using VS 2017 15.8.4

Severity Code Description Project File Line Suppression State
Error C3861 'from_abi': identifier not found PhotoEditor c:\program files (x86)\windows kits\10\include\10.0.17134.0\cppwinrt\winrt\base.h 2185

I have the C++/WinRT Visual Studio extension( version 1.0.180724.3) installed and base.h is located in the proper location on my hard drive.

A fine sample

However PhotoEditor does not exercise DependencyProperty. Please port Petzold's XamlCruncher sample. I get initialization issues and wonder about the code generated by the Xaml compiler.

A change in .idl does not show in its corresponding .h .cpp

Hi,

I have Visual Studio Community 2017 Preview(2) with the cppwinrt extension and I am able to run the PhotoEditor without a problem, but according to https://www.youtube.com/watch?v=nOFNc2uTmGs if I change the .idl( e.g. by adding a new property in Photo.idl ) when I recompile I should be able to see that property declaration/definition in Photo.h and Photo.cpp but unfortunately nothing is done and therefore I get a compilation error

projects\cppwinrt-photo-editor-sample\photoeditor\generated files\winrt\photoeditor.h(690): error C2039: 'MyProperty': is not a member of 'winrt::PhotoEditor::implementation::Photo' (compiling source file Photo.cpp)

Photo.idl

namespace PhotoEditor
{
…..
Single Intensity;
Int32 MyProperty; <- This is what I added

What is the point of declaring the property in the .idl file if it doesnt generate the necessary code in the .h/.cpp?? I would've expected the build to add the following:

Photo.h

int32_t MyProperty();
void MyProperty(int32_t value);

Photo.cpp

int32_t Photo::MyProperty()
{
throw hresult_not_implemented();
}

void Photo::MyProperty(int32_t /* value */)
{
throw hresult_not_implemented();
}