为什么wpf中边框的边框和边框的背景之间有差距？ [复制]答案

【问题标题】：Why is there a gap between border's border and border's background in wpf? [duplicate]为什么wpf中边框的边框和边框的背景之间有差距？ [复制]
【发布时间】：2017-04-03 17:22:40
【问题描述】：

以下代码：

<Window x:Class="WpfApp1.MainWindow"
        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"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Border Background="Red">
            <Border BorderThickness="10" BorderBrush="Black" Background="Black"/>
        </Border>
    </Grid>
</Window>

产生以下输出（.NET 4.6.1，Windows 10）：

红线不应该在那里。它似乎是第二个边框的边框和第二个边框的背景之间的差距。我尝试将SnapsToDevicePixels 设置为True，但它没有改变。

更新

正如答案中所建议的，RenderOptions.EdgeMode="Aliased" 似乎解决了这个问题。但实际上我认为它更好地突出 WPF 中的一个错误。因为现在，下面的代码：

<Window x:Class="WpfApp1.MainWindow"
        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"
        RenderOptions.EdgeMode="Aliased"
        SnapsToDevicePixels="True"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Border Background="Red">
            <Border Margin="10" BorderThickness="1" BorderBrush="Black">
                <Grid Background="Black"/>
            </Border>
        </Border>
    </Grid>
</Window>

产生以下输出：

【问题讨论】：

我在 WPF 项目中复制了你的代码，但我没有得到那个红线，你可能有其他东西改变了你的视觉效果。我想你没有包含所有代码来简化问题。
我在 VS2015 中复制到一个全新的项目中，它显示在那里。编辑：仅设计模式，当我运行它时没有红色。
您使用的是 W10，我想@AdamSills 也是，我使用的是 W7，所以它与操作系统如何处理视觉效果有关，我对那个领域一无所知
@Tuco Win8 在我的工作机器上是我的第一个测试（它显示的设计器，运行它没有）。我刚刚在我的家用机器 Win10 上运行，它表现出相同的行为。一定有其他事情发生；我明白为什么你可能会在设计器中看到它，但是我的 Win10 机器（RDP，但选择了完整的经验）我没有看到它。
尝试使用 SnapToDevicePixels 和 UseLayoutRounding。 WPF 中的布局都是浮点数。它是任意单位，而不是像素，因此您可以获得四舍五入和怪异。其目的是使其可任意扩展，但由于它总是被量化为像素以进行显示（具有抗锯齿和其他恐怖功能），因此在许多情况下，这些大而笨重的屏幕像素会让人吃不消。

标签： wpf

【解决方案1】：

这可能是因为设计者使用快速算法来渲染视图，并且在运行可执行文件时使用了高质量的算法。

设置 RenderOptions.EdgeMode="Aliased" 似乎迫使设计师以高质量绘制。

<Window.RenderTransform>
    <ScaleTransform ScaleX="1.5" ScaleY="1.5"/>
</Window.RenderTransform>
<Grid RenderOptions.EdgeMode="Aliased">
    <Border Background="Red">
        <Border BorderThickness="10" BorderBrush="Black" Background="Black"/>
    </Border>
</Grid>

回答你问题的第二部分：

这是因为您的窗口没有与屏幕对齐，只是内容被转换为设备像素。如果窗口的位置被捕捉到屏幕上，它将起作用。左右滚动/移动它，您会看到它有时会正确捕捉。我认为这是一个设计问题，即在 MeasureOverride 和 ArrangeOverride 周期完成后的后处理周期中完成捕捉，而不是在父子调用之间进行捕捉。如果它应该捕捉容器边框并将适当的可用空间发送到度量覆盖中的网格。然后 WPF 将正确支持部分布局的捕捉。

【讨论】：