ScrollViewerを使用した中央の原点からの画像のスケーリングとパンがUWPで機能しない
Aug 18 2020
私の要件は、scrollviewerZoomToFactorメソッドを使用してプログラムで画像をズームしたいということです。また、ZoomToFactorメソッドを使用してズーム値を適用する場合は、原点の中心からズームする必要があります。
そこで、グリッドレイアウトに画像を追加し、その水平方向と垂直方向の配置を中央に設定してから、以下のコードスニペットに示すように、ScrollViewerにグリッドを追加しました。
[XAML]
<ContentControl Grid.Row="2">
<ScrollViewer x:Name="scrollViewer" VerticalScrollMode="Enabled" HorizontalScrollMode="Enabled" ZoomMode="Enabled" >
<Grid VerticalAlignment="Center" HorizontalAlignment="Center" Width="216" Height="319">
<Image x:Name="MyImage" Source="Assets\EditedImage.jpg" />
</Grid>
</ScrollViewer>
</ContentControl>
[C#]
int count = 1;
private void Btn_Click(object sender, RoutedEventArgs e)
{
count += 1;
scrollViewer.ZoomToFactor(count);
}
問題-1:画像がtopLeftの位置からズームされました。ただし、画像の中心からズームする必要があります。
問題2:ズームイン後、指を使って水平にパンすると、前の位置にリセットされます。
また、上記のコードのグリッドと画像に対してRenderTransformOriginを(0.5、0.5)として試しました。それも失敗しました。
サンプルリンク:
どなたか、上記のコードの何が問題になっているのか教えてください。
よろしく、
バラティ。
回答
1 NicoZhu-MSFT Aug 18 2020 at 16:40
ScrollViewerを使用した中央の原点からの画像のスケーリングとパンがUWPで機能しない
上記のコードをテストScrollViewer
しましContentControlたが、ScrollViewer
子グリッドサイズと同じサイズになる問題を使用します。UserControl
置き換えるために使用できます。
<UserControl Grid.Row="2">
<ScrollViewer x:Name="scrollViewer" VerticalScrollMode="Enabled" HorizontalScrollMode="Enabled" ZoomMode="Enabled" >
<Grid VerticalAlignment="Center" HorizontalAlignment="Center" Width="216" Height="319" >
<Image x:Name="MyImage" Source="Assets\EditedImage.jpg" Stretch="Uniform" RenderTransformOrigin="0.5, 0.5" />
</Grid>
</ScrollViewer>
</UserControl>