Channels ▼
RSS

Design

Customizing the Appearance of Windows 8 Apps


In my previous article, I provided an overview of the Windows 8 Store apps and the new .NET Profile for Windows Store apps. In this article, I explain how to customize the appearance of the app by editing the app manifest, changing images, and editing some styles. In addition, I provide an overview of how the Grid app manages the different states for the app.

Editing the App Manifest

You begin by locating the Package.appxmanifest file in the root folder for the Windows Store app project (here, DrDobbsApp). By default, the package build process transforms Package.appxmanifest (the source manifest file) into AppxManifest.xml (the target manifest file) that will be included in the Windows Store app package content. If you double click on Package.appxmanifest, Visual Studio will display the Manifest Designer and it will allow you to change the values for many properties for your app (see Figure 1).


Figure 1: The Manifest Designer displaying the Application UI page with the values for the different properties.

You can also access Manifest Designer by selecting Project | Store | Edit App Manifest in the main menu. Notice that whenever you are working on a Windows Store app project, the Store submenu (see Figure 2) appears in the Project menu and provides many useful common operations for apps.


Figure 2: Project | Store provides many operations related to Windows Store app projects.

The Application UI page allows you to set the properties that describe the app and to customize the different logos. Forget about the word icon (it is difficult, I know, after so many years of thinking about icons). Windows Store apps have different logos and the following table summarizes them.

Name Required size for original scale in pixels Complete list of scales (name and pixels) Description

Logo

150-by-150

80: 120-by-120
100: 150-by-150
140: 210-by-210
180: 270-by-270

The logo displayed in the Start screen. This logo is the small or narrow version.

Wide logo

310-by-150

80: 248-by-120
100: 310-by-150
140: 434-by-210
180: 558-by-270

The wide or large logo displayed in the Start screen.

Small logo

30-by-30

80: 24-by-24
100: 30-by-30
140: 42-by-42
180: 54-by-54

The logo displayed when you use the Start screen apps view. Windows also uses this logo in the search and share panes. Thus, when you use the search feature and the app is listed in the results, this logo will appear.

Badge logo

24-by-24

100: 24-by-24
140: 34-by-34
180: 43-by-43

The logo displayed in the Lock screen when notifications are available for the app.

Store logo

50-by-50

100: 50-by-50
140: 70-by-70
180: 90-by-90

Specified in the Packaging page, Logo property. This logo will appear when the app is shown in the Windows Store.

Table 1: Logos in Windows 8.

While I was writing this article, Visual Studio 2012 Update 1 entered CTP (short for Community Technology Preview). This update adds multi-scale image support for manifest content; therefore, you are able to provide separate image files optimized to target different resolutions and pixel densities. I will continue working on the sample app with Visual Studio 2012 without the update. However, consider taking advantage of the multi-scale image support whenever the final release for Update 1 is available.

If you developed Windows applications in the past, you know how important it is for the application to have an appropriate icon. Logos are even more important in Windows Store apps, so you have to make sure that you provide all the necessary logos. The Show Name dropdown list allows you to determine in which Logos area you want the app's Display name to appear. The default option is All Logos, so the text you set in Display Name will appear wherever a logo is displayed. In this sample app, it is necessary to change the display name to "Dr. Dobb's App," instead of the default value DrDobbsApp (inherited from the initial project name). It is also possible to specify the icons that will appear in File Explorer and the Open With dialog box. Icons are just for desktop computers that execute the apps.

The Grid app provides default images for the following logos within the Assets folder:

  • Logo: Assets\Logo.png.
  • Small logo: Assets\SmallLogo.png.
  • Store logo: Assets\StoreLogo.png.

In the sample app, I set the Background color property to #5C943A (a dark green). The Foreground text is set to Light because the background is a dark color. The background color applies to the following elements:

  • App description page in Windows Store
  • App's tile
  • Buttons in any app-owned dialog boxes

When you edit any images for the logos using the Visual Studio image editor, the image will appear with the specified background color in the alpha channel and a checkerboard pattern. This gives you an idea of how each logo will look when you change the background color (see Figure 3). However, the colors aren't very accurate, so you need to run the application to see the real colors that each Windows 8 screen renders.


