2D 图形矩阵模糊

Question

我正在开发一个名为 Matrix2D 的用户控件，以在 x,y 自定义图形中显示二维矩阵点。

奇怪的是，如果我将 Auto 设置为 Width/Height 列/行到包含此 Matrix2D 控件的 Grid，如下所示：

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

我得到了预期的结果（干净的像素）：

如果我设置 Horizo​​ntalAlignment="Left" 和 VerticalAlignment="Top"，我也有预期的结果，如下所示：

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

虽然，如果我没有将 Auto 设置为 Grid，也不会设置 Alignment，如下所示：

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

我得到了这个模糊结果：

我已经测试了几种开发此用户控件的方法，结果总是相同。

这是当前版本：

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

在后面的代码中： 我填充了一个 WriteableBitmap，然后用它设置了 populationImg.Source。

已经测试了设置 RenderOptions.BitmapScalingMode="NearestNeighbor" 的技巧，但结果是近似的，因为这是一个科学图形，我需要它是准确的。您可以检查这个结果的不准确的角落：

在更小的图形中更加明显：

设置 RenderOptions.EdgeMode="Aliased" 不会改变任何东西。

更新

---

这解释了为什么我有这种模糊效果：

要使图像正确居中，容器应具有均匀的宽度， 高度如果图像的像素宽度，高度是偶数。如果图像有 奇数像素宽度，高度，包含元素也应该有 奇数宽高。

来自Pixel Snapping in WPF Applications（在@Nicolas Repiquet 的回答中）

虽然，它实际上并没有帮助我解决我的问题。我希望我的用户控件独立于它的容器。任何想法如何做到这一点？

Answer 1

我的猜测是您在父容器中的控件位置未与像素网格对齐（即，您的控件在屏幕上的 x 和 y 坐标不是像素的整数）。

试试这个：

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

UIElement.SnapsToDevicePixels Property

编辑

---

"为了使图像正确居中，如果图像的像素宽度、高度为偶数，则容器的宽度、高度应为偶数。如果图像的像素宽度、高度为奇数，则包含元素的宽度、高度也应为奇数，高度。”来自Pixel Snapping in WPF Applications