Tôi đang tạo ứng dụng xem ảnh và tôi muốn triển khai phóng to ảnh. Tôi tạo ra một ScrollViewer và đặt một hình ảnh ở đó. Tất cả đều hoạt động ra khỏi hộp. Tôi có thể làm một cử chỉ zoom và nó phóng to hình ảnh. Bây giờ, điều tiếp theo tôi muốn thực hiện là tải phiên bản độ phân giải cao của hình ảnh khi cử chỉ thu phóng bắt đầu và tự động hoán đổi bitmap trong điều khiển Hình ảnh khi được tải. Tôi muốn nó xảy ra liền mạch, để người dùng có thể tiếp tục cử chỉ và tiếp tục phóng to và xem hình ảnh chi tiết hơn. Cách tiếp cận tốt nhất để thực hiện điều này là gì? Đây là mã mà tôi hiện có. Vấn đề với mã của tôi là khi Image.Source được thay thế thì cử chỉ của tôi bị gián đoạn và ảnh được đặt lại về kích thước ban đầu. Thay đổi ScrollViewer ZoomFactor không giúp ích khi nó có vẻ như được thiết lập lại khi hình ảnh đang được thay thế. Tôi có một DataModel với thuộc tính Hình ảnh ban đầu trả về giá trị null nhưng bắt đầu tải ảnh từ 'tệp' ở chế độ có độ phân giải thấp và gọi OnPropertyChanged ("Hình ảnh") khi tải xong. Gọi LoadFullImage() tải phiên bản có độ phân giải đầy đủ và gọi OnPropertyChanged ("Hình ảnh") khi hoàn tất.Thay thế hình ảnh trong ScrollViewer trong khi thực hiện thao tác thu phóng
Dưới đây là chiết xuất từ DataModel.cs:
public async Task LoadFullImage()
{
loadFullImageTask = UpdateImage(0);
await loadFullImageTask;
}
public ImageSource Image
{
get
{
if (fullImage != null)
{
return fullImage;
}
else if (image != null)
{
return image;
}
else
{
Task loadImageTask = UpdateImage(768);
return null;
}
}
}
public bool FullImageLoading
{
get { return (this.loadFullImageTask != null) && (!this.loadFullImageTask.IsCompleted); }
}
public bool FullImageLoaded
{
get { return this.fullImage != null; }
}
Đây là MainPage.xaml tôi:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer x:Name="imageViewer" HorizontalAlignment="Stretch" HorizontalScrollBarVisibility="Visible" VerticalAlignment="Stretch" MinZoomFactor="1" ZoomMode="Enabled" ViewChanged="imageViewer_ViewChanged">
<Image x:Name="image" Margin="0,0,0,0" Stretch="Uniform" Source="{Binding Image}" />
</ScrollViewer>
</Grid>
Đây là MainPage.xaml.cs tôi:
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
FileOpenPicker filePicker = new FileOpenPicker();
filePicker.SuggestedStartLocation = PickerLocationId.ComputerFolder;
filePicker.FileTypeFilter.Add(".jpg");
StorageFile file = await filePicker.PickSingleFileAsync();
data = new DataModel(file);
imageViewer.DataContext = data;
}
private async void imageViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
ScrollViewer imageViewer = (ScrollViewer)sender;
if (imageViewer.ZoomFactor > 1)
{
if (!data.FullImageLoaded && (!data.FullImageLoading))
{
int oldHeight = ((BitmapImage)data.Image).PixelHeight;
int oldWidth = ((BitmapImage)data.Image).PixelWidth;
double oldHOffset = imageViewer.HorizontalOffset;
double oldVOffset = imageViewer.VerticalOffset;
await data.LoadFullImage();
int newHeight = ((BitmapImage)data.Image).PixelHeight;
int newWidth = ((BitmapImage)data.Image).PixelWidth;
float ratio = (float)oldHeight/(float)newHeight;
imageViewer.MaxZoomFactor = imageViewer.MaxZoomFactor * ratio;
imageViewer.MinZoomFactor = imageViewer.MinZoomFactor * ratio;
imageViewer.ZoomToFactor(imageViewer.ZoomFactor * ratio);
//imageViewer.ScrollToHorizontalOffset(oldHOffset/ratio);
//imageViewer.ScrollToVerticalOffset(oldVOffset/ratio);
}
}
}
Như Tôi đã đề cập, vấn đề với mã này là các cử chỉ bị gián đoạn và một hình ảnh mới không được thay đổi kích thước/cuộn đến đúng vị trí, trải nghiệm người dùng không liền mạch. Cảm ơn mọi đề xuất về cách giải quyết vấn đề này.
Jerry, tôi nghĩ rằng cách tiếp cận với ScaleTransform là cần thiết khi ScrollViewer không hỗ trợ cử chỉ thu phóng. Hiện tại nó hoạt động hoàn hảo với một hình ảnh duy nhất - tôi có thể phóng to rất mượt mà. Ngoài ra ScrollViewer của tôi được chứa trong các điều khiển FlipView và cử chỉ từ cả hai ScrollViewer và FlipView điều khiển làm việc tuyệt vời với nhau: tôi có thể lật hình ảnh và phóng to khi cần thiết. Bạn đang nói rằng nó không thể chuyển đổi hình ảnh liền mạch trong ScrollViewer? – Vitaly