photoSuru Application Visuals

With WPF, it’s easy to change an application’s visual look and feel; this document describes that process in detail.

Branding photoSuru
Changing photoSuru’s color scheme
Changing photoSuru’s Layout

Branding photoSuru

The easiest way to make photoSuru your own is by branding; change the Application Name, Icon, Splash Screen, and Logos.

First, change the application settings in ScePhotoViewer\Properties\Settings.settings:

ApplicationName should be the name of your application (e.g. ‘photoSuru’), and ChannelPortName should be a unique channel name for your application (e.g. ‘[ApplicationName]Channel’)
CompanyName should be the name of your company (e.g. ‘Microsoft’)
ApplicationDownloadLocation should be set to the location where users can download your application, used when content feeds are generated using the feed wizard in your application.
GeneratedFeedApplicationName should be set to the name of your ClickOnce deployed executable.

NB: ApplicationName, CompanyName, and GeneratedFeedApplicationName must match the values set in the ClickOnce deployment properties; see the Deployment album for more information

You’ll also want to change DataFeedUri to point to your own photo feed; this feed is used whenever a subscription isn’t explicitly loaded, for example, when photoSuru is launched from the desktop shortcut.

Other settings you might consider changing:

DefaultApplicationThemeName, the name of the application theme to show by default (when not specified in the loaded subscription)
SkipIntroWindow, whether the introduction to photoSuru window should be shown on first run (user controls setting after first run)
GalleryHomeInListView, whether or not you want the gallery home to display the list view of photos on first run (user controls setting after first run)
PhotoViewerShowsDescription, whether or not you want photo descriptions to show on first run (user controls setting after first run)
PhotoViewerShowsFlowDescription, whether or not you want long photo descriptions to show on first run (user controls setting after first run)
PhotoFlowDescriptionZoom, the zoom setting for the long photo description on first run (user controls setting after first run)

To change the application logo, set the location of the logo in ScePhotoViewer\Resources\ColorResources.xaml’s ApplicationImageStyle resource; you’ll also want to change it in any themes that override the default ColorResources.xaml with a logo that works with that color scheme.

To change the application icon and splash screen, replace ScePhotoViewer\Win32Resources\ApplicationIcon.ico and ScePhotoViewer\Win32Resources\SplashScreen.png with your own icon and splash screen, respectively. Then, from a Visual Studio command prompt, run ‘rc SplashScreenWin32Resources.rc’ to compile the resources into a single file, and recompile your application to see the changes.

Changing photoSuru’s color scheme

You can change photoSuru’s color scheme by changing the brush colors it uses to paint the UI. To begin, make a new folder for your custom color theme in ScePhotoViewer\Resources\Themes, e.g. ScePhotoViewer\Resources\Themes\Ruby.

Next, create a ResourceDictionary with the same name as the folder you just created (e.g. ScePhotoViewer\Resources\Themes\Ruby\Ruby.xaml) and copy the contents of ScePhotoViewer\Resources\Themes\Dark\Dark.xaml into your new ResourceDictionary. This creates a new theme with the default templates and colors, the black-and-orange photoSuru ‘Dark’ theme. We’ll replace the resources linked in this file with ones specific to your new color scheme to change the colors.

To tell photoSuru to look for your new theme, you’ll have to add it to the (Sample)ViewManager’s Themes collection. In ScePhotoViewer\Services\SampleViewManager.cs, create a new PhotoViewerTheme instance with the name and path to your theme in the InitializeThemes() method (e.g. this.themes.Add(new PhotoViewerTheme("Ruby", @"Resources\Themes\Ruby\Ruby.xaml"));). Then give your application a run – you’ll be able to switch to your new theme by pressing Ctrl-T to cycle through the available themes. At this point, since we haven’t provided any custom colors, your new theme will just appear as a copy of the default ‘Dark’ theme.

When the theme is changed, photoSuru automatically loads the root theme ResourceDictionary for the new theme, merges in the resources from the files it references, and then applies the new set of resources to the application. By changing the files referenced by your theme’s root ResourceDictionary, you can change the colors or layout of the application; we’ll look at changing the colors here, and changing the layout in the next topic.

To change the colors in your theme, add a new ResourceDictionary to your theme’s folder named ColorResources.xaml, and copy the default colors into it from the default colors file, ScePhotoViewer\Resources\ColorResources.xaml. Then, change your theme’s root theme file to point to your theme’s copy of ColorResources.xaml instead of the default (e.g. <ResourceDictionary Source="pack://application:,,,/Resources/Themes/Ruby/ColorResources.xaml" />)

Finally, change the colors in your new ColorResources.xaml ResourceDictionary! The colors are documented in the file, but a few noteworthy ones are:

