ScrollViewer를 사용하여 중앙 원본의 이미지 크기 조정 및 이동이 UWP에서 작동하지 않습니다.

Aug 18 2020

내 요구 사항은 scrollviewer ZoomToFactor 메서드를 사용하여 프로그래밍 방식으로 이미지를 확대하고 싶습니다. 그리고 ZoomToFactor 메서드를 사용하여 확대 / 축소 값을 적용 할 때는 원본 중심에서 확대 / 축소해야합니다.

그래서 그리드 레이아웃에 이미지를 추가하고 수평 및 수직 정렬을 중앙으로 설정 한 다음 아래 코드 스 니펫에서 볼 수 있듯이 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>

[씨#]

 int count = 1;
 private void Btn_Click(object sender, RoutedEventArgs e)
            {
                count += 1;
                scrollViewer.ZoomToFactor(count);            
            }

문제 -1 : 이미지가 상단 왼쪽 위치에서 확대되었습니다. 그러나 이미지의 중앙에서 확대되어야합니다.

문제 -2 : 확대 후 손가락을 사용하여 가로로 이동하면 이전 위치로 재설정됩니다.

또한 위 코드의 Grid 및 Image에 RenderTransformOrigin을 (0.5, 0.5)로 시도했습니다. 그것도 실패했습니다.

샘플 링크 :

누구든지 위의 코드에 무엇이 잘못되었는지 안내하십시오.

문안 인사,

바라 티.

답변

1 NicoZhu-MSFT Aug 18 2020 at 16:40

ScrollViewer를 사용하여 중앙 원본의 이미지 크기 조정 및 이동이 UWP에서 작동하지 않습니다.

위의 코드를 테스트했지만 문제 는 자식 그리드 크기와 동일한 크기 를 유발하는 ScrollViewer에 배치합니다 . 교체에 사용할 수 있습니다 .ContentControlScrollViewerUserControl

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