Photo Store Demo

The Photo Store demo is an end to end rich-client application that uses several different features of the Windows Presentation Foundation (WPF). The user interface (UI) takes advantage of many styling techniques in order to create a visually attractive and interesting UI. Subtle animation effects are used to enhance the user experience, and draw attention to specific UI elements. Photo editing support is included, demonstrating the ability to rotate, crop, or turn an image to black and white. Multi-level undo of photo operations is also supported.

For comprehensive coverage of Windows Presentation Foundation (WPF) and Microsoft .NET Framework application development best practices, refer to the following as appropriate:

Accessibility - Accessibility Best Practices

Security - Windows Presentation Foundation Security

Localization - WPF Globalization and Localization Overview

Download sample

Building the Sample

  • Install the Windows Software Development Kit (SDK) and open its build environment command window. On the Start menu, point to All Programs, Microsoft Windows SDK, and then click CMD Shell.

  • Download the sample, usually from the software development kit (SDK) documentation, to your hard disk drive.

  • To build the sample from the build environment command window, go to the source directory of the sample. At the command prompt, type MSBUILD.

  • To build the sample in Microsoft Visual Studio 2005, load the sample solution or project file and then press CTRL+SHIFT+B.

Running the Sample

  • To run the compiled sample from the build environment command window, execute the .exe file in the Bin\Debug or Bin\Release folder contained under the sample source code folder.

  • To run the compiled sample with debugging in Visual Studio 2005, press F5.

Remarks

The sample includes a shopping cart feature which is for demonstration purposes only. Photos and products in the demonstration application are not actually for sale.

Keyboard commands are supported in the application for navigation purposes. The arrow keys can be used to select a photo. The tab key supports navigation to and from the various portions of the UI.

In order to crop a portion of an image, simply drag the mouse over a portion of the image while holding down the left mouse button. This will draw a yellow border around the selected portion of the image (the intended crop region). The Crop button will then be available to you.

See Also

Reference

System.Windows.Media.Imaging
BitmapImage
DataTemplate
DoubleAnimation
ControlTemplate

Other Resources

Animation Overview