1. Goal

This guide will help you step by step to publish and customize MyCompany framework using the information of the ISV.

You will be also able to publish the application on the App Hub.

1.1 Pre-requisites

You need to have the development tools of Windows Phone 7.5, available at this link:

http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27570

MyCompany has been developed using only .NET Framework and Silverlight components for Windows Phone; You don’t need to install or know any third-party libraries.

2. Installation process

Open the solution “Microsoft.ISVApps” in Visual Studio. The solution has two projects:

Picture 1: Common Project

clip_image002[5]

Picture 2: MyCompany Project

clip_image004[5]

2.1 How to customize the theme

We recommend to analyze the app before customizing the theme.

The application uses the following images:

· PNG 62x62 pixels: application icon

· PNG 99x99 pixels: small icon for the Marketplace

· PNG 173x173 pixels: application tile

· PNG 200x200 pixels: big icon for the Marketplace

· PNG 430x500 pixels : company’s client list

· PNG 440xX pixels (X can be max 25): separator

· JPG 480x800 pixels: splash screen

· One or more PNG 480x800 pixels: screenshot of the application

· Optionally:

o PNG Xx35 pixels (X can be max 440): company logo which appears in all pages

o PNG 480x800 pixels: background application.

2.1.1 How to create the screenshot of the application

After opening Windows Phone 7 emulator, click ok the arrow “>>”on the right side bar, you can see three tabs (Accelerometer, Location, Screenshot). Click on “Screenshot” and on “Capture” to create the screenshot.

Picture 3: Screenshot of the application

clip_image006[5]

2.2 Task List

To see the list of all permitted customizations you have to be enable the Task List like below:

Picture 4: Task List

clip_image008[5]

2.3 Editings

Using AssemblyInfo.cs file of both projects you can customize the title label and other details if you want at “assembly level”. More details follow.

2.3.1 WMAppManifest.xml File

Edit this file for:

· “Title” attribute in the tag xml App.

· Tag “Title” (at the bottom of xml document).

· “ProductID” attribute of App tag with a new GUID, generated for example on: http://www.guidgenerator.com

2.3.2 Images

You need to rename and replace the following images in “Images” folder in the MyCompany project:

To Rename

Scope

From

Folder

480x800

Background image

MyCompanyDefaultBackground

Images

430x550

list of company’s client

MyCompanyDefaultClients

Images

62x62

small icon

MyCompanyDefaultIcon

Images

Xx35

logo

MyCompanyDefaultLogo

Images

173x173

application tile

MyCompanyDefaultTile

Images

480x800

splash screen

SplashScreenImage

Images

2.3.3 MainPage Editing

You can customize MyCompany using the style files: the only exception concerns the editing of the company description (as below).

Picture 5: Edit company’s description

clip_image010[5]

This lets us replace the plain text with a XAML-ready rich text by markup.

2.3.4 Product list separator

You can edit the separator used for the product list by creating a PNG 440xX (X is a size between 15 and 30 pixels) by renaming it “Separator.png” and by moving it to “Microsoft.ISVApps.Common” in folder Graphic/.

2.3.5 Language

In the application there are some messages: the errors/information/warnings are in external resource files and they are available in two languages: Italian and English. You can choose your languange editing the CompanyDetails.xaml file (using the comment tag).

Picture 6: Choose the system language

clip_image012[4]

2.3.6 CompanyDetails.xaml

The most of customization hot-spots are contained in the CompanyDetails.xaml file

In particular:

· Edit the footer (it is shared by all pages).

Picture 7: Tag for the footer

clip_image014[4]

· Set the contact info of the company:

Picture 8: Tag for the Contact Info

clip_image016[4]

· Set the RSS/Atom Feed about the company’s news. You should replace the below link

Picture 9: Tag for the Feed RSS/Atom

clip_image018[4]

· Edit the default text which appears in the first page. It describes the company and its business.

Picture 10: Tag for the company description

clip_image020[4]

In the main page there is an important component: JumpList. It contains the menu items of the application. It is bounded by default through XAML in CompanyDetails, by editing these lines:

Picture 11: JumpList Tag

clip_image022[4]

These are the fields involved:

· ID: points to the pivot page

· JumpCode: it is the small text in the selection box

· JumpColor: it is the box color (gradient or flat color)

· JumpTitle: it is the description of the jumplist item on the left

Again, through XAML, there is the Product List customizable as below::

Figura 12 - Personalizzazione dei prodotti

clip_image024[4]

2.3.7 Styles

All style information are in Styles.xaml file. You have to edit this file to customize the application as you prefer.

Below you can find the main editable blocks:

Picture 13: styles

clip_image026[4]

The forth page (Contact) is composed by 4 Tiles. These tiles are editable as the example below:

Picture 14: Style for the Contact page

clip_image028[4]

The Pivot’s header is editable (for the title/logo):

Picture 15: Application Title/Logo

clip_image030[4]

And for the menu:

Picture 16: Header of the Pivot

clip_image032[4]

If you want to set a background image for the application or a background color, you have to use the following style tag:

Picture 17: Background

clip_image034[4]

You can edit the JumpList using the DataTemplate:

Picture 18: Template of the JumpList

clip_image036[4]

For the product and the news page, the template is simpler to edit:

Picture 19: Products and News

clip_image038[4]

Last edited Dec 22, 2011 at 11:42 AM by child, version 1

Comments

No comments yet.