Adding Images and Icons

October 21, 2011

To make your application distinct, you can add images and icons to your application.

You Will Learn

• How to design your images and icons.
• How to add an image to a page.
• How to add an image to the background of a page.
• How to replace the splash screen image.
• How to add an application icon.
• How to add an application tile icon.

Applies To

• Silverlight for Windows Phone OS 7.1

  

Image and Icon Tips

You can find royalty free artwork on the Internet or you can have artwork created by a designer. The following are some tips for your images and icons to ensure that they are consistent with the new Windows user interface (UI).

• Avoid 3D text.
• Avoid gradients, bevels, and shadows.
• Avoid rounded corners.
• Avoid black or white backgrounds.
• If you use transparency in the application tile icon, the foreground icon should be white.

Performance Tip:
In general, the JPG decoder is much faster than the PNG decoder. If you don’t need transparency, choose the JPG file format instead of the PNG file format. Also, try to limit the size of your images. For more information, see Performance Considerations in Applications for Windows Phone.

Adding an Image to a Page

To display an image on a page, you can specify an image in your project or bind to an image at run time.

To add an image to a page

1. Add the image in JPG or PNG format to the project and set the Build Action to Content.

2. Add an Image control to the page.

3. Set the Source property of the Image to the location of the image.

   The following XAML shows how to display an image named myPicture.jpg in a folder in Solution Explorer named Images.

   <Image Source="/Images/myPicture.jpg">
   

   You can also display images that are provided at run time. The following XAML from Fuel Tracker shows how to set the Source property to the Picture property of a Car object using a markup extension.

   <Image Height="75" Width="75" Margin="15" Stretch="UniformToFill" 
       Source="{Binding Picture}" VerticalAlignment="Top"/>
   

   

For more information about images, see the Images QuickStart.

Adding a Page Background Image

Sometimes you will want to display an image behind controls and other UI elements on a page. The first step in adding a page background image is selecting the image to display. There are some design considerations when selecting a background image.

• Select an image that works in both light and dark themes.
• Use JPG or PNG file formats. If you are going to adjust the opacity of the image, you should use a PNG file.

Design Guideline:
Avoid using too much white in applications, such as white backgrounds, as this may have an impact on battery life for devices that have organic LED displays.

There may be some trial and error involved in selecting an appropriate background that works in both light and dark themes. Be sure to view the background in both themes. The following shows the page background image used in Fuel Tracker, which has a transparent background.

The following illustration shows how the page background image looks in the dark and light themes. Since it has a transparent background, the text is visible in both themes.

To add a page background image

1. Add the image to the project and set the Build Action to Content.

2. Create an ImageBrush resource and set the ImageSource property to the relative URL of the image. You must also set a Key for the image.

   If you are using a PNG file, you can optionally set the Opacity property to a value between 0 and 1 and the Stretch property to indicate how you want the image resized to fit its allotted space.

   For Fuel Tracker, the ImageBrush is declared in App.xaml because the same brush resource is used for all of the pages.

   <ImageBrush x:Key="gasBrush" ImageSource="/Images/gasPump.png" Opacity=".1" Stretch="UniformToFill" />
   

3. Apply the ImageBrush as the Background for the root element, or other elements of your page using the key you set for the brush, as shown in the following XAML.

   <!--LayoutRoot is the root grid where all page content is placed-->
   <Grid x:Name="LayoutRoot" Background="{StaticResource gasBrush}">
   

   You can also apply the ImageBrush by using the Properties window, as shown in the following illustration.

   

Adding a Splash Screen Image

When you create a new Windows Phone project in Visual Studio, you automatically get a default splash screen named SplashScreenImage.jpg that looks like the following.

To add your own splash screen image, replace SplashScreenImage.jpg with a JPG that has a size of 480 by 800 pixels. Using a screenshot of your application is a quick way to customize your splash screen. For more information, see How to: Create a Splash Screen for Windows Phone.

Certification Requirement:
You have a limited time to render the first screen to pass certification. Using a splash screen will help you meet this requirement. For details see section 5.2 of Technical Certification Requirements.

If you want to display a more sophisticated splash screen, such as an animation, you won’t be able to use a JPG image. Keep in mind that if you use a page to display a custom splash screen, that page will be part of the Back button stack. This means that if the user presses the Back button on the first page of your application, the splash screen will display instead of exiting your application. To get around this problem, use a Popup to create your splash screen.

Certification Requirement:
The Back button must be used correctly to pass certification. For details see section 5.2 of Technical Certification Requirements.

Adding an Application Icon

The application icon is the image that displays for your application in the phone’s application list.

The following shows the application icon used in Fuel Tracker.

Certification Requirement:
Images must meet size and format requirements. For details, see Application Artwork.

The following shows how the application icon looks in the application list.

To set an application icon

1. Add the icon to the project and set the Build Action to Content.

2. In the Project properties, on the Application tab, set your application icon in the Icon drop-down list.

   

   Alternatively, you can modify IconPath element of the WMAppManifest.xml file to set the application icon as shown in the following markup.

   <IconPath IsRelative="true" IsResource="false">gasIcon.png</IconPath>
   

Adding an Application Tile Icon

An application tile is a representation of your application that appears when users pin your application to the start screen.

The following shows the application tile icon used in Fuel Tracker.

Certification Requirement:
Images must meet size and format requirements. For details, see Application Artwork.

The following shows how the application tile icon looks when the accent color is set to green.

To set an application tile Icon

1. Add the icon to the project and set the Build Action to Content.

2. In the Project properties, on the Application tab, set the Background image in the Background image drop-down list to your tile icon.

   

   Alternatively, you can modify the BackgroundImageURI element of the WMAppManifest.xml file to set the application tile icon, as shown in the following markup.

   <PrimaryToken TokenID="FuelTrackerToken" TaskName="_default">
       <TemplateType5>
           <BackgroundImageURI IsRelative="true"
               IsResource="false">gasTileIcon.png</BackgroundImageURI>
           <Count>0</Count>
           <Title>FuelTracker</Title>
       </TemplateType5>
   </PrimaryToken>
   

For more information about application tile icons, see Application Artwork and How to: Set the Initial Properties for the Application Tile for Windows Phone.

Next Topic | Previous Topic | Home