Enviroment
Win 8, VS 2012, .NET 4, WPF, native screen resolution 1920x1080 @ 96DPI
Xaml
<Border BorderThickness="1" BorderBrush="Red" Width="20" Height="20"> <Border BorderThickness="1" BorderBrush="Blue" /> </Border>
Problem
The borders look great when the DPI is 96, but if I change the DPI to 120, the borders will no longer be pixel aligned.
What i tried
1) By setting the following properties - RenderOptions.EdgeMode="Aliased" SnapsToDevicePixels="True" UseLayoutRounding="True" - at both borders, mitigates smoothing and bleeding problems from a higher DPI, but the inner border seems to have a 1px edge, usually on the right and bottom.
2) The following code does not work around the problem:
<Grid Width="20" Height="20"> <Border BorderThickness="1" BorderBrush="Red" /> <Border BorderThickness="1" BorderBrush="Blue" Margin="1" /> </Grid>
3) Using Rectangles instead of Borders has the same problem.
4) The problem also persists with the Win 7 guest running on VirtualBox.
5) Change . This looks a little better since there is no inner margin, but the outer border is 2 pixels thick:
<Canvas Width="20" Height="20"> <Polygon Points="0,0 20,0, 20,20, 0,20" StrokeThickness="1" Stroke="Red" RenderOptions.EdgeMode="Aliased" SnapsToDevicePixels="True" UseLayoutRounding="True" /> <Polygon Points="1,1 19,1, 19,19, 1,19" StrokeThickness="1" Stroke="Blue" RenderOptions.EdgeMode="Aliased" SnapsToDevicePixels="True" UseLayoutRounding="True" /> </Canvas>
Question (s)
How do I get borders for a perfect pixel without any internal margins or smoothing / bleeding?
I cannot use code to handle border sizes when the DPI is other than 96. I should only stick to XAML because I'm trying to create vector icons (based on XAML).