After being teased with a “super confidential” video of Nokia’s new Sea Ray phone, I was interested to try an N9 skin for the Windows Phone emulator I found on this site. It isn’t the same as having one in your hand, but at least it is something.
The hacker in me, became just as curious as to how one could create a new skin if they wanted to. When developing Android applications, I would occasionally change its emulator skin to keep things fresh.
So, I took some time to delve into what makes up a skin, and I am happy to share what I found out.
Each skin consists of 3 graphic files. Below you can see how each one from the N9 skin looks like.
- WM7_Skin_Up.png
The image used when no buttons are being clicked on. - WM7_Skin_Down.png
The image shows what the buttons look like when clicked on. - WM7_Skin_Mask.png
This image uses different color squares to help define each button’s area. Even though you can essentially change the colors, it is probably best to keep them as they are
Note: I shrunk each one down, so you can easily see the differences. Originally, each one in this skin was 650 x 1180 pixels. Also, for best results it is recommended to have a shadow around each graphic.
The skin has an XML file (WM7_Skin.xml) to set certain attributes, so it knows what files to use and how to use them. Listing 1-1 shows the complete dump of the one from the N9 skin.
| Listing 1-1. WM7_Skin.XML Source |
|
<?xml version=”1.0″ encoding=”UTF-8″ ?> <skin> <view titleBar =”Windows Phone Emulator” displayPosX=”84″ displayPosY=”172″ displayWidth=”480″ displayHeight=”800″ displayDepth=”16″ quickAccessToolbarXPos=”0″ quickAccessToolbarYPos=”13″ mappingImage=”WM7_Skin_Mask.png” normalImage=”WM7_Skin_Up.png” downImage= “WM7_Skin_Down.png”> <button toolTip=”Back” onClick=”0x3B” mappingColor=”0xF7941D” /> <button toolTip=”Start” onPressAndHold=”0x3c” mappingColor=”0x66CC66″ /> <button toolTip=”Search” onPressAndHold=”0x3D” mappingColor=”0xA0410D” /> </view> </skin> |
The first things we would need to set in our XML for our new skin, is where the display area will be. When the emulator is running, the output needs to be overlayed onto the graphic. Below demonstrates where we will put it.
We will want it to start at 84,172 and to be 480 x 800 in size. I am guessing when more devices come out the display size will change. For now, changing the size will just stretch the display.
| displayPosX=”84″ displayPosY=”172″ displayWidth=”480″ displayHeight=”800″ |
The next thing in the file sets the depth for the emulator. While not essential for the skin, it may come in handy for you to change later. The emulator supports both 16bpp, and 32bpp.
| displayDepth=”16″ |
Next, the emulator uses a toolbar instead of a menu for control. If you need to minimize it, or quickly rotate it, this is what you will use.
The following two lines will define where exactly on the right side to place it. This might be necessary to change depending on what kind of skin you make.
| quickAccessToolbarXPos=”0″ quickAccessToolbarYPos=”13″ |
Next up, are the lines to define what image files to use. If you didn’t change your names, then you won’t have to worry about changing these in the file.
| mappingImage=”WM7_Skin_Mask.png” normalImage=”WM7_Skin_Up.png” downImage= “WM7_Skin_Down.png”> |
Finally, we arrive at the buttons. Each button consists of 3 attributes to set. Below you can see the one for the Search button.
|
<button toolTip=”Search” onPressAndHold=”0x3D” mappingColor=”0xA0410D” /> |
toolTip sets what text will display when your mouse cursor hovers over it. onPressAndHold is the value that is sent to the emulator when it is clicked. Remember the mask graphic from earlier? Well, mappingColor tells the emulator the RGB of that button’s mask. So, if you did change your square’s color you will want to change this value to match it.
Now that we have created the necessary files for the skin, we need to install these in their proper place. Depending on your OS (32 or 64 bit) they can be placed in either of the following directories.
|
32 Bit C:\Program Files\Microsoft XDE\1.0\ 64 Bit C:\Program Files (x86)\Microsoft XDE\1.0\ |
Knowing it is possible to completely change all aspects of each button, it should be possible in theory to create custom buttons with your skin. Not just the standard ones you are used to. Later on, if it will properly support changing the display size you just might be able to make a tablet skin.
Jump to the link below to see the original article, and to download that N9 skin. Happy hacking.
Source: Nanoph.jp
TAGS: 
Thanks for the interesting information. Subscribe to rss
What I find bothersome is to find a site that can capture me for a minute however your site is different. Congradulations.
Simply killing some time in between class on Ezine articles and I found your article. Not normally what I favor to read about, but it surely was absolutely worth my time. Thanks.
My brother suggested I might like this website. He was totally right. This post actually made my day. You cann’t imagine simply how much time I had spent for this information! Thanks!
Cool work. Keep it flowing!
hey
what theme are you currently making use of for this 1? (this actual blog site) I kinda like this and I used to be asking yourself if it is offered.
An outstanding share! I’ve just forwarded this onto a coworker who has been doing a little homework on this. And he in fact bought me dinner because I stumbled upon it for him… lol. So let me reword this…. Thank YOU for the meal!! But yeah, thanx for spending some time to discuss this matter here on your website.
Very nice post. I simply stumbled upon your weblog and wanted to mention that I have really enjoyed browsing your weblog posts. In any case I will be subscribing for your feed and I’m hoping you write again soon!
We are some young and energetic people working on a project that will require information on this area. The information about your site provided us lots of techniques that will assist our task. I only desire to thank you for your enormous work and devotion.
I was studying some of your blog posts on this internet site and I conceive this site is rattling informative ! Keep on posting .
Normally I do not learn article on blogs, but I would like to say that this write-up very forced me to take a look at and do it! Your writing style has been amazed me. Thanks, quite nice post.
Some really nice and utilitarian info on this website, too I think the design has got excellent features.