PhotoLab sample

• Code Sample
• 09/08/2022
• 9 contributors

A mini-app for viewing and editing image files, demonstrating XAML layout, data binding, and UI customization features for Universal Windows Platform (UWP) apps.

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

This repo includes the complete sample pictured above, plus separate versions that serve as starting points for a series of XAML basics tutorials. Each of these starting points is a simplified version of the complete sample, making the code easier to browse around in as you go through each tutorial.

Note: The tutorials do not proceed sequentially to build up to the complete sample, so be sure to start each tutorial by opening the correct starting point project. Also, be sure to check out the complete sample to see additional features such as custom animations.

Features

PhotoLab demonstrates:

• XAML layout ranging from basics to adaptive and tailored layouts.
• XAML data binding including the {x:Bind} markup extension.
• XAML styling and UI customization.
• Image effects from Windows.UI.Composition.
• Use of the Windows UI Library (WinUI) and the Windows Community Toolkit (for ReorderGridAnimation).
• Loading images from the Pictures library using data virtualization to increase performance when there are numerous files.

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 for examples of some highlighted features:

• Layout: see MainPage.xaml and DetailPage.xaml.
• Data binding with x:Bind: see ImageGridView_DefaultItemTemplate in MainPage.xaml
• Styling and customization: see FancySliderControlTemplate in DetailPage.xaml.
• Image effects: see code starting with InitializeEffects in DetailPage.xaml.cs.

Related documentation and 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

• Windows UI Library (WinUI)
• Windows Community Toolkit

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.

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 PhotoLab and you can Start Debugging (F5) or Start Without Debugging (Ctrl+F5) to try it out. The app will run in the emulator or on physical devices.

Note: The platform target currently defaults to ARM, so be sure to change that to x64 or x86 if you want to test on a non-ARM device.