WPF Anti-aliasing edge of turned elements

Question

I need Anti-alias edge of my turned rectangle more than normally.

My code is like this:

    <Rectangle Margin="20,20,147,135" Fill="#FFCAD2DE" RenderOptions.EdgeMode="Unspecified">
        <Rectangle.Effect>
            <DropShadowEffect BlurRadius="4" ShadowDepth="2" Opacity=".5"/>
        </Rectangle.Effect>
        <Rectangle.RenderTransform>
            <RotateTransform CenterX="0" CenterY="0" Angle="6" />
        </Rectangle.RenderTransform>
    </Rectangle>

I change the angle slowly programmatically...

But the result is aliased in some angles like below image (left side). I want edge of my rectangle be fully smooth in all angles like the below image (right side).

EDIT1:

I use .NET 3.5

I think you'll have to provide a better code example. If I copy-paste your code into an empty WPF application, it is very much antialiased: imgur.com/smOP0JT — vesan
@vesan thank u for your test, use .Net 3.5 for your empty WPF application then rebuild the project and run... What you see? I wrote an answer. That steps helped me alot. — Ramin Bateni
tested with .NET 3.5 and you're right, it looks a lot worse. Glad you found a solution, nice writeup in your answer — vesan

Ramin Bateni Ramin Bateni · Accepted Answer · 2015-08-26T23:21:15

The following steps can help

A)

First i moved my project from .NET 3.5 to .Net 4.5 without any changes in it and the result was:

It looks like very smoother

B)

Layout Rounding:

What is Layout Rounding and how to use it in WPF 4

When an object edge falls in the middle of a pixel device, the DPI-independent graphics system can create rendering artifacts, such as blurry or semi-transparent edges.

Previous versions of WPF included pixel snapping to help handle this case. Silverlight 2 introduced layout rounding, which is another way to move elements so that edges fall on whole pixel boundaries.

WPF now supports layout rounding with the UseLayoutRounding attached property on FrameworkElement. Drawing objects on pixel boundaries eliminates the semi-transparent edges that are produced by anti-aliasing, when an edge falls in the middle of a device pixel. When you use layout rounding, the layout system creates small variations in the column or row measurements to avoid sub-pixel rendering.

The following code uses UseLayoutRounding attached property set on a single pixel-width line. You can see the difference that layout rounding makes when you resize the window slowly.

<StackPanel Width="150" Margin="7" Orientation="Horizontal">
  <!-- Single pixel line with layout rounding turned OFF.-->
  <Rectangle UseLayoutRounding="False" Width="45.6" Margin="10" Height="1" Fill="Red"/>

  <!-- Single pixel line with layout rounding turned ON.-->
  <Rectangle UseLayoutRounding="True" Width="45.6" Margin="10" Height="1" Fill="Red"/>
</StackPanel>

C)

SnapsToDevicePixels

Note

You should set UseLayoutRounding to true on the root element. The layout system adds child coordinates to the parent coordinates; therefore, if the parent coordinates are not on a pixel boundary, the child coordinates are also not on a pixel boundary.

If UseLayoutRounding cannot be set at the root, set SnapsToDevicePixels on the child to obtain the effect that you want.

WPF Anti-aliasing edge of turned elements

2 Answers

A)

B)

C)