Background_ChromeDefault: The background for the entire application window
Background_Masthead: The background for the navigation area at the top of the window containing the breadcrumb bar and search box
Fill_ChromeUIDefault: The fill color for the navigation and sync buttons
Foreground_ChromeText: The text color in the navigation bar
Foreground_ContentElement: The text used in the non-navigation areas of the window
Background_AnimatedItem: The highlight background color used when the mouse is placed over an item
ApplicationImageStyle: The location of the application logo to use when that theme is displayed (so that you can match your logo’s colors to dark/light/colored backgrounds)

One last thing: you’ll also want to add a resource into ScePhotoViewer\Resources\Themes\ThemePreviews named [ThemeName]ThemePreview (e.g. ‘RubyThemePreview’) that displays a small preview of your theme for use in the Feed Wizard’s theme selector. You’ll want to make sure not to reference any external resources in this preview, as this preview is used from ALL themes.

Changing photoSuru’s Layout

You change the layout of the application the same way you change the colors, just more so! If you’ve already created a theme with custom colors, skip a few paragraphs to see how the layout specific stuff works. If not, read on to see how to create a new theme.

To begin, make a new folder for your custom theme in ScePhotoViewer\Resources\Themes, e.g. ScePhotoViewer\Resources\Themes\Ruby.

Next, create a ResourceDictionary with the same name as the folder you just created (e.g. <ScePhotoViewer\Resources\Themes\Ruby\Ruby.xaml) and copy the contents of ScePhotoViewer\Resources\Themes\Dark\Dark.xaml into your new ResourceDictionary. This creates a new theme with the default templates and colors, the black-and-orange photoSuru ‘Dark’ theme. We’ll replace the resources linked in this file with ones specific to your new theme.

To tell photoSuru to look for your new theme, you’ll have to add it to the (Sample)ViewManager’s Themes collection. In ScePhotoViewer\Services\SampleViewManager.cs, create a new PhotoViewerTheme instance with the name and path to your theme in the InitializeThemes() method (e.g. this.themes.Add(new PhotoViewerTheme("Ruby", @"Resources\Themes\Ruby\Ruby.xaml"));). Then give your application a run – you’ll be able to switch to your new theme by pressing Ctrl-T to cycle through the available themes. At this point, since we haven’t provided any custom colors or layout, your new theme will just appear as a copy of the default ‘Dark’ theme.

When the theme is changed, photoSuru automatically loads the root theme ResourceDictionary for the new theme, merges in the resources from the files it references, and then applies the new set of resources to the application. By changing the files referenced by your theme’s root ResourceDictionary, you can change the colors or layout of the application; we looked at changing the colors in the previous topic, so we’ll look at changing the layout here.

Each root theme ResourceDictionary references a collection of resource dictionaries that provide styles and templates for the controls in photoSuru. The themes shipped with photoSuru reference the default resource dictionaries – located in ScePhotoViewer\Resources – for everything but their colors. However, by replacing some or all of those references with your own ResourceDictionaries, you can change the layout and controls used to build almost any part of the application! In the screenshot shown here, we replaced the Gallery view with a gallery view that shows each album’s first photo as a Polaroid-type photo, but the possibilities are unlimited! Just copy one of the default resource dictionaries from ScePhotoViewer\Resources into your theme’s folder, update your root theme ResourceDictionary to merge that file instead of the default file, and you’re on your way.

Here’s what the default dictionaries do so you know what to replace:

ThemePreviews.xaml: Included in all themes, it has the previews for each available theme
ColorResources.xaml: Colors used throughout photoSuru, as well as the branding logo
ArrowButtonResources.xaml: The shape and color of the navigation arrows
BaseResources.xaml: Various resources used throughout the application
SlideShowResources.xaml: Templates and styles for the slideshow
ScrollViewerResources.xaml: Template styling the default Windows scrollbars
ComboBoxResources.xaml: Template styling the default Windows ComboBox
SyncControlResources: Styles for the ‘sync’ icon in the navigation bar
SearchResources.xaml: Styles for the search box and the search results
FlowViewerResources.xaml: Styles and templates for the rich document viewer shown on top of the photo viewer
PhotoViewerResources.xaml: All of the resources for the photo viewer
PhotoGalleryAlbumSelectorResources.xaml: The breadcrumb bar styles and templates
PhotoAlbumResources.xaml: Album home templates
GalleryHomeResources.xaml: Gallery home templates

Note

This document is also available from within photoSuru; simply open the ‘Application Visuals’ album in the ‘How To photoSuru’ subscription that installs with photoSuru.

Featured Item

advertise here