Home/ Questions/Q 8796051
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T23:31:58+00:00

I’m puzzled. I have created a PNG image that to be a divider in

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0