wpf Line stroke shown blurry

Question

I made a sample code in VS 2013 preview, I made a line inside a canvas with stroke color of white, but the line is shown so strangely like more thick and not white (almost gray). same sample I tried it in VS 2010 and it output well.

Can anyone tell me what's going on...?

<Canvas Width="200" Height="200" Background="Black">
    <Line X1="30" Y1="60" X2="90" Y2="60" Stroke="White" StrokeThickness="1"/>
    <Line X1="60" Y1="30" X2="60" Y2="90" Stroke="White" StrokeThickness="1"/>
</Canvas>

//EDIT when I change the line thickness to 2 or more then it shows perfectly white but with thickness of 2.

Answer 1

This is our old friend Pixel Snapping. WPF will use a similar technology to ClearType to draw lines when they fall on a pixel boundary. This is what you're seeing. The reason why it may change between versions of VS is that they can start your canvas in a different location.

Dave Relyea has a cool Pixel Snapping Control to help with just these problems.

Since his control was made for Silverlight, I'd change UserControl to Decorator for WPF purposes. Just change all references from Content to Child. That way you won't have to worry about a ControlTemplate being applied by somebody else.

Answer 2

Try to move it 0.5 pixel down, it may help

Answer 3

I found an excellent explanation at http://www.wpftutorial.net/DrawOnPhysicalDevicePixels.html