WPF Blurry Pixels

Today I needed to create a small control for the status bar of my app. It needs to be small to show the pass/fail status of 96 items.

I had an ItemControl displaying the 96 items as 4 rows of 24. I started with this code but it was horribly blurry and irregularly spaced.

<Rectangle Width="4" Height="4" Margin="1,1,0,0" Fill="Green" />

 

To get it to display nicely with no blurry edges I changed the code to this...

<Rectangle Width="3.84" Height="3.84" Margin="0.96,0.96,0,0" Fill="Green" />

 

 

 

 

 

It's because WPF assumes 96 pixels per inch. By changing the size to be multiple of 0.96 you can trick WPF into drawing complete pixels.