1

我的 C#/XAML Metro 应用程序中有一个页面，它使用EntranceThemeTransition. 在这个页面中，我有一些平铺Image的图形： 彼此紧密贴合以构建更大的图像。我确保将尺寸设为 5 的倍数，因此即使在不同的 DPI 下它们也能很好地适应。

由于默认值为，我希望 的每一步都UseLayoutRounding四舍五入到最近的像素。然而，这并没有发生，正如这个屏幕截图所示（注意两条细的绿色垂直线穿过应该是一个实心块）：trueEntranceThemeAnimation

在此处输入图像描述

这应该是一个无缝块，由 9 个图块（3 宽 x 3 高，每个图块 80x80 像素）组成。在垂直方向上，它们完美地结合在一起；但是当页面动画时，因为 X 方向正在动画并且并不总是 1 像素的倍数，所以我最终会在图块之间出现接缝（因为每个图像的 X 都是分数，所以每个图像都有两个图像在已经存在的顶部绘制具有 50% 不透明度的中间像素，从而导致总共 75% 的不透明度而不是 100%）。这是UseLayoutRounding应该防止的那种问题，但它根本没有帮助。

动画完成后，一切都会安定下来，一切都会完美排列。但是在动画期间，尤其是在动画停止之前，接缝非常明显。

我尝试UseLayoutRounding="true"在育儿层次结构的各个点显式设置，但没有帮助。

这是我的 XAML 的简化形式，它重现了该问题：

<Page x:Class="App1.Page1"
      UseLayoutRounding="True"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid Background="Green" UseLayoutRounding="True">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Canvas UseLayoutRounding="True">
            <Image Canvas.Left="80" Canvas.Top="80" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
            <Image Canvas.Left="160" Canvas.Top="80" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
            <Image Canvas.Left="240" Canvas.Top="80" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
            <Image Canvas.Left="80" Canvas.Top="160" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
            <Image Canvas.Left="160" Canvas.Top="160" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
            <Image Canvas.Left="240" Canvas.Top="160" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
            <Image Canvas.Left="80" Canvas.Top="240" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
            <Image Canvas.Left="160" Canvas.Top="240" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
            <Image Canvas.Left="240" Canvas.Top="240" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
        </Canvas>
    </Grid>
</Page>

我该怎么做才能使布局实际上将所有位置四舍五入到最近的像素，即使EntranceThemeTransition正在为页面设置动画？

4

0 回答 0