Figure 3: Editing the narrow logo that will be displayed in the Start screen.

After you execute the app for the first time, you will see the narrow logo in the Start screen (see Figure 4). Because the manifest specifies that the app display name must be shown in all logos, the name appears below the logo, within the tile.


Figure 4: The Start screen displaying the narrow logo for Dr. Dobb's App.

If you press Windows + F, and you search for "Dr" in Apps, Windows will use the small logo to include Dr. Dobb's App in the results list (see Figure 5).


Figure 5: The search pane displaying the small logo for Dr. Dobb's App.

There are two additional places where Windows uses the small logo. When you hover the mouse over the upper-left corner or press Windows + Tab, and the app is running, you see a tile with the small logo (see Figure 6).


Figure 6: Windows displays the small logo for Dr. Dobb's App to allow you to switch.

In addition, the App history tab in Task Manager uses the small logo to identify the app (see Figure 7).


Figure 7: The App history tab in Task Manager displaying the small logo for Dr. Dobb's App.

Another important UI element of any Windows Store app is the splash screen. Whenever you launch an app, Windows fills the screen with a background color and displays the splash screen image defined in the manifest at the center (see Figure 6). The default size for the image is 620-by-300 pixels for the 100 scale. However, you can also provide images for the other two scales:

  • Scale 140: 868-by-420 pixels
  • Scale 180: 1116-by-540 pixels


Figure 8: Windows displaying a customized splash screen for the sample Dr. Dobb's App.

By default, the background color Windows uses for the splash screen is the same one that you specified in the previously explained Background color property. However, if you need it, there is a specific splash screen section that provides another Background color property that you can use to define a specific color for that screen. The Grid app provides a default image for the splash screen in the Assets folder.

Overriding Brushes and Styles

If you have worked with either WPF or Silverlight, you know where to start looking at for the app startup: App.xaml and its code-behind App.xaml.cs. App.xaml defines a resource dictionary that includes the styles defined in Common\StandardStyles.xaml. In addition, the resource dictionary defines a string value for the AppName key that determines the app name that appears in the GroupedItemsPage view. Thus, it is necessary to set your app name there, as shown in the following lines for App.xaml:

<Application
    x:Class="DrDobbsApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DrDobbsApp"
    xmlns:localData="using:DrDobbsApp.Data">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Common/StandardStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>

            <!-- Application-specific resources -->
            <x:String x:Key="AppName">Dr. Dobb's</x:String>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Each view uses the styles defined in StandardStyles.xaml, so if you want to change some colors or brushes that affect the styles defined in that file, but you don't want to override the entire style, you will have to make changes to that file.

The following lines show the first lines of a customized StandardStyles.xaml. I've added two brushes and applied them to ApplicationPageBackgroundThemeBrush and ApplicationForegroundThemeBrush. This way, the styles that the file defines later use those two brushesand reflect the changes when either preview or execute the app. I wanted the background color for the views (also known as pages) to be the same one that the tiles and the splash screen display. In addition, I've changed the foreground color for the text to yellow.

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!-- Non-brush values that vary across themes -->

    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
            <x:String x:Key="BackButtonGlyph"> 	&#xE071;</x:String>
            <x:String x:Key="BackButtonSnappedGlyph"> 	&#xE0BA;</x:String>
        </ResourceDictionary>

        <ResourceDictionary x:Key="HighContrast">
            <x:String x:Key="BackButtonGlyph"> 	&#xE071;</x:String>
            <x:String x:Key="BackButtonSnappedGlyph"> 	&#xE0C4;</x:String>
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>

    <!-- Beginning of custom global colors / brushes -->
    <!-- I've added the following system wide overrides that will affect all subsequent styles -->
    <Color x:Key="ApplicationGreenColor">#FF5C943A</Color>
    <Color x:Key="ApplicationYellowColor">Yellow</Color>

    <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" 
         Color="{StaticResource ApplicationGreenColor}" />
    <SolidColorBrush x:Key="ApplicationForegroundThemeBrush" 
         Color="{StaticResource ApplicationYellowColor}" />


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video