Question

I’m designing a UI in Visual Studio 2010, and I’ve come across a slight problem. I’m fairly new to XAML and this method of design, so this might be a rookie mistake. I’ve looked around but can’t seem to find reference to a similar problem.

Basically, I have a grid with 2 rows, one of which contains a stackpanel and 5 columns. The stackpanel sits behind the columns and is used to paint the background of the entire row. When I add a background colour to the other row, I get an annoying line at the top of the stackpanel which just looks out of place. I’ve tried several things (showGridLines = false, transparent borders etc) but cannot seem to get rid of it. The best way to show it is through an image:

See http://img227.imageshack.us/img227/2220/tempym.jpg

One oddity I’ve noticed is that when I resize the window, at certain points the line disappears. Obviously this is not a solution (not least because it’s going to be run full screen), but adds to the mystery of the line…

This is a trivial problem, but it is annoying me and will continue to do so until I can get rid of it, so any help would be appreciated. I’ve omitted the xaml for simplicity, but will post if required.

Answer 1

Based on the oddity you noticed, try setting SnapsToDevicePixels to true on the grid or window. Sounds like the borders are falling in between pixel boundaries and is being anti-aliased.

Or rather, if you’re using .NET 4.0, use UseLayoutRounding instead.