DD's Blogger

Custom skin for Windows Phone 7 Emulator

2011-11-21T23:12:00.001-08:00

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

2010-09-08T11:18:00.000-07:00

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

2010-09-07T15:08:00.000-07:00

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

2010-08-08T01:30:00.000-07:00

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

2010-08-07T15:06:00.000-07:00

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

2010-07-12T12:21:00.001-07:00

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

2010-04-26T07:32:00.000-07:00

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

2010-04-24T07:55:00.000-07:00

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

2010-04-24T07:51:00.000-07:00

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

2010-04-24T07:48:00.000-07:00

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!

Routed Events in Silverlight

2010-04-24T07:43:00.000-07:00

With the Windows Presentation Foundation a new type of events were introduced - the RoutedEvents. They have provided the developer with entirely new approach to the eventing and the event handling. Those of you who are already at the WPF and have experience with the routing of events may found this article useless, but I believe that it can be a good starting point for everyone who makes his first steps in the event routing and more specially in the Silverlight event routing.

Routed events basics

Before explaining the routed events you have to understand the element tree (also known as visual tree), that is typical for every WPF or Silverlight application. It consists of the controls hosted by the application and their parent-child relationships. For example:

UserControl>

    Grid>

        StackPanel>

            TextBlock />

            TextBox />

            Button />

        StackPanel>

    Grid>

UserControl>

The routed events are directly connected with the visual tree. It is used to propagate the event upwards or downwards on it, so the event could be handled by controls that are different then the control that originally raised the event.

There are three types of RoutedEvents - direct, tunneling, and bubbling.

Direct

This type of routed events can be handled only by the controls that had raised them. They are very similar to the events we are familiar with from WinForms and ASP.NET.

Tunneling

By this type of events, first the handlers of the root element of the visual tree are invoked and then the event travels through the child elements till it reaches the one that originally has raised it.

Bubbling

This type of events is first handled by their source and then the event handlers of the parent elements are invoked till the event reaches the root element of the visual tree.

The Handled property

Another basic thing is that the event arguments of every routed event have a Handled property. When set to true in the event handler the event won't propagate further in the visual tree.

RoutedEvents in Silverlight

The things explained above are fully in force for WPF, but for the Silverlight they are a little bit different. There are some differences between the routed events in Silverlight and WPF. Here are the most important of them:

You cannot create custom RoutedEvents in Silverlight. In WPF to create a custom event of this type we use EventManager, but in Silverlight it's not available. There still is a way out, but we'll discuss it later on in the article.

The only type of routed events in Silverlight is the bubbling event. Such events for example are the MouseLeftButtonDown and the MouseLeftButtonUp.

The control specific events don't bubble - for example the Click event of the Button control. This one sounds pretty logical - why to propagate an event through visual tree, when it can be handled only by a specific type of controls?

Here is a simple example (with source code) that will illustrate the behavior of the bubbling events in Silverlight. For it I have used the MouseLeftButtonUp and MouseLeftButtonDown events.

When I handle the MouseLeftButtonUp I write the name of the control that had handled it in the list and on MouseLeftButtonDown I clear the list. In the handlers of the ListBox for these two events I set the handled property to true, because I don't want the events raised by this control to be handled further in the visual tree. The same I have done with the handler for the MouseLeftButtonDown event - I need to clear the list once.

Note! Use the routed events where needed and be sure to stop the events you don't need to propagate through the visual tree, because this might cause faults and malfunctions in your application. For example the LayoutRoot is listening for an event that is raised in a specific part of the tree (the rectangle), but the event can also be raised in other parts of the tree (the ListBox).If we let the event, raised by the ListBox, to propagate to the LayoutRoot, the last will handle it, which causes the incorrect behaviour of the application.

The Article Was Taken from Here

My Silverlight 3 Book

2010-04-23T15:23:00.000-07:00

DD's Space

Finally I can publish my newly created Silverlight Book :) .

This was first Created in Silverlight 4 Beta but because that was not public and if you did not had Silverlight 4 Runtime installed you will end up installing Silverlight 3 Runtime and than some components ware not compatible so I had to downgrade to SL3.

