WPF, Polygon and Poly

Question

I'm building an aplication C# with WFP, I'm trying to draw shapes, each shape belongs to a class and such class contains a Polygon for the outer shape, and 1 to 3 Polylines to make it look like real 2D object, this way I can change some properties of the whole shape on the fly (Colors, Visibility, etc) I must say that some Polylines are created by a loop according to the desired height and width

but righ now I'm facing a probem with the render of some PolyLines If you use paint to represent the points extracted at the end of the debugging, points are in correct location (x,y) but the final picture is not too accurate , I want the final result to look like bitmap pixels, without shadow, blur or edge effects..

this is an example (Panel is the name given to the grid)

 public partial class Window1 : Window {

    private Polyline zigzag;

    public Window1() {
        InitializeComponent();
        PointCollection points = new PointCollection();
        ArrayList axisX = new ArrayList();
        ArrayList axisY = new ArrayList();

        zigzag = new Polyline();
        zigzag.Stroke = Brushes.Black;

        int count = 1;
        Boolean increase = true;
        //the number 60 in this loop is to represent the width of the main shape
        for (int p = 3; p < 60 - 3; p++) {
            if (count == 1) {
                axisX.Add(p);
                axisY.Add(5);
                increase = true;
            }
            if (count == 4) {
                axisX.Add(p);
                axisY.Add(2);
                increase = false;
            }
            if (increase) {
                count++;
            }
            else {
                count--;
            }
        }

        for (int i = 0; i < axisX.Count; i++) {
            //the number 10 is to represent the position where the Poliline is to be placed
            int tmpx = 10 + (int)axisX[i];
            int tmpy = 10 + (int)axisY[i];
            points.Add(new Point(tmpx, tmpy));
        }

        this.zigzag.Points = points;
        RenderOptions.SetEdgeMode(Panel , EdgeMode.Aliased);
        Panel.Children.Add(zigzag);

    }

}

The picture shows the drawn zigzag on above, and the way it should look like below

Answer 1

The coordinate system has its origin on the top left corner of the top left pixel. To hit the pixel in the middle, you must specify coordinates like 3.5 etc.

I shortened your code a little, I hope you don't mind. (Still does the same, just less lines)

PointCollection points = new PointCollection();

zigzag = new Polyline();
zigzag.Stroke = Brushes.Black;

for (int i = 1; i < 60 - 3; i = i + 3)
{
    points.Add(
        new Point(
            10.5f + i,
            10.5f + (i % 2 == 0 ? 2 : 5)
         ));
}

this.zigzag.Points = points;
RenderOptions.SetEdgeMode(Panel1, EdgeMode.Aliased);
Panel1.Children.Add(zigzag);

I increased the translation from 10 to 10.5 in both directions. The fractional part should be 0.5 to indicate the center of the pixel.