Silverlight 2 is out now with new features like rich set of controls, improved Text Rendering capabilities, rich networking support including calling secured(SSL) services etc…

Moreover Microsoft is partnered with Soyatec to sponsor tools for developing Silverlight applications using cross platform Eclipse development platform. eclipse2SL is first of that kind.

eclipse2SL is an open source tools integrated with the Eclipse development platform that enable Java developers to use the Eclipse platform to create applications that run on the Microsoft Silverlight runtime platform. Specifically, the project will be an Eclipse plug-in that works with the Eclipse Integrated Development Environment (IDE) and Eclipse Rich Client Platform (RCP) to provide both a Silverlight development environment and greater interoperability between Silverlight and Java, to facilitate the integration of Silverlight-based applications into Java-based web sites and services.

As an addition to the control set Microsoft is releasing Silverlight Toolkit by end of this month with more UI controls.

Silverlight 2 resources

To get the basic understanding go to Get started

And here are some good articles written by Scott Guthrie

Output of this looks like below

Actually this is happening because, the rendering algorithm used inside.

So what we need to do to fix this issue……???

Fix: Very simple, add a translate transformation of 0.5 for both X and Y axis.

Now if you run, u will get a correct 1px line.

In this post, I will explain how to create a custom control in silverlight. The control we create is a simple control which will draw a circle, the radius of the circle is controlled through the exposed public property.

This is a simple control, but hope this will give you an idea about the approach to the custom control development in silverlight.

Create a the Silverlight class library project first

I have named the solution and project as “SimpleControl”, after the class library is created, you will get a default class “Class1.cs”

delete that file. We don’t need that one; we will be creating a new one later.

Add a new text file to the project and give it’s name “HostingSurface.xaml“

This xaml file is the root canvas for our control. After completing this, you have change the build action for this xaml file. Change the build action to “Embedded Resource“

Now we will, create the canvas using the xaml code…

Inside this canvas, we will place the circle element that we are going to create.

Next, we need to create a class that will, does the actual rendering logic. For that, create a class called “HostingSurface.xaml.cs”

Derive that class from the base “Control” class and we need two variables “hostingCanvas” and “circle”. “hostingCanvas” will point to the root canvas we created in the xaml file. And the “circle” variable, will hold the actual Ellipse element.

We have created a public property “Radius” which will control the radius of our circle. We will implement this later.

Now, we need to load the xaml file and need to initialize the “hostingCanvas” variable. For that we use the “InitializeXaml(…)” function.

Since, we want to separate the rendering xaml from the code, for that purpose we are going to add a xaml file called “SimpleCircle.xaml” into the project. Otherwise, you can hardcode this string value in the class file itself, doing that will make the code unmanageable.

Mark this xaml file as embedded resource.

Then create an Ellipse element. Here we have created an Ellipse element with width and Height 100 pixels and filled it with the red color.

We want this file to be loaded, for that go to the HostingSurface.xaml.cs file and read the embedded “SimpleCircle.xaml” file and convert into a Ellipse element. Here we have used XamlReader.Load(…) method to do this. After the circle variable is initialized, we add that element to the root canvas of our control (“hostingCanvas”).

Now, we have the circle element. And we have to update the width and Height when the value of Radius is set.

And we have completed the simple control. For testing this we need a Silverlight Application project. So create a silverlight application project and add that to our solution. Use the “Generate an HTML test page” option while creating this project.

Add the “SimpletControl” reference to the newly created siliverlight application project.

You need to add, the namespace in the Page.xaml, like this

xmlns:Simple=”clr-namespace:SimpleControl;assembly=SimpleControl”

Add the our new control also to the page.xaml

Now run the application, you can see a red circle inside a black rectangle.

Hope you all got some fair idea about the custom control development in silverlight. I have included complete screen shot, to just make sure everybody understand the flow.

You can download the complete source from here