Silverlight anti-aliasing woes

  • Article

I recently ran into an interesting problem. The designer in my team gave me a piece of XAML for my UI containing horizontal lines of the form:

 

<Rectangle Fill="#FFDADADA" Height="1"  …/>

 

I put this in the application and to our surprise, these lines showed twice as thick (2px) on my machine but looked fine on his. After researching this for a while I found it can happen when elements are not positioned on whole pixel boundaries. In this cases Silverlight has to do some anti-aliasing, which can result in additional pixels being rendered. For example, notice the difference between this rectangle when positioned at an integer and non-integer pixel positions (zoomed in):

 

<Rectangle Fill="Gray" Width="100" Height="4" Canvas.Top="40" Canvas.Left="20"/>

image

 

<Rectangle Fill="Gray" Width="100" Height="4" Canvas.Top="40.5" Canvas.Left="20"/>

image

 

So this was happening in my case and my 1 pixel line was becoming 2 pixels thick. However, the problem was still mystery to me because I only use integers for all the sizes and positions in the UI. Finally it dawned on me: I have some code to programmatically center a parent of this element on a canvas. When doing the math to center this, depending on the browser window size, I would get a non-integer position (which explained the variation across machines).

A simple Math.Round fixed the problem.