Custom skin for Windows Phone 7 Emulator

If you have a windows phone 7 and develop application then I guess you will like to have an emulator that looks exactly like you’re phone.

This is exactly what I am going to show ho to do in this blog post.

Note: If you don’t care how to make one and you want the HTC Motzart skin then just downland the files from here HTC Mozart Emulator and add them in ” C:\Program Files (x86)\Microsoft XDE\1.0″.

But if you want to know how is made and how to make you’re custom skin then read all post.

Important: Please make a backup of the existing WM7_Skin.xml , just in case, or just take them from here “C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Emulation”, if you want to have the original skin.

So let’s understand what is happening:

The emulator image of the emulator is stored on “C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Emulation” but the images are also stored here “C:\ProgramData\Microsoft\XDE\1.0″ .

The images that are taken by the emulator are actually taken from ” C:\Program Files (x86)\Microsoft XDE\1.0″ , this is the magic place.

We will edit WM7_Skin.xml to reference the images and replace the WM7_Skin_Down.png , WM7_Skin_Up.png and WM7_Skin_Mask.png with some images that should meet some exact specifications:

1.The display screen from the image should be the same dimensions ( 480/800).

2.The mask image colored rectangles should be exactly over the buttons in our image.

3. The XML file should reference our new images and screen start position.

Let’s do it now:

1 Search an image and edit it to meet the requirements

The image should have a minimum resolution of 610/1109 (I found this image http://microsoftfeed.com/wp-content/uploads/2010/10/Windows-Phone-7-HTC-7-Mozart-Front.jpg)

Now we will edit this image so that the screen size is exactly 480/800 and for this I will use Paint.NET is free and darn good, much simpler than Photoshop.

Important : We make the image as png with transparent background.

To edit this I will open the image add a new layer draw a rectangle of 480/800 and shrink the image until the screen is the same as the rectangle , crop to the new image size and save the image as png .

2. Now we edit the mask image to be as the original images and so that mask rectangles will be over the buttons.

To do that I am going open the image in Paint.Net add a new layer and paste the mask image , and then I will use the Magic Wand to remove and delete the white background.

Then we move the image on this layer so that rectangles are exactly over the buttons and then we make all the image to be white using the Paint Bucket.

Select the layer with the mask , select the white background with the Magic Wand and then delete that, so you will end up with the colored rectangles only and is more easy to center.

Resulting Mask image

After the mask is created we make the Down image by editing the image and adding filling the image buttons with the same color as in original Down image.

Resulting Down Image

3. Now to edit the XML file.

In this image we see the relation between the physical file’s and the xml so all we have to do is to open the xml in notepad or some editor and just write the new filenames and very important to get the exact location where the screen is starting in my case 60 and 164, but if you make a mistake you will see in the Emulator and edit the xml again.

After we have the the images in the same folder and the xml is edited we can make a try to see our new Emulator.

Original Emulator                                                                                           Custom Emulator

Here is an archive with the files for HTC Mozart Emulator

Element is already the child of another element Error Again on PivotJitServer

If you get into this error on PivotJitServer don't panic.
Just open the MainPage.xaml and perform Format Document and Clean Solution.
After you Build the solution everything should be ok.
Strange error this one :) 

Element is already the child of another element Error on PivotViewerSample

I started to play a little with Pivot Viewer, but unfortunately from the first sample that you can download from http://www.silverlight.net/learn/pivotviewer/  I had an error
"Element is already the child of another element"
After searching the net a little and with no easy solution adder than get the latest version of Silverlight 4 toolkit that unfortunately didn't help , I've started to remove elements from .xaml and .cs
After removing all comments and formatting the Style.xaml I was surprised to observe that everything was working.
So I recommend you to do the same , I don't know what the proablem was but now is working just fine.

Just in case here is another archive with my working example:
http://cid-ec42eac854e5c4c7.office.live.com/self.aspx/.Public/PivotViewerSample.zip

Customizing Telerik Silverlight 4 RadMenu and RadMenuItems Styles Detailed Verison

Here are the 4 videos in witch is explain in every detail how to customize a RadMenu and Tips & Tricks to do this fast and easy.
Here is the source code:
http://cid-ec42eac854e5c4c7.office.live.com/self.aspx/.Public/RadControlsSilverlightApp6.zip

Part 1



Part 2



Part 3



Part 4

Customizing Telerik Silverlight 4 RadMenu and RadMenuItems Styles Short Version

Here is a video that I've made for Customizing Telerik Silverlight 4 RadMenu and RadMenuItems Styles

This one is a short variant of a much detailed video in which I have customized a RadMenu and Items in every detail from start to end.

