La mise à l'échelle et le panoramique de l'image à partir de l'origine centrale à l'aide de ScrollViewer ne fonctionnent pas dans UWP

Question

Mon exigence est que je souhaite zoomer une image par programme en utilisant la méthode scrollviewer ZoomToFactor. Et lors de l'application de la valeur de zoom à l'aide de la méthode ZoomToFactor, il doit s'agir d'un zoom à partir du centre de l'origine.

Donc, j'ai ajouté une image dans une disposition de grille et défini son alignement horizontal et vertical comme centre, puis j'ai ajouté une grille avec dans un ScrollViewer comme vous le voyez dans l'extrait de code ci-dessous.

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

Problème 1 : l'image a été agrandie à partir de la position en haut à gauche. Mais il doit être zoomé à partir du centre de l'image.

Problème 2 : Après un zoom avant, si vous effectuez un panoramique horizontal à l'aide du doigt, il est réinitialisé à la position précédente.

De plus, j'ai essayé RenderTransformOrigin as (0.5, 0.5) to Grid et Image dans le code ci-dessus. Cela a également échoué.

Exemple de lien :

Quelqu'un, s'il vous plaît, guidez-moi ce qui ne va pas avec le code ci-dessus.

Salutations,

Bharati.

Answer 1

La mise à l'échelle et le panoramique de l'image à partir de l'origine centrale à l'aide de ScrollViewer ne fonctionnent pas dans UWP

J'ai testé le code ci-dessus, le problème est que vous placez le ScrollViewerdans le ContentControlqui provoque la ScrollViewermême taille que la taille de la grille enfant. Vous pourriez utiliser UserControlpour remplacer.

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