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> 

このxamlは、PC上でネイティブにレンダリングされたとき、およびエミュレータでレンダリングされたときに下に表示されているように表示されます。エミュレータが所望の結果を生み出しているので、誰かが第2の経路が赤いパネルを超えている理由を私に説明してもらえますか？

Answer 1

本当に何が起こっているのか...矛盾ありませんが（あなたのパスが非常に小さい）あなたは本当に小さなレンダリング何かを取っているということです。小さな箱で

見

...と非常に大きな、それをスケールアップし、UseLayoutRounding

理由を経由して、最も近い全体ピクセルに丸めるためにレイアウトを伝えます実際に内容をレイアウトしていないので、PathがCanvasから独立してスケールされているという結果は信頼できません。だから、あなたのパスポイントの1つが不均一なピクセル境界（いくつかの画面解像度ではなく他のものではない）に着くと、アンスケールされたキャンバス内で最も近い仮想ピクセルに丸められ、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,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> 

、結果は第2の容器なしで、これは-ck役立ちます

希望のものと同一である

私はあなたのXAMLを貼り付けコピーして、それが下のように見えます

Answer 2

私は以下のようにキャンバスと2,560のディスプレイ解像度でエミュレータで私のマシン上で問題を再現することができます。

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

- キャンバスのアンダーフロー/赤いパネルを-合わない、と赤のパネルの右側の余白にいくつかのスペースを残します。

キャンバスサイズを5の倍数に保つと、赤いパネルに正しく収まります。

これは、rectでも再生するので、Pathでは問題ないようです。 ViewBoxのスケーリングに問題があるようです。私はstackpanelのUseLayoutRounding="False"でそれを見つけました - 問題は再現されません。また、ViewBoxのスケーリングの問題を調べるときにrelated threadが見つかりました。それはSnapsToDevicePixelsプロパティを使用することを示唆していますが、Windowsストアのxamlアプリケーションでは利用できません。

要約すると、ビューボックススケーリングalgoの内部知識を持つプロではありませんが、ViewBoxスケーリングの問題であるようです。考えられる回避策は、別のマシンでテストに合格する場合にUseLayoutRoundingをfalseに設定することです。 5の倍数は良い回避策のようには見えませんが、確認できます。別の注記では、なぜそれが起こっているのか不思議であれば、答えが得られ、アンダーフローであるかもしれません。