2

我正在开发一个名为 Matrix2D 的用户控件，以在 ax,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" 不会改变任何东西。

更新

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

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

来自WPF 应用程序中的像素捕捉（在@Nicolas Repiquet 的回答中）

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

4

1 回答 1

1

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

尝试这个 ：

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

UIElement.SnapsToDevicePixels 属性

编辑

“要正确居中图像，如果图像的像素宽度和高度是偶数，则容器的宽度和高度应为偶数。如果图像的像素宽度和高度为奇数，则包含元素的宽度和高度也应为奇数。”来自WPF 应用程序中的像素对齐

于 2014-02-13T16:26:23.617 回答