CODEWITHSUNDEEP
wpfxaml
Sabuncu
Sabuncu

Reputation: 5274

WPF dashed Rectangle shape does not render correctly

This is my XAML code (I have no code-behind):

<Canvas>
    <Line 
        X1="100" Y1="100"
        X2="200" Y2="100"
        Stroke="Black"
        StrokeDashArray="1 1"
        SnapsToDevicePixels="True"
        />
    <Rectangle Height="20" 
               Canvas.Left="101" 
               Canvas.Top="141" 
               Width="50" 
               Stroke="Black"
               StrokeThickness="1"
               StrokeDashArray="1 1"
               StrokeEndLineCap="Flat"
               StrokeDashOffset="1"
               SnapsToDevicePixels="True"
               />
</Canvas>

During design time, the Designer Window shows the following (which is correct):

enter image description here

But when I run the application, it gets rendered as follows:

enter image description here

As you can see, the line is fine but the rectangle is drawn as solid, although it should have a dashed stroke.

Why does this happen, and how can I fix this? I am on Windows 10 Pro, my screen resolution is 2560 x 1440, with a DPI setting of 96, and an effective DPI of 93.03. I am using the latest Expression Blend version as well as the latest Visual Studio 2017 Community Edition.

EDIT:

The problem is fixed, see Richardissimo's answer below. Final render:

enter image description here

Upvotes: 1

Views: 745

Answers (1)

Richardissimo
Richardissimo

Reputation: 5775

Fascinating. Answer is at the bottom...

I decided to set up a resource shared by both to be sure nothing funny was going on, and to help work through the various combinations I'm about to describe.

    <DoubleCollection x:Key="strokeDashArray">
        <system:Double>1</system:Double>
        <system:Double>1</system:Double>
    </DoubleCollection>

where

xmlns:system="clr-namespace:System;assembly=mscorlib"

and then used that on both the line and rectangle by changing them to use

    StrokeDashArray="{StaticResource strokeDashArray}"

The images in the question show the rectangle is grey but the line (in pixels) becomes "black white" (repeating).

What I found interesting was to change the values to "1 2": the line (in pixels) becomes "black white white" (repeating) but the rectangle becomes "black black white" (repeating).

Changing it to "2 1" makes the line "black black white"; but the rectangle becomes "black grey grey".

Changing it to "2 2" makes the line "black black white white" but the rectangle "black grey white grey".

So the Rectangle is definitely rendering it differently than the Line.

I thought it might be the fact that one was at X=100 and one at X=101, so the anti-aliasing might be offset; but changing 101 to 100 made no difference, and moving the rectangle so the top or bottom lines were aligned with the line also didn't help.

Neither did changing the StrokeDashOffset to 0.

Interestingly, changing the StrokeThickness of the rectangle to 1.1 made it a bit more "dotty"; but not consistently, so that's not a solution.

Got it: add this to the Rectangle:

RenderOptions.EdgeMode="Aliased"

Upvotes: 2

Related Questions