Il ridimensionamento e la panoramica dell'immagine dall'origine centrale tramite ScrollViewer non funziona in UWP

Question

Il mio requisito è che vorrei ingrandire un'immagine a livello di codice utilizzando il metodo ZoomToFactor di scrollviewer. E quando si applica il valore di zoom utilizzando il metodo ZoomToFactor, dovrebbe essere lo zoom dal centro dell'origine.

Quindi, ho aggiunto l'immagine in un layout a griglia e ho impostato il suo allineamento orizzontale e verticale come centro, quindi ho aggiunto la griglia con in uno ScrollViewer come vedi nello snippet di codice sottostante.

[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: l'immagine è stata ingrandita dalla posizione in alto a sinistra. Ma dovrebbe essere ingrandito dal centro dell'immagine.

Problema 2: dopo l'ingrandimento, se si esegue una panoramica orizzontale utilizzando il dito, viene ripristinata la posizione precedente.

Inoltre, ho provato RenderTransformOrigin come (0.5, 0.5) a Grid e Image nel codice precedente. Anche questo è fallito.

Esempio di collegamento:

Qualcuno, per favore, guidami su cosa c'è di sbagliato nel codice sopra.

Saluti,

Bharathi.

Answer 1

Il ridimensionamento e la panoramica dell'immagine dall'origine centrale tramite ScrollViewer non funziona in UWP

Ho testato il codice sopra, il problema usa che metti ScrollViewerin ContentControlche causa la ScrollViewerstessa dimensione della dimensione della griglia del bambino. Potresti usare UserControlper sostituire.

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