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

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

<StackPanel Background="Red" Width="400" UseLayoutRounding="True">
    <StackPanel.Resources>
        <Style TargetType="ViewBox">
            <Setter Property="Height" Value="400" />
            <Setter Property="Margin" Value="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显示在顶部,如在模拟器上渲染时显示在底部.当模拟器产生所需的结果时,有人可以向我解释为什么第二条路径超出红色面板吗？

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

看看小盒子

…并将其扩展得非常大,并告诉布局通过UseLayoutRounding舍入到最近的整个像素

结果不可靠的原因是Paths正在独立于Canvas进行缩放,因为它实际上没有布局其内容.因此当你的一个路径点落在不均匀的像素边界(这可能发生在某些屏幕分辨率而不是其他屏幕分辨率上)时,它将舍入到未缩放的画布内的最近的虚拟像素,这将从ViewBox缩放,然后舍入再次到最近的整个像素(使用与Canvas缩放确定的ViewBox相同的比例)加剧了舍入误差.如果我们关闭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,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这样你仍然可以有路径缩放他们自己与网格保持一致(Canvass不会布置他们的孩子).代码看起来像：

<StackPanel Background="Red" Width="400" UseLayoutRounding="True">
        <StackPanel.Resources>
            <Style TargetType="ViewBox">
                <Setter Property="Height" Value="400" />
                <Setter Property="Margin" Value="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>

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

希望这有助于确定

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

猜你在找的Windows相关文章