Xaml Windows应用商店应用程序布局差异

我使用一个Viewbox来缩放一个固定大小的画布（包含各种路径，这些路径一起形成一幅有意义的图片）

当在我的电脑上本机渲染时，此xaml显示在顶部，当在模拟器上渲染时，显示在底部。由于仿真器正在产生所需的结果，有人能向我解释为什么第二条路径延伸到红色面板之外吗

---

我可以在我的机器上以2560x1440的显示分辨率用画布重现问题，如下所示

<Canvas Width="4" Height="4">
    <Rectangle Width="4" Height="4" Fill="Blue" ></Rectangle>
</Canvas>

对于以上代码段，画布溢出/超出红色面板

<Canvas Width="6" Height="6">
    <Rectangle Width="6" Height="6" Fill="Blue" ></Rectangle>
</Canvas>

对于上面的代码段-canvas underflows/不适合红色面板，并在红色面板的右边缘留下一些空间

<Canvas Width="6" Height="6">
    <Rectangle Width="6" Height="6" Fill="Blue" ></Rectangle>
</Canvas>

如果画布大小保持为5的倍数，则它适合红色面板

这似乎不是Path的问题，因为它也使用rect进行复制。这似乎是ViewBox缩放的问题。我发现在stackpanel上使用

UseLayoutRounding=“False”

，问题不会重现。我还发现了在查看ViewBox缩放问题时出现的问题。建议使用

SnapsToDevicePixels

属性，但该属性不适用于windows应用商店xaml应用程序

---

总之，这似乎是一个问题，虽然我不是一个专业的内部知识的ViewBox缩放算法。可能的解决方法是，如果在另一台机器上通过测试，则将UseLayoutRounding设置为false。5的倍数看起来不是很好的解决方法，但您可以检查。另请注意-如果您只是好奇地想知道为什么会发生这种情况，您会得到答案，并且可能会出现几个像素的下溢/溢出，这可能会对您的应用程序产生影响。

实际上没有任何差异。。。所发生的情况是，您正在采取一些呈现非常小的内容（您的路径非常小）：

看看这些小盒子

…并将其放大到非常大，并通过

UseLayoutRounding

结果不可靠的原因是

路径

被独立于

画布

进行缩放，因为它实际上没有布局其内容。因此，当一个路径点落在不均匀的像素边界上时（这可能发生在某些屏幕分辨率下，而不是其他分辨率下），它将舍入到未缩放画布内最近的虚拟像素，这将从

Viewbox

缩放，然后再次舍入到最近的整个像素（使用由

画布

缩放确定的

视图框

的相同比例）加剧舍入误差。如果关闭

StackPanel.Background

（默认为透明），您可以更容易地看到这一点）将画布背景设置为绿色，并调低笔划颜色的不透明度：

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

因此，您必须关闭

UseLayoutRounding

，以便在操作过程中保留小数点，或者简化布局，以避免出现错误

例如，如果通过移除不适当且多余的固定大小画布并设置

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>

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

---

希望这有帮助-ck

我复制粘贴了你的xaml，它看起来像下面的两张图片，它应该看起来像上面的图片吗？你是否将我的xaml粘贴到windows应用商店项目的页面中了？我在本地计算机上运行xaml时获得了上面的图片，在模拟器上运行了下面的图片。这可能是由自动缩放造成的。文档主显示器和仿真器的屏幕大小。然后测试主显示器的分辨率，看看是否有效果。@HansPassant我在本地PC（Surface Pro）上获得了预期的结果（即：两个正方形与stackpanel的宽度相同），分辨率为1680x1050和1024x768，但不是1920x1080。模拟器总是能产生正确的结果。是的，1920x1080就是其中的一个。毫无疑问，在代码中隐藏了一个取整错误，您无法找到。当然，很难修复，您只能从Microsoft支持部门获得帮助。

    <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>