Escalar y desplazar la imagen desde el origen central con ScrollViewer no funciona en UWP

Question

Mi requisito es que me gustaría ampliar una imagen mediante programación utilizando el método ZoomToFactor del visor de desplazamiento. Y al aplicar el valor de zoom usando el método ZoomToFactor, debe ser zoom desde el centro del origen.

Entonces, agregué una imagen en un diseño de cuadrícula y configuré su alineación horizontal y vertical como centro, luego agregué la cuadrícula en un ScrollViewer como se ve en el fragmento de código a continuación.

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

Problema 1: la imagen se amplió desde la posición superior izquierda. Pero se debe hacer zoom desde el centro de la imagen.

Problema 2: después de hacer zoom, si se desplaza horizontalmente con el dedo, se restablece a la posición anterior.

Además, probé RenderTransformOrigin como (0.5, 0.5) para Grid e Image en el código anterior. Eso también fracasó.

Enlace de muestra:

Cualquiera, por favor guíeme qué está mal con el código anterior.

Saludos,

Bharati.

Answer 1

Escalar y desplazar la imagen desde el origen central con ScrollViewer no funciona en UWP

He probado el código anterior, el problema es que colocas ScrollViewerel ContentControlque hace que el ScrollViewertamaño sea el mismo que el tamaño de la cuadrícula secundaria. Podrías usar UserControlpara reemplazar.

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