Windows应用商店应用布局差异

Question

我正在使用Viewbox来缩放固定大小的画布(包含各种路径,这些路径一起形成一个有意义的画面).

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

当我在PC上本地渲染时,此xaml显示在顶部,如在模拟器上渲染时显示在底部.当模拟器产生所需的结果时,有人可以向我解释为什么第二条路径超出红色面板吗？

Answer 1

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

看看小盒子

...并将其放大到极大,并告诉布局通过圆形到最近的整个像素 UseLayoutRounding

结果不可靠的原因是Paths被独立地缩放,Canvas因为它实际上没有布局其内容.因此当你的一个路径点落在不均匀的像素边界上(这可能发生在某些屏幕分辨率而不是其他屏幕分辨率上)时,它会四舍五入到未缩放的画布内的最近的虚拟像素,并且这个像素将被缩放Viewbox,然后再次舍入到最近的整个像素(使用Viewbox由缩放确定的相同比例Canvas)加剧了舍入误差.如果我们关闭StackPanel.Background(默认为透明)将Canvas.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>

导致:

可能是你真正想要的

但是,如果这是一个过度简化,你实际上有多个路径,你打算放在你的内部Canvas,我建议你使用一个实际上有自己的布局的容器,显而易见的选择是Grid这样你仍然可以让路径自己缩放与Grid在锁步让他们(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" />
                <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>

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

希望这有助于确定