O dimensionamento e a panorâmica da imagem da origem central usando o ScrollViewer não está funcionando no UWP

Aug 18 2020

Meu requisito é que eu gostaria de ampliar uma imagem programaticamente usando o método ZoomToFactor do scrollviewer. E ao aplicar o valor de zoom usando o método ZoomToFactor, deve ser o zoom do centro da origem.

Então, adicionei a imagem em um layout de grade e defini seu alinhamento horizontal e vertical como centralizado, em seguida, adicionei a grade em um ScrollViewer como você vê no trecho de código abaixo.

[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: a imagem foi ampliada da posição superior esquerda. Mas deve ser ampliado do centro da imagem.

Problema 2: após o zoom, se você deslocar horizontalmente usando o dedo, ele será redefinido para a posição anterior.

Além disso, tentei RenderTransformOrigin como (0,5, 0,5) para grade e imagem no código acima. Isso também falhou.

Link de amostra:

Qualquer um, por favor, me oriente o que há de errado com o código acima.

Cumprimentos,

Bharathi.

Respostas

1 NicoZhu-MSFT Aug 18 2020 at 16:40

O dimensionamento e a panorâmica da imagem da origem central usando o ScrollViewer não está funcionando no UWP

Eu testei o código acima, o problema é que você coloca o ScrollViewerno ContentControlque causa o ScrollViewertamanho igual ao tamanho da grade filho. Você poderia usar UserControlpara substituir.

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