การปรับขนาดและการแพนภาพจากกึ่งกลางหรือเริ่มต้นโดยใช้ ScrollViewer ไม่ทำงานใน UWP

Aug 18 2020

ความต้องการของฉันคือฉันต้องการซูมภาพโดยใช้โปรแกรมโดยใช้วิธีการ ZoomToFactor ของ scrollviewer และเมื่อใช้ค่าการซูมโดยใช้วิธี 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: หลังจากซูมเข้าหากคุณเลื่อนในแนวนอนโดยใช้นิ้วจะรีเซ็ตเป็นตำแหน่งก่อนหน้า

นอกจากนี้ฉันลอง RenderTransformOrigin เป็น (0.5, 0.5) เป็น Grid และรูปภาพในโค้ดด้านบน ที่ล้มเหลวเช่นกัน

ลิงค์ตัวอย่าง:

ใครก็ได้โปรดชี้แนะฉันว่ามีอะไรผิดปกติกับโค้ดด้านบน

ความนับถือ,

ภราฐี.

คำตอบ

1 NicoZhu-MSFT Aug 18 2020 at 16:40

การปรับขนาดและการแพนภาพจากกึ่งกลางหรือเริ่มต้นโดยใช้ 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>