を使用してアニメーション化する C#/XAML Metro アプリにページがありますEntranceThemeTransition
。このページ内には、いくつかのタイル グラフィックがありImage
ます。サイズを 5 の倍数にすることを確認したので、異なる DPI でもうまく収まるようにしました。
のデフォルト値は でUseLayoutRounding
あるため、true
のすべてのステップがEntranceThemeAnimation
最も近いピクセルに丸められることを期待しています。ただし、このスクリーンショットが示すように、これは起こっていません (固体ブロックであるはずのものを通る 2 本の細い緑色の垂直線に注意してください)。
これは、9 個のタイル (幅 3 x 高さ 3、各タイル 80 x 80 ピクセル) で構成されるシームレスなブロックであると想定されています。垂直方向に、それらは完全に適合します。しかし、ページがアニメーション化されている間、X 方向がアニメーション化されており、常に 1 ピクセルの倍数であるとは限らないため、タイル間に継ぎ目ができてしまいます (各画像の X は分数であるため、それぞれ 2 つの画像があることになります)既存のものの上に不透明度 50% の中間ピクセルを描画すると、不透明度は 100% ではなく合計 75% になります)。これはまさにUseLayoutRounding
防止するはずの問題ですが、まったく役に立ちません。
アニメーションが完了すると、すべてが落ち着き、物事が完全に整列します。しかし、アニメーション中、特にアニメーションが停止する直前に、継ぎ目がかなり目立ちます。
子育て階層のさまざまなポイントで明示的に設定しようとUseLayoutRounding="true"
しましたが、役に立ちませんでした。
問題を再現する XAML の簡略化された形式を次に示します。
<Page x:Class="App1.Page1"
UseLayoutRounding="True"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid Background="Green" UseLayoutRounding="True">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Canvas UseLayoutRounding="True">
<Image Canvas.Left="80" Canvas.Top="80" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
<Image Canvas.Left="160" Canvas.Top="80" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
<Image Canvas.Left="240" Canvas.Top="80" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
<Image Canvas.Left="80" Canvas.Top="160" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
<Image Canvas.Left="160" Canvas.Top="160" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
<Image Canvas.Left="240" Canvas.Top="160" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
<Image Canvas.Left="80" Canvas.Top="240" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
<Image Canvas.Left="160" Canvas.Top="240" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
<Image Canvas.Left="240" Canvas.Top="240" Source="/Assets/DirtSquare.png" Width="80" Height="80" UseLayoutRounding="True"/>
</Canvas>
</Grid>
</Page>
ページがアニメーション化されている間でも、実際にすべての位置を最も近いピクセルに丸めるレイアウトを取得するにはどうすればよいですか?EntranceThemeTransition