SnapsToDevicePixels position artifacts.

Question

0.00/5 (No votes)

See more:

I draw lines and some lines skip pixels leaving them empty.

It is a serious problem when i wanna create cells.

My goal is to draw a grid.

How to solve the problem?

Screenshot[^]

XML

<Canvas Background="Black" RenderOptions.EdgeMode="Aliased" SnapsToDevicePixels="True">
        <Line X1='30' Y1='30' X2='100' Y2='30' Stroke="White"/>
        <Line X1='30' Y1='31' X2='100' Y2='31' Stroke="White"/>
        <Line X1='30' Y1='32' X2='100' Y2='32' Stroke="White"/>
        <Line X1='30' Y1='33' X2='100' Y2='33' Stroke="White"/>
        <Line X1='30' Y1='34' X2='100' Y2='34' Stroke="White"/>
        <Line X1='30' Y1='35' X2='100' Y2='35' Stroke="White"/>
        <Line X1='30' Y1='36' X2='100' Y2='36' Stroke="White"/>
        <Line X1='30' Y1='37' X2='100' Y2='37' Stroke="White"/>
        <Line X1='30' Y1='38' X2='100' Y2='38' Stroke="White"/>
    </Canvas>

The next code tries to draw a grid, but the grid comes to be messed as distances between lines differ due to DPI independence:

Screenshot[^]

C#

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        this.Loaded += MainWindow_Loaded;
    }

    Canvas canvas;

    void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        canvas = new Canvas();
        canvas.Background = Brushes.Black;
        this.Content = canvas;

        RenderOptions.SetEdgeMode(canvas, EdgeMode.Aliased);
        canvas.SnapsToDevicePixels = true;

        Shape();
    }

    double i = 0;

    private void Shape()
    {
        canvas.Children.Clear();

        for (double i = 0; i < 20; i += 2)
        {
            Line line = new Line();
            line.X1 = 30;
            line.Y1 = 30 + i;
            line.X2 = 100;
            line.Y2 = 30 + i;
            line.Stroke = Brushes.White;
            line.StrokeThickness = 1;

            canvas.Children.Add(line);
        }
    }
}

Posted 4-Aug-15 2:36am

Ziya1995

Updated 4-Aug-15 22:18pm

v12

Add a Solution

Comments

Kornfeld Eliyahu Peter 4-Aug-15 9:46am

Why not to draw a filled rectangle instead of 8 parallel lines?

Ziya1995 4-Aug-15 10:04am

My end goal is to draw a grid by many 1 pixel lines.
it is done so to show the problem for plain.

Kornfeld Eliyahu Peter 4-Aug-15 10:05am

The problem (my) that I can't see any problem...
You should post some code that reproduces the problem without any problem...

Ziya1995 4-Aug-15 10:08am

Screenshot:
https://drive.google.com/file/d/0B4MmPdhmZzQAOGpXMUZEdDNCMlE/view?usp=sharing

The problem is i can't make a grid by 1 pixel lines nice and crisp, some lines skip leaving empty places and it results in a messed grid.

I just wanna draw a grid, how can i do it?
WPF is one the best GUI frameworks and i can't draw just a grid, how can i?

Kornfeld Eliyahu Peter 4-Aug-15 10:21am

can you change your DPI - for test - to 96?
what is your current DPI?

Ziya1995 4-Aug-15 10:24am

It is exactly what i am gonna do.
More precisely i am gonna use scale-transform to set DPI for my WPF app as it is the sole way to do so.

Have you got what is a problem?
Is there no other way than to try the option for setting DPI?

Kornfeld Eliyahu Peter 4-Aug-15 13:37pm

I can't check it now but I think the problem is SnapsToDevicePixels.
WPF has a device independent pixel size that fitted to 96 DPI resolution. The rendering engine should fit it to your actual device resolution automatically and I thing that try to snap it to the true pixels cause a problem...

Ziya1995 4-Aug-15 14:58pm

> that try to snap it to the true pixels cause a problem...
SnapsToDevicePixels has nothing to do with DPI, it just aligns it.
Yes, i think the problem's cause is that.

