1

I'm puzzled.

I have created a PNG image that to be a divider in my application display and the image is 3 pixels high like this:

enter image description here

However when I display it on my C# WPF window and run it, the divider is shown to be about 4 pixels instead, with the colours being off.

Code:

<StackPanel Height="3">
    <StackPanel.Background>
        <ImageBrush ImageSource="Assets/divider.png" Stretch="None"
            AlignmentX="Left" AlignmentY="Top" Viewport="0,0,20,3" 
            ViewportUnits="Absolute" TileMode="FlipX" />
    </StackPanel.Background>
</StackPanel>

Output and Zoom:

enter image description here

What I've thought would be that the image is "stretched" (despite Stretch="None") or there is some mechanism to optimize the image, so I did away with the image and wrote it with 3 rectangles with the same color and 1 pixel height each like this:

<StackPanel Height="3" Orientation="Vertical">
    <Rectangle Fill="#484848" Height="1" />
    <Rectangle Fill="#222" Height="1" />
    <Rectangle Fill="#484848" Height="1" />
</StackPanel>

However the results were similar: 4 pixels and colours run off (not exact colours as specified):

enter image description here

Other than pixels being off, the colours are off too. My colours are supposed to be #484848, #222222, #484848. When displayed on the WPF window, the shades goes off a little (too many shades of grey!)

I need the separator to fill the window with too as the window gets resized. I'm a perfectionist and I want that 3 pixel height separator to be pixel perfect. Any solution to solve that problem?

mauris
  • 42,982
  • 15
  • 99
  • 131
  • This is just a guess, but it may have something to do with WPF's anti-aliasing. See this question: http://stackoverflow.com/questions/1738956/disabling-antialiasing-on-a-wpf-image. Or this one: http://stackoverflow.com/questions/5585082/how-to-turn-off-the-anti-aliasing-in-wpf-shapes. – Brian Snow Nov 08 '12 at 14:20
  • Have you tried setting `SnapsToDevicePixels` to true ? Edit : @BrianSnow was quicker than me ! – Sisyphe Nov 08 '12 at 14:22
  • Tried: Pixel count is correct but the colours are still off. – mauris Nov 08 '12 at 14:24

1 Answers1

0

With thanks to @Brian and @Sisyphe, I am able to display the lines properly. However this is still a solution done through Rectangle displays and I reckon there's a better solution.

Here's my current solution:

<StackPanel HorizontalAlignment="Stretch" Height="3">
    <Rectangle Fill="#484848" Height="1" RenderOptions.EdgeMode="Aliased" />
    <Rectangle Fill="#222222" Height="1" RenderOptions.EdgeMode="Aliased" />
    <Rectangle Fill="#484848" Height="1" RenderOptions.EdgeMode="Aliased" />
</StackPanel>
mauris
  • 42,982
  • 15
  • 99
  • 131