Change your windows 8 Application Tile Logos and the Splash Screen

For any windows 8 application there are 3 Standard Tile Logos which are :

Logo.png

its the main tile logo for the application and its dimensions is  150 x 150 pixels

WideLogo.png

its a wide tile logo for the application and its dimensions are 310 x 150 pixels.

SmallLogo.png

its a small logo for the application and its dimensions are 30 x 30 pixels.

besides these there is the StoreLogo.png

which is the logo for the application when its uploaded on the Windows Store and its dimensions are 50 x 50 pixels.

and the SplashScreen.png

its the Splash Screen which appears in the start (beginning) of the application launch and its dimensions are 620 x 300 pixels.

You’ll find the Logo.png, SmallLogo.png and StoreLogo.png are created with any Windows Store project created with a template icon which can be found in the Assets folder

Image

Image

 

you can edit them with your own application logo and splash screen or you can edit them by your own files and reference them through the Package.appxmanifest file which you’ll find below the files in the solution explorer 

Image

 

Just double click it and it will open the file which has all of the deployment package properties the first tab which is selected is the UI which has all of our UI Properties

you’ll find the Tile properties which has all of the logos and the tile background color you can easily change any logo by pressing the browse button next to the URI button of every logo and through here you can also add the Wide Logo 

Image

 

and when you scroll down you’ll find the Splash Screen part which has the properties of the splash screen and its path you can press on the browse button and choose your splash screen and you can change its background color from here also

Image

 

to change the background color of the logos or the splash screen you just write its Hexadecimal Value for example

black is #000000 

you can choose the color you want in hexadecimal through this site

http://www.mathsisfun.com/hexadecimal-decimal-colors.html

N.B

When you add a wide logo it becomes the default start tile and you can make it smaller by choosing smaller from the Start AppBar.

Create your first Windows 8 Grid App

After my last post about how to create your first windows 8 application and the different types of windows 8 applications its now the time to create your first app.

In this this post I’ll show the steps to create your first grid app

Open Visual Studio 2012 then create a new project and choose Visual C# and Windows Store then choose Grid App
Image

Then choose the name of your Project (Application) and press OK

now your project files were created and as mentioned in the last post the application is divided into 3 parts:

Assets

This folder contains all of the images that we will use in the application and it comes with the template images and you can add the images you want later.

Image

 

DataModel

This folder contains all of the data that will be used in the application and a template file is created in it named SampleDataSource.cs that we will modify later to add the application data

Image

 

App Pages

Which is the design of the application itself and in the Grid App consists of 3 XAML Pages which will be illustrated with more details.

Image

So now we have 3 XAML Pages that we need to change its Data, Images and Design first all of the information (Data) is found at the SampleDataSource.cs where the Data is divided into group objects and each group has items objects inside it.

Each Group object takes uniqueId , title, subtitle, imagePath and description in its parameter where the

uniqueId is a string that is Unique for every group

title is the title of the group which has a default value of “Group: Title 1” for group1 as an example and can be changed later

subtitle is the group subtitle which has a default value of “Group: Subtitle 1” for group 1 as an example and can be changed later

imagePath is the path for the image of the group that can be changed later

description is the group description that can be changed later 

Image

 

this is an example of the group code that is generated in the sampleDataScource.cs file so what to do with it is simple as we have 5 strings let’s leave the uniqueID as it is and we have 4 strings that we can change the title, subtitle, imagePath which will be changed when we add images to the Assets folder and the description of the group.

the Item object is the same parameters as the group but it has 2 extra parameters

content which has the information that the item talks about and is a string also.

group which takes a group object its to know which group this item will be added.

Image

 

the sample code shows Group-1-Item-1 as an example

In each item we have 7 parameters 6 strings that we will change 5 of them as the first one is the uniqueId, we’ll change the title, the subtitle, the imagePath for the image that we will add later in the assets folder, the description and the content of the item.

