How can I draw a Polyline (in WPF) without anti-aliasing? [closed] - wpf

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am trying to draw a polyline without anti-aliasing.
I think the answer may have something to do with setting the EdgeMode, but I've tried on various elements and cannot get a good result:
RenderOptions.SetEdgeMode(???, EdgeMode.Aliased)
Let's start from the ground up, because it seems like there are potentially a few places where something needs to be changed.
The polyline is drawn onto a StreamGeometry:
using (StreamGeometryContext gc = virtGeom.Open())
{
gc.BeginFigure(firstPoint, false, false);
gc.PolyLineTo(virtPoints, true, true);
}
That is then drawn into the DrawingContext of a DrawingVisual, which is eventually rendered to a RenderTargetBitmap which serves as the source for an Image.
Any ideas appreciated!
A complete example, that demonstrates the antialiasing, is shown below. This does not include any attempt to resolve it as various attempts to use SetEdgeMode produced no improvement.
MainWindow.xaml
<Window x:Class="Antialias.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Antialias"
mc:Ignorable="d"
Title="MainWindow" Width="800" Height="400" Background="#FFCFCFCF" MouseDown="Window_MouseDown">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image x:Name="Img" Width="320" Height="320"/>
<Image x:Name="Img2" Width="320" Height="320" Grid.Column="1"/>
</Grid>
</Window>
MainWindow.xaml.cs
using System.Collections.Generic;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
namespace Antialias
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
int w = (int)Img.Width;
int h = (int)Img.Height;
// Create RenderTargetBitmap and assign as image source
RenderTargetBitmap rtb = new RenderTargetBitmap(w, h, 96, 96, PixelFormats.Pbgra32);
Img.Source = rtb;
DrawingVisual dv = new DrawingVisual();
StreamGeometry geom = new StreamGeometry();
Pen pen = new Pen(Brushes.Red, 20)
{
StartLineCap = PenLineCap.Round,
EndLineCap = PenLineCap.Round,
LineJoin = PenLineJoin.Round
};
// Draw a simple line from top left to bottom right
Point startPoint = new Point(0, 0);
List<Point> points = new List<Point>()
{
new Point(w, h)
};
using (StreamGeometryContext gc = geom.Open())
{
gc.BeginFigure(startPoint, false, false);
gc.PolyLineTo(points, true, true);
}
// Apply white background and then draw geometry
using (DrawingContext dc = dv.RenderOpen())
{
dc.DrawRectangle(Brushes.White, null, new Rect(0, 0, w, h));
dc.DrawGeometry(null, pen, geom);
}
// Render to RTB
rtb.Render(dv);
// Part 2: Cut a clip (20 x 20) from the rendered bitmap and zoom in (using NearestNeighbor)
CroppedBitmap cbmp = new CroppedBitmap(rtb, new Int32Rect(0, 0, 20, 20));
RenderOptions.SetBitmapScalingMode(Img2, BitmapScalingMode.NearestNeighbor);
// Apply the zoomed sampled to the second image
Img2.Source = cbmp;
// Look for antialiasing (pixels part way between red and not white)
}
}
}

Answer 1

The obvious candidate for having the EdgeMode set to Aliased is the DrawingVisual, but setting it seemed to make no difference:
// This had no effect!
RenderOptions.SetEdgeMode(dv, EdgeMode.Aliased);
DrawingVisual has a protected property VisualEdgeMode, which presumably should have been set by calling the above. During debugging, I put a watch on the property and found it was not being set!
As it's a protected property you cannot set it directly, but you can create a subclass and do it that way. In the end, this is what worked for me:
class DrawingVisualAliased : DrawingVisual
{
public DrawingVisualAliased() : base()
{
VisualEdgeMode = EdgeMode.Aliased;
}
}
Not sure if this is the best way. It seems like the property should be set by calling RenderOptions.SetEdgeMode, so maybe there's something else not quite right.
Thanks to #Rekshino for pushing me to create an example. It certainly helped to be able to work on a very simplified version of the problem, with a clear visual representation of it.