The main purpose of this book is to host a news magazine but since that is not finally implemented I decided to publish this as is.

When I first started to make the book control it was a very big challenge since they are a very few Silverlight book example even les than now.

Now all major Silverlight Controls developer company has this control like Telerik and Devexpress also (but take a look at the prices !!! ).

The difference is that they are company's ...I am one stubborn developer :)

Of course the functionality is not as complex as theirs and was not my purpose to make a complex control.

The main idea is to have that book flip effect and behavior.

Description:

The Silverlight component is composed from a custom Silverlight book control, navigation buttons to turn page , an image panel that uses an Animated Panel List control to select and view images.

Images are populated using a Web Service to provide a array of images Uri's from the server folder, for the page backgrounds.

The page also support any adder type of controls since this is Silverlight and in a Silverlight Canvas you can have adder controls.

Here is not a controlled animation , is a canvas that uses complex masking and some geometry calculations to know the angles and positions function of the mouse position and so on … .

I have to tell you that all this started from am example published by Rick Barraza .

So if you want to make your own Silverlight Book start from Rick Barraza's blog.

Now some functionality description:

You can find the live example here : http://dandiaconu.homeip.net:1000/

(Try opening with Internet Explorer or Chrome (Firefox does not like Silverlight to much))

Note: This is hosted on my personal home PC so is not on-line 24/7 , but most of the time is on-line.

In case is not on-line it looks like this:

The images are taken from windows.microsoft.com site.

So , you have to pages that you can flip with mouse or from keyboard using Left, Right, Up, Down , Home, End, Page Up, Page Down keys or you can insert the page number that you want to open in the Go To section.

The Right images panel also allows you to navigate to the images you click on .

On the top of the book are the List Button , Full Screen Button, the Blog link and the Windows image for the user to navigate to the original source of images since they are very beautiful images and you may want to use some as Desktop wallpaper.

The Rating control also is a way for me to know if the Book is appreciated by visitors.

Here I am trying to explain all this in images since is a more easy way to explain.

Hope this is some how useful to you (if you are a Silverlight developer ) and that you enjoy this .

Happy coding!

You can find the live example here : http://dandiaconu.homeip.net:1000/

My previews Silverlight 3 Site : http://danielabarza.homeip.net/ (sorry because is in Romanian :) )

Follow me on Twitter!

Track you’re Silverlight site activity

2010-04-23T15:18:00.001-07:00

Track you’re Silverlight site activity

Some key points :

You can track you’re data and events on SketchFlow

You can track you’re data and events out-of-browser and offline

Let the client use Privacy option.

So easy … just drag and drop a Track behavior to you’re control.

See the video, explanation and example here:

Microsoft Silverlight Analytics Framework.

I have to implement this to all my sites :)

Follow me on Twitter!

Unit Testing Silverlight and Windows Phone Applications

2010-04-23T15:13:00.000-07:00

Check this Video on MIX 10 http://live.visitmix.com/MIX10/Sessions/CL59

Follow me on Twitter!

If you have a project to do or manage . . .

2010-04-23T05:46:00.000-07:00

If you have a project to do or manage …

If you have a project to do or manage ..Read This First http://bit.ly/hIrQp

Planning

User stories are written.
Release planning creates the release schedule.
Make frequent small releases.
The project is divided into iterations.
Iteration planning starts each iteration.

Managing

Give the team a dedicated open work space.
Set a sustainable pace.
A stand up meeting starts each day.
The Project Velocity is measured.
Move people around.
Fix XP when it breaks.

Designing

Simplicity.
Choose a system metaphor.
Use CRC cards for design sessions.
Create spike solutions to reduce risk.
No functionality is added early.
Refactor whenever and wherever possible.

Coding

The customer is always available.
Code must be written to agreed standards.
Code the unit test first.
All production code is pair programmed.
Only one pair integrates code at a time.
Integrate often.
Set up a dedicated integration computer.
Use collective ownership.

Testing

All code must have unit tests.
All code must pass all unit tests before it canbe released.
When a bug is found tests are created.
Acceptance tests are run often and the score is published.