2D Graphic Matrix Blur

Question

I'm developing an UserControl named Matrix2D to display 2 dimension matrix points in a x,y custom graphic.

Strange thing is, if I set Auto to Width/Height the columns/rows to the Grid that contains this Matrix2D control, like this:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>

    <elem:Matrix2D x:Name="matrix2"
                   Grid.Row="0"
                   Grid.Column="0"
                   MaximumX="255"
                   MaximumY="127"
                   ZoomScale="1" />

</Grid>

I get the expected result (clean pixels):

I have also the expected result if I set HorizontalAlignment="Left" and VerticalAlignment="Top", like this:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
        <elem:Matrix2D x:Name="matrix2"
                       Grid.Row="0"
                       Grid.Column="0"
                       MaximumX="255"
                       MaximumY="127"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       ZoomScale="1" />
</Grid>

Although, If I don't set Auto to Grid neither set the Alignment, like this:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
        <elem:Matrix2D x:Name="matrix2"
                       Grid.Row="0"
                       Grid.Column="0"
                       MaximumX="255"
                       MaximumY="127"
                       ZoomScale="1" />
</Grid>

I get this blur result:

I already test several ways of developing this user control, with always the same result.

This is the current version:

<UserControl x:Class="Matrix2D"
             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"
             d:DesignHeight="300"
             d:DesignWidth="300"
             mc:Ignorable="d">
    <Grid Background="White">
        <Image x:Name="populationImg" Stretch="None" />
    </Grid>
</UserControl>

In code behind: I populate a WriteableBitmap and then I set populationImg.Source with it.

Already test the trick of setting RenderOptions.BitmapScalingMode="NearestNeighbor", but the result is approximate, and since this a Scientific Graphic I need that it be accurate. You can check in the corners of this result that is not accurate:

Even more visible in smaller graphic:

Setting RenderOptions.EdgeMode="Aliased" doesn't change anything.

Update

---

This explains why I have this blur effect:

To properly center an image, the container should have an even width, height if the image's pixel width, height are even. If the image has an odd pixel width, height, the containing element should also have an odd width, height.

from Pixel Snapping in WPF Applications (In @Nicolas Repiquet answer)

Although, it didn't actually helped me to solve my problem. I would like that my user control be independent of its container. Any ideas how to do this?

Answer 1

My guess is that your control position within the parent container is not aligned to the pixel grid (ie, the x and y coordinates of your control on the screen is not a round number of pixels).

Try this :

<elem:Matrix2D SnapsToDevicePixels="true" ... />

UIElement.SnapsToDevicePixels Property

EDIT

---

"To properly center an image, the container should have an even width, height if the image's pixel width, height are even. If the image has an odd pixel width, height, the containing element should also have an odd width, height. " from Pixel Snapping in WPF Applications