Search code examples
wpfantialiasing

WPF Anti-aliasing edge of turned elements

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).

enter image description here

EDIT1:

I use .NET 3.5

Solution

  • 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>

    enter image description here

    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.