如何强制WPF控件的平滑渲染？

Question

我正在创建一个简单的WPF应用程序，它应该在可滚动区域内组合几个图像。这些图像应该没有边框，只需正确定位就不会有问题。

当我启动应用程序时，所有内容都按预期呈现。但是当我开始滚动时，图像之间会出现一些（白色）边框。 （见截图）

当我在ScrollViewer内开始缩放/缩放时，我认为会出现同样的问题。

所以我的问题是，如何避免这样的边界，使用WPF应用程序，尤其是在ScrollViewer内？

以下代码应该足以重现问题：

<Window x:Class="Test.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <ScrollViewer HorizontalAlignment="Stretch" Name="scrollViewer1" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
        <Grid>
            <Grid Background="Black" Width="500" Height="500" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Grid Background="Black" Width="500" Height="500" Margin="500,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Grid Background="Black" Width="500" Height="500" Margin="500,500,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <Grid Background="Black" Width="500" Height="500" Margin="0,500,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
        </Grid>
    </ScrollViewer>
</Grid>

Answer 1

答案是明确为具有此类边框的控件设置RenderOptions.EdgeMode至Aliased。

对于我上面的例子，代码看起来像这样：

<Window x:Class="Test.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <ScrollViewer HorizontalAlignment="Stretch" Name="scrollViewer1" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
        <Grid>
            <Grid Background="Black" Width="500" Height="500" VerticalAlignment="Top" HorizontalAlignment="Left" RenderOptions.EdgeMode="Aliased"/>
            <Grid Background="Black" Width="500" Height="500" Margin="500,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" RenderOptions.EdgeMode="Aliased"/>
            <Grid Background="Black" Width="500" Height="500" Margin="500,500,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" RenderOptions.EdgeMode="Aliased"/>
            <Grid Background="Black" Width="500" Height="500" Margin="0,500,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" RenderOptions.EdgeMode="Aliased"/>
        </Grid>
    </ScrollViewer>
</Grid>