Question

我正在开发一个名为Matrix2D的UserControl，以在x，y自定义图形中显示2维矩阵点。

奇怪的是，如果我将自动设置为宽度/高度，将列/行设置为包含此Matrix2D控件的网格，如下所示：

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

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

Expected result - with clean pixels

如果我设置HorizontalAlignment =“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>

虽然，如果我没有设置自动到网格也没有设置对齐，如下所示：

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

我得到了这个模糊的结果：

Blur result

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

这是当前版本：

<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”的技巧，但结果是近似的，因为这是一个科学图形我需要它是准确的。您可以检查此结果的角落是否准确：

Not accurate result

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

Not accurate result

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

2D图形矩阵模糊

1 个答案:

修改