Scaling dan panning image dari center orgin menggunakan ScrollViewer tidak berfungsi di UWP

Question

Persyaratan saya adalah, saya ingin memperbesar gambar secara terprogram dengan menggunakan metode ZoomToFactor scrollviewer. Dan saat menerapkan nilai zoom menggunakan metode ZoomToFactor, itu harus di-zoom dari tengah orgin.

Jadi, saya telah menambahkan gambar dalam tata letak kisi dan mengatur perataan horizontal dan vertikal sebagai pusat, lalu menambahkan kisi dengan di ScrollViewer seperti yang Anda lihat pada cuplikan kode di bawah ini.

[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);            
            }

Masalah-1: Gambar telah diperbesar dari posisi kiri atas. Tetapi harus diperbesar dari tengah gambar.

Masalah-2: Setelah zoom-in, jika Anda menggeser secara horizontal menggunakan jari, reset ke posisi sebelumnya.

Juga, saya mencoba RenderTransformOrigin sebagai (0,5, 0,5) ke Grid dan Gambar dalam kode di atas. Itu juga gagal.

Tautan sampel:

Siapapun, tolong bimbing saya apa yang salah dengan kode di atas.

Salam,

Bharathi.

Answer 1

Scaling dan panning image dari center orgin menggunakan ScrollViewer tidak berfungsi di UWP

Saya telah menguji kode di atas, masalah penggunaan Anda menempatkan ScrollViewerdi ContentControlyang menyebabkan ScrollViewerukurannya sama dengan ukuran Grid anak. Anda bisa menggunakan UserControluntuk mengganti.

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