Question

Following problem. I just tried to draw little things with C#. I would like to do this with a Canvas. But even without Canvas the lines are shown blurry. The simplest thing, which already fails in a simple demo project, is following code:

<UserControl x:Class="Drawing.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Line Y1="1" Y2="300" StrokeThickness="1" 
              Stroke="Black" Margin="10 0 0 0"/>
    </Grid>
</UserControl>

This line is just shown blurry. I have tried so much, but i can’t figure out how to achieve crisp and one pixel wide lines.

I tried following things:

• UseLayoutRounding="True"
• I tried the pixel snapper class – provided here – which doesn’t work for me, either. Here the answer of Xavier Poinas (thread), who has obviously the same problem and also failed with this custom pixel snapper: “The coordinates I seem to understand that this class works by snapping the bounds of an item to round pixels, but the coordinates I use are already integers, and in the case of a path, snapping the bounds might not mean that the contents fall on round pixels either.”)

It would be good, if a solution was found, that allows me to snap lines, which are hold by a Canvas.

The reason for this is: for technical reasons we needed a borderless OOB application, which implements a custom border (resizing) and also a custom application bar, which contains the minimize, maximize and close items. I just tried draw these icons by hand, via lines etc.:

Is there maybe an easier way? I just don’t want to use image resources. Thanks!

Any help would be greatly appreciated.

Answer 1

The coordinates are points between pixels.

The blurry line you’re seeing is a result of the render engine trying to spread the drawing equally between both pixels that a 1px line would cover with this being the case.

This allows an engine to work from 0,0 to maxX,maxY and still use partial pixel rendering.

add 0.5 to your coords and it will appear sharp as a tack.

Or translate to 0.5,0.5