question

Allanjb avatar image
0 Votes"
Allanjb asked Allanjb commented

How to Initialize the ZoomFactor of a UWP ScrollViewer before running Connected Animation.

I have an application under development where I am showing an enlarged, detailed view of an image from a GridView collection.
The user clicks on the image in the GridView and its displayed on its own page, initially sized to the containing ScrollViewer.
I am using connected animation to transition the image from the GridView to the detail view.
My problem is that the animation will run before the image is resized to the size of the ScrollViewer.
The animation runs and shows the image full size, it then resizes the image to the ScrollViewer after the animation has completed. The Zoom factor is set to 1 as if its displaying a full size image.
I call ScrollViewer.ChangeView() from the Scrollviewer Loaded event handler.
If I try to call ChangeView() any time before the ScrollViewer Loaded event, the size of the ScrollViewer is unknown.
The animation is run, (animation.TryStart) from the detail view OnNavigatedTo event.
I want the image to be resized as the detail view Page is resized. If the user wants to show an enlarged view of the image, I need scroll bars to be displayed, hence the need for a ScrollViewer.
I am also trying to handle the case where an image may have a longer height than width.
The code for this demo is on github:
TransitionDemo


windows-uwp
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

You post demo is not available, could you re-upload it.

0 Votes 0 ·

Demo has been made public.

0 Votes 0 ·
NicoZhu-MSFT avatar image
0 Votes"
NicoZhu-MSFT answered

Hello, Welcome to Micorosoft Q&A,

How to Initialize the ZoomFactor of a UWP ScrollViewer before running Connected Animation.

The answer is yes, you could Initialize the ZoomFactor of a UWP ScrollViewer before running Connected Animation. but it will make image view flash. Because the connected animation will animate image control in OnNavigatedTo method, at this time. the imagesource has not opened.

You could use the following to force the connected animation at last. but it will make the image flash.

 private async void imageToShow_ImageOpened(object sender, RoutedEventArgs e)
 {
     await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () => { FitToScreen(); }).AsTask().ContinueWith(async (s) =>
     {
         await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
         {
             ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("forwardAnimation");
             if (animation != null)
             {
                 animation.TryStart(imageToShow);
             }
         });
    
     });
 }

I have checked your code call FitToScreen after connected animation is good practice ,just like your code wrote.



If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.





5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Allanjb avatar image
0 Votes"
Allanjb answered Allanjb commented

Thanks for taking the time to review. Having the image flash is not what I am looking for, this would be the same as is happening now, i.e.: the animation runs before the FitToScreen() method.
I need a way to have the animation pick up the size of the image based on the size of ScrollViewer, (Width or Height depending on the image).
I am looking at a few ideas right now, removing the relative panel and using a grid. Setting the size of the image when the view is created.
I do think that this is something that must have a solution, it seems so basic.

· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Yep, I have a work around that render the image with image control to replace scrollviewer, after animated , you could insert the image to the scrollviewer.

0 Votes 0 ·

I finally have something I can live with. I have uploaded my changes to GitHub. Basically all that was needed was to disable scrolling until the image has been rendered for the first time.
This works well. The only issue remaining is:
When showing a image full size, where the length is longer than the width, and the width can fit inside the Page, (i.e. does not need to be scrolled), horizontal scroll bars are still being displayed. The ScrollViewer is not adjusting the width to the whole width available, (not being fully stretched). It's not a bid deal but I would like to know what is going on.

0 Votes 0 ·