xaml - Windows 应用商店应用布局差异

Question

我正在使用 Viewbox 来缩放固定大小的 Canvas (包含一起形成有意义的图片的各种路径)。

<StackPanel Background="Red" Width="400" UseLayoutRounding="True">
    <StackPanel.Resources>
        <Style TargetType="Viewbox">
            <Setter Property="Height" Value="400" />
            <Setter Property="Margin" Value="0,0,0,50" />
        </Style>
        <Style TargetType="Path">
            <Setter Property="Stroke" Value="Blue" />
            <Setter Property="StrokeThickness" Value="2" />
        </Style>
    </StackPanel.Resources>
    <Viewbox>
        <Canvas Width="5" Height="5">
            <Path Data="M 1,1 h 3 v 3 h -3 z" />
        </Canvas>
    </Viewbox>
    <Viewbox>
        <Canvas Width="6" Height="6">
            <Path Data="M 1,1 h 4 v 4 h -4 z" />
        </Canvas>
    </Viewbox>
</StackPanel>

这个 xaml 在我的 PC 上本地渲染时显示在顶部，在模拟器上渲染时显示在底部。由于模拟器正在产生所需的结果，有人可以向我解释为什么第二条路径超出了红色面板吗？

Answer 1

真的没有差异......发生的事情是你正在采取一些非常小的东西(你的路径非常小):



看看那些小盒子

...并将其放大到非常大，并通过 UseLayoutRounding 告诉布局四舍五入到最近的整个像素

结果不可靠的原因是Path s 的缩放独立于 Canvas因为它实际上并没有布局它的内容。因此，当您的一个路径点落在不均匀的像素边界上(这可能发生在某些屏幕分辨率而不是其他屏幕分辨率下)时，它会四舍五入到未缩放 Canvas 内最近的虚拟像素，并且这是从 Viewbox 缩放的。然后再次四舍五入到最接近的整个像素(使用相同的比例 Viewbox 由 Canvas 的缩放确定)加剧了舍入误差。如果我们关闭 StackPanel.Background，您可以更容易地看到这一点。 (默认为透明)设置 Canvas.Background绿色并调低笔划颜色的不透明度:



您可以看到路径舍入与 Canvas 不同

所以你要么关闭 UseLayoutRounding以便在操作中保留小数点或简化您的布局，以免发生错误。

例如，如果您通过移除不适当和多余的固定尺寸 Canvas 并设置 Path.Stretch = Uniform 来让路径自行缩放。你最终得到:

    <StackPanel Background="Red" Width="400" UseLayoutRounding="True">
        <StackPanel.Resources>
            <Style TargetType="Viewbox">
                <Setter Property="Height" Value="400" />
                <Setter Property="Margin" Value="0,0,0,50" />
            </Style>
            <Style TargetType="Path">
                <Setter Property="Stroke" Value="Blue" />
                <Setter Property="StrokeThickness" Value="2" />
                <Setter Property="Stretch" Value="Uniform" />
            </Style>
        </StackPanel.Resources>
        <Viewbox>
            <Path Data="M 1,1 h 3 v 3 h -3 z" />
        </Viewbox>
        <Viewbox>
            <Path Data="M 1,1 h 4 v 4 h -4 z" />
        </Viewbox>
    </StackPanel>

结果:


可能是你真正要找的

但是，如果这过于简化，并且您实际上有多个路径打算放入 Canvas ，我建议你使用一个真正自己做布局的容器，明显的选择是Grid通过这种方式，您仍然可以将路径与 Grid 一起缩放。让它们保持同步( Canvas 不会布置它们的 child )。代码如下所示:

    <StackPanel Background="Red" Width="400" UseLayoutRounding="True">
        <StackPanel.Resources>
            <Style TargetType="Viewbox">
                <Setter Property="Height" Value="400" />
                <Setter Property="Margin" Value="0,0,0,50" />
            </Style>
            <Style TargetType="Path">
                <Setter Property="Stroke" Value="Blue" />
                <Setter Property="StrokeThickness" Value="2" />
                <Setter Property="Stretch" Value="Uniform" />
            </Style>
        </StackPanel.Resources>
        <Viewbox>
            <Grid Width="5" Height="5">
                <Path Data="M 1,1 h 3 v 3 h -3 z" />
            </Grid>
        </Viewbox>
        <Viewbox>
            <Grid Width="6" Height="6">
                <Path Data="M 1,1 h 4 v 4 h -4 z" />
            </Grid>
        </Viewbox>
    </StackPanel>

结果与没有辅助容器的结果相同

希望这有帮助 -ck