Enviroment
Win 8, VS 2012, .NET 4, WPF, screen native resolution 1920x1080@96DPI
XAML
<Border BorderThickness="1" BorderBrush="Red" Width="20" Height="20">
<Border BorderThickness="1" BorderBrush="Blue" />
</Border>
The problem
The borders look fine when DPI is 96, but if I change the DPI to 120, the borders are no longer perfectly pixel aligned.
What I have tried
1) Setting the following properties - RenderOptions.EdgeMode="Aliased" SnapsToDevicePixels="True" UseLayoutRounding="True"
- on both borders, mitigates the anti-aliasing and bleeding issues from the higher DPI, but the inner border seems to have a 1px margin usually on the right and bottom sides.
2) The following code does not help to 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 under a guest Win 7 running in VirtualBox.
5) Edit - This looks a bit better, in that there is no inner margin, but the outer "border" is 2px 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 the borders to be pixel perfect without any inner margins or anti-alising/bleeding?
I cannot use code-behind to rework the borders sizes when DPI is other than 96. I must stick to XAML only, because I'm trying to create vector icons (based on XAML).
Bravo Microsoft - https://connect.microsoft.com/VisualStudio/feedback/details/798513/wpf-dpi-rendering-issues-with-two-borders
Yet again, this issue will not be addressed nor fixed.