Масштабирование и панорамирование изображения из центра с помощью ScrollViewer не работает в UWP

Question

Мое требование: я хотел бы программно масштабировать изображение с помощью метода scrollviewer ZoomToFactor. И при применении значения масштабирования с использованием метода ZoomToFactor оно должно быть масштабным от центра orgin.

Итак, я добавил изображение в макет сетки и установил его горизонтальное и вертикальное выравнивание по центру, а затем добавил сетку с помощью 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: изображение было увеличено с верхнего левого положения. Но его следует увеличивать от центра изображения.

Проблема-2: после увеличения, если вы перемещаете по горизонтали с помощью пальца, он возвращается в предыдущее положение.

Кроме того, я попробовал RenderTransformOrigin как (0,5, 0,5) для сетки и изображения в приведенном выше коде. Это тоже не удалось.

Образец ссылки:

Любой, пожалуйста, объясните мне, что не так с приведенным выше кодом.

С уважением,

Бхаратхи.

Answer 1

Масштабирование и панорамирование изображения из центра с помощью 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>