If you have plans to customize RadMeniu's I recommend you that you take a look at this video first because it's shows you the tricks to do just that successfully , so you won’t lose your time wondering why some styles are not applying and how to change the menu’s hover styles.

Live Streaming in Silverlight 4

A few days ago I started to deep into live streaming in Silverlight since I needed to insert a live IP broadcasting webcam in a Silverlight project.

As we know there is MediaElement that has a limited supported formats and a first approach was to provide the Source of the MedialElement with the link to the video live stream.

The problem in all this was that the webcam provided a stream in .mjpg format witch is not supported by Silverlight.

So I started to do research campaign on Google and went over IIS Smooth Streaming , which was very nice to see how easy you can make a smooth stream from a video at high resolution, but this was not fit to my problem from to main reasons:

1. I had no hardware aces to my webcam so I can make a Live Broadcasting Project in Expression Encoder

2. my stream was real live stream not a video that I could encode

3. I had no Server to encode the live stream

Here is the clasic wey with an existing video How Do I: Getting Started with Smooth Streaming

So the solution was either to make the webcam somehow broadcast a Silverlight supported format or to do an live encoding without using a Windows Server.

The encoding can be made either using ffmpeg.exe of using VLC media player.

I started to experiment different links an types of formatting supported by Silverlight ad I arrived to the conclusion that this is very good and looks good in Silverlight

http://91.121.173.78:8254;stream.nsv :sout=#transcode vcodec=WMV2,vb=5000,fps=30,scale=1,acodec=wma2,ab=128,channels=1,samplerate=44100}:std{access=mmsh,mux=asfh,dst=MyIP:PortNo} :no-sout-rtp-sap :no-sout-standard-sap :sout-keep

The link is from a live broadcasting TV named Hit Music TV , and the rest is the settings configured and generated in\by VLC.

To make a very simple test:

1. make a Silverlight project,

2. add a MediaElement

3. Open VLC , start a live stream Like This

4. Very important thing -> set the media Source like this

Where MediaUrl is the uri to the Live stream

Also pay attention to the port on which you start the local stream , usually is 8080.

The thing that I didn't like about all this is that every time I waned to start a VLC stream I had to manually introduce the parameter for the stream, and all settings, so I've found the way to lunch the VLC from command line and start the stream directly from a WPF application.

To facilitate all this and show all this in a more presentable way I had created a small Silverlight 4 application and an Expander with the links for the Stream Sources and a window so you can create either a Media element or a Medial Player control to display the stream from the provided link.

Here is a video that illustrates the functionality of this small project.

Since the point here is Live stream in Silverlight I, will not get into project details here.

Here is a video of projects Silverlight and WPF.

Silverlight Showcase

I am part of Silverlight Showcase , but surprisingly not with the site of Daniela Barza witch I think deserve this , and it has a lot of Silverlight 3 features but with a Book Control.

Anyway here is the showcase http://www.silverlight.net/showcase/

(Select Geography->Romania)

and here is the site Silverlight 3 Book Control

Follow me on Twitter!

My first Silverlight 3 Site

Is not the first in Romania , is just my first .

But I am between the first's.

And I will speak no more.

Here is the Sketch Flow of the site Daniela Barza Sketch.

Here is the site http://danielabarza.homeip.net/ .

Follow me on Twitter!

Introducing Elevate

DD's Space

What Is Elevate?

Let’s face it, no library has it all, and the BCL is no exception. If you’re anything like me, then you occasionally find yourself re-writing some utility methods over and over again for each project that you work on. Even though you know it’s wrong, you probably re-invent the wheel from time to time for “simple” things. Maybe you carry around your own “MyUtilities.cs” file from project to project. Either way, in the back of your mind, you know that there has to be a better way.

For C++ programmers, this void is filled with Boost. Boost contains a lot of functionality that is missing from the C++ STL for one reason or another. It’s a great library for C++ development.

But what about us poor C# developers?

That’s where Elevate comes in. Elevate is a Boost-like library for .NET. Our goal at SRT Solutions is to capture the things that we think are missing from the BCL and put them in Elevate so that we can share them between our project groups and the rest of the world. By devoting some of our weekly learning time to add these common bits of code to Elevate, we can save ourselves, our clients, and hopefully other .NET developers time and money.

From //TODO - Chris Marinos' Blog

Enable Debugging in Silverlight

DD's Space

I've almost completed a project in Silverlight 3 and decided to export it to Silverlight 4 but after the export was made, with Blend 4 Beta ... I couldn't debug both my solutions (Silverlight and Web Application).

After searching the web for some solutions and trying some of them I've found the simplest and the correct one ...

Just Enable the Silverlight debugging from Web Project ->Properties->Web tab->Debuggers

That's it!

Solution was taken from here.

Have fun with Silverlight!
Follow me on Twitter!