2

ユーザーが提供した画像を表示したい。これらの画像は、画面の解像度よりも大きくなる可能性が高く (ズーム機能とパン機能が必要です)、画像の向きが画面に対して正しくない可能性があります (回転できる必要があります)。

パンとズームの実装はいくぶん単純なようです。

<ScrollViewer HorizontalSnapPointsType="None" HorizontalScrollBarVisibility="Auto" VerticalSnapPointsType="None" ZoomSnapPointsType="None" IsHorizontalRailEnabled="False" IsVerticalRailEnabled="False" ManipulationMode="All" VerticalScrollBarVisibility="Auto">
   <Image x:Name="pannableImage" Source="{Binding FullSizedImage}" AutomationProperties.Name="{Binding Title}" />
</ScrollViewer>

これはうまく機能し、私のニーズを満たしていますが、画像が画面よりも大きい場合はズーム倍率が画面いっぱいに設定され、画像がそうでない場合はズーム倍率が設定されるように初期ズーム倍率を設定できるようにしたいと考えています。画面よりも大きい場合、ズーム倍率は画像がフルサイズで表示されるように設定されます。つまり、ズームインされません。

ただし、ローテーションを許容できるように機能させるのに苦労しています。私はこれを試しました：

<ScrollViewer HorizontalSnapPointsType="None" HorizontalScrollBarVisibility="Auto" VerticalSnapPointsType="None" ZoomSnapPointsType="None" IsHorizontalRailEnabled="False" IsVerticalRailEnabled="False" ManipulationMode="All" VerticalScrollBarVisibility="Auto">
   <Image x:Name="pannableImage" Source="{Binding FullSizedImage}" AutomationProperties.Name="{Binding Title}" >
      <Image.Projection>
         <PlaneProjection RotationZ="{Binding ImageRotation}"/>
      </Image.Projection>
    </Image>
 </ScrollViewer>

これは画像を回転させますが、問題は、ScrollViewer が間違ってスクロールすることです。また、Image の代わりに ScrollViewer に Projection を配置しようとしましたが、それはさらに悪いことです。

ScrollViewer は投影された画像の寸法を取得する必要があるため、プロジェクトを画像に配置するのが最も理にかなっているように見えますが、そうではないようです。

ここで私は何を誤解していますか？

ありがとう。

フィリップ

4

1 に答える 1

1

解決策は、Projection の代わりに RenderTransform を使用することでした。

            <Image x:Name="pannableImage" Source="{Binding FullSizedImage}" ManipulationMode="All" Loaded="pannableImage_Loaded" IsDoubleTapEnabled="False" IsHitTestVisible="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" ScrollViewer.VerticalScrollBarVisibility="Disabled" LayoutUpdated="pannableImage_LayoutUpdated">
                <Image.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform x:Name="Scale" />
                        <RotateTransform x:Name="Rotate" />
                        <TranslateTransform x:Name="Translate" />
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
于 2015-01-11T11:58:40.277 に答える