however by default the SampleDataSource.cs has 6 groups generated each of them has many items so according to the application you are developing change the items/groups you want and delete the items/groups you don’t need.

Now add the images that will be used in the application by right clicking the Assets folder and choose add then Existing Item and the following window will appear

Image

 

then navigate to the folder you have the images in and select them all then press Add

now they’ll appear in the solution under the Assets folder and you can easily add them to the item/group by changing the imagePath by the image URI.

Now we have the design which is 3 XAML Pages

GroupedItemsPage.xaml which has all of the items grouped together in grid viewImage

GroupDetailPage.xaml which has the description of the group and its image the items in each group with their description and images

Image

 

ItemDetailPage.xaml which has the item title, item subtitle, image and content.

Image

 

each of these pages are written in XAML code however if you are nor familiar with XAML you can  just use the designer view which is easier just select the object you want to change its properties and in the properties window which is below the solution explorer the properties of the object appears so that you can modify them easily Image

For example I selected the Group title in order to change its color so I’ll just select the brush and change the color to red

Image

 

and now we can change any object in the XAML pages using the same method including the Background of the page

after editing the application files press F5 to build and run it

Image

 

This is the output of the sample run

How to create your first Windows 8 Application ?

After understanding the windows 8 technical concepts in my previous blog its time to start developing our application.

First you must ensure to have Visual Studio 2012 and for sure Windows 8.

Second there are different technologies that you can you use in the app development which is a good thing that will make people want to develop more apps.

Technologies supported are

WPF + C#

its the (silverlight) XAML used for the design combined with the C# programming language.

WPF + C++

Using the XAML for the design combined with the C++ programming language.

HTML + JavaScript

Using the HTML for the design combined with the JavaScript for programming.

now choose one of these technologies and get started.

Third our windows 8 application consists of 3 main parts

App Pages (HTML or XAML)

which has all of the design of our application pages and we can add components to it easily.

Data Model (Data Layer)

it has all of the information stored in a data source.

Assets

it has all of the images that we will add to the application to use it later.

Now its developing time

Open Visual Studio 2012 and choose create a new project

Image

 

choose the type of project based on the technology you selected and then choose windows store to create a windows store application I selected C# .

In the C# you’ll find it more easy as Microsoft created a ready made templates for developing windows store apps to make it easier for the developer so you’ll have to choose between 3 options

Blank App

it creates an empty XAML Page so that the developer could add his components later using the toolbox .

Image

 

Grid App

Its a pre-made template containing the Grid Tiles view and each tile contains certain information about it and has description and an image however it has 3 XAML Pages

GroupedItemsPage.xaml which has all of the items grouped together in grid view

Image

 

GroupDetailPage.xaml which has the description of the group and its image the items in each group with their description and images

Image

 

ItemDetailPage.xaml which has the item title, image and content

Image

 

Split App

Its the same as the Grid App but with 2 XAML pages only

ItemsPage.xaml which has the groups view where each group has items inside it

Image

 

SplitPage.xaml which appears after selecting a group and is splitted into 2 views a select menu on the left having all of the group items and when you select any item it opens on the right the item content and image.

Image

 

These were all of the types of windows 8 applications all of the other options are to create either a library to add later to a windows 8 application or a windows runtime component.

Understanding windows 8 technical concepts

After the launch of Windows 8 on 26 of October windows 8 became official worldwide and since then a lot of developers wanted to learn how to make applications on its new modern user interface but first they need to know some of  the technical concepts that will be needed later in the developing.

 

Live Tiles

The new modern user interface is a group of tiles some of these tiles shows the user the application live updates which appears on the tile

Image

 

Charms

Charms are one of the easiest tools that was implemented in the new modern user interface that through it we can share content from other apps or search different apps for certain content and also we can change the settings of a certain app so we have 3 charms

Search Charm

Share charm

Settings Charm

Image

 

Toast Notifications

Toast notifications are notifications that are sent by the application to the user to notify him about a certain activity and it appears suddenly on the upper right of the screen.

Image