Home/ Questions/Q 473239
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T00:10:00+00:00

If I render the following: <Grid> <Canvas SnapsToDevicePixels=True> <Path Fill=#FF000000 SnapsToDevicePixels=True Data=M 0.00,0.00 L

  • 0

If I render the following:

<Grid>
  <Canvas SnapsToDevicePixels="True">  
    <Path Fill="#FF000000" SnapsToDevicePixels="True" Data="M 0.00,0.00 L 2.50,0.00 0.00,10.00 " />
    <Path Fill="#FF260014" SnapsToDevicePixels="True" Data="M 2.50,0.00 L 7.50,0.00 2.50,10.00 0.00,10.00 " />
    <Canvas.RenderTransform>
      <ScaleTransform ScaleX="{Binding ElementName=slider,Path=Value}" ScaleY="{Binding ElementName=slider,Path=Value}" />
    </Canvas.RenderTransform>
  </Canvas>
  <Slider x:Name="slider" Minimum="0" Maximum="50" Value="30"/>
</Grid>

I get this result (Kaxaml):

enter image description here

Notice the thin white line between the two shapes. I searched around and found out this has to do with pixel alignment. I would expect that settings SnapsToDevicePixels="True" would be enough to get rid of the line, but this doesn’t work!

Any ideas how to get rid of the white line?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try turning edge aliasing on with RenderOptions, like this (see Grid properties)

    <Grid RenderOptions.EdgeMode="Aliased">
  <Canvas SnapsToDevicePixels="True">  
        <Path Fill="#FF000000" SnapsToDevicePixels="True" Data="M 0.00,0.00 L 2.50,0.00 0.00,10.00 " />
        <Path Fill="#FF260014" SnapsToDevicePixels="True" Data="M 2.50,0.00 L 7.50,0.00 2.50,10.00 0.00,10.00 " />
        <Canvas.RenderTransform>
          <ScaleTransform ScaleX="{Binding ElementName=slider,Path=Value}" ScaleY="{Binding ElementName=slider,Path=Value}" />
        </Canvas.RenderTransform>
  </Canvas>

  <Slider x:Name="slider" Minimum="0" Maximum="50" Value="30"/>
</Grid>
    • 0