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>