How to solve the problem?
If the chance is only to try scale transform to draw by device pixels, let me know.
Why does it render a shape differently at different positions?

Kornfeld Eliyahu Peter 5-Aug-15 2:30am

You may solve the problem by removing the SnapsToDevicePixels attribute (or set to false)...
Also read here: https://msdn.microsoft.com/en-us/library/windows/desktop/ff684173(v=vs.85).aspx

Ziya1995 5-Aug-15 2:46am

No, i can't.
If you can do it in some magic way, you can take my code, fix it and post.

Kornfeld Eliyahu Peter 5-Aug-15 2:53am

Unfortunately I'm at work and left my magic wand at home...
More unfortunately I can not reproduce your problem at any DPI so I can not fix it too...You have to do the work...

Ziya1995 5-Aug-15 3:04am

Have you checked the C# code i gave in my question?

Kornfeld Eliyahu Peter 5-Aug-15 3:12am

Yes. And it come perfectly spaced, complete lines, regardless of the DPI...
That's the reason I do not post a solution, but try to give hints I think may be of help...

Ziya1995 5-Aug-15 4:19am

Have you seen the screenshot of XAML?
It shows 2 empty left lines.
But as i understand you say they are not empty.

In the C# code you can see a horizontal grid, but distances between lines differ, but you say they are perfectly spaced, it means distances between them is same by 1 pixel.
Here is the screenshot of C# where you can see different distances between lines:
https://drive.google.com/file/d/0B4MmPdhmZzQAR2RqTXd4SUdGOGc/view

If you get the same image, it is what i call a bug.

I doubt it is true, i feel like you get the same result, but call it right.

Kornfeld Eliyahu Peter 5-Aug-15 4:34am

That's what I explaining to you: I have properly spaced lines when I run your code, regardless of the changing of the screen DPI...That's the reason I can not actually fix your problem...
https://drive.google.com/file/d/0BwcuuH-W56sGUnVxdEwwclVWQ3c/view

Ziya1995 5-Aug-15 4:54am

Got it, it may mean WPF doesn't get affected by changing DPI, may be it takes the same DPI, not the change one. I have read somewhere that to change DPI just by clicking a button is not enough.

By anyway i am gonna try drawing by pixels using scale-transform to draw in device dependent pixels.
I have already managed to get a grid by adding additional double values, when i make it work automatic for all the DPI resolutions, i post the solution.

Kornfeld Eliyahu Peter 4-Aug-15 9:56am

And by the way - I can't see the skips, so maybe a screenshot will do good...

Ziya1995 4-Aug-15 10:07am

It is because DPI is different on different devices.
Screenshot:
https://drive.google.com/file/d/0B4MmPdhmZzQAOGpXMUZEdDNCMlE/view?usp=sharing

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ziya1995 · Accepted Answer · 2015-08-05T02:31:00

The next code solves the problem making shapes to be drawn in physical screen pixels:

C#

canvas.RenderTransform = new MatrixTransform(
PresentationSource.FromVisual(this).CompositionTarget.TransformFromDevice);

The fixed version of the code i wrote in the question:

C#

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.Loaded += MainWindow_Loaded;
        }

        Canvas canvas;

        void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            canvas = new Canvas();
            canvas.Background = Brushes.Black;
            this.Content = canvas;

            RenderOptions.SetEdgeMode(canvas, EdgeMode.Aliased);
            canvas.SnapsToDevicePixels = true;

            canvas.RenderTransform = new MatrixTransform(
PresentationSource.FromVisual(this).CompositionTarget.TransformFromDevice);

            Shape();
        }

        double i = 0;

        private void Shape()
        {
            canvas.Children.Clear();

            for (double i = 0; i < 20; i += 2)
            {
                Line line = new Line();
                line.X1 = 30;
                line.Y1 = 30 + i;
                line.X2 = 100;
                line.Y2 = 30 + i;
                line.Stroke = Brushes.White;
                line.StrokeThickness = 1;

                canvas.Children.Add(line);
            }
        }
    }

Codeproject lags.

Source[^].