Rendering sharp lines in WPF

c#, drawing, path, wpf, xaml

Solution

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>

Problem

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): 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?

Original source