How to swipe from bottom up to view the next photo/video in a list of photos/videos

Question

How to swipe from bottom up to view the next photo/video in a list of photos/videos

Wei Wen 1,126

I have a list of photos and short videos I want them to appear one page at a time. If the user swipes from bottom up, the next video/image will appear and occupy the entire page. Currently, I implemented this as a scrollview with each video/photo in a content view. But this does not achieve what I want.

Answer accepted by question author

0 additional answers

Your answer

Answer 1

JarvanZhang 23,971

Hello,

Welcome to our Microsoft Q&A platform!

Try using CarouselView to display the photos/videos. If you want to swipe form bottom to top and swipe an item at on time, please use as LinearItemsLayout as CarouselView.ItemsLayout and set SnapPointsType to MandatorySingle.

Here is the sample code, you could refer to it.

   <CarouselView>  
       <CarouselView.ItemsLayout>  
           <LinearItemsLayout Orientation="Vertical" SnapPointsType="MandatorySingle"/>  
       </CarouselView.ItemsLayout>  
       <CarouselView.ItemTemplate>  
           <DataTemplate>  
               <!--the content-->  
           </DataTemplate>  
       </CarouselView.ItemTemplate>  
   </CarouselView>

Best Regards,

Jarvan Zhang

If the response is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.

Wei Wen 1,126 Reputation points

2021-10-19T12:46:48.3+00:00

@JarvanZhang This looks promising. Thank you! However, I wonder if the content in DataTemplate has to be native Xamarin components just like ListView? The contents I have are actually quite diverse, and I created custom components for it.
JarvanZhang 23,971 Reputation points

2021-10-20T03:06:55.177+00:00

It supports to show custom controls in the data template. If you are facing some issues while implementing, you could post the particular error with the corresponding codes here.
Wei Wen 1,126 Reputation points

2021-10-20T15:54:33.657+00:00

@JarvanZhang Although I haven't been able to make all the different items to appear in CarouselView, so far, it looks great and is what I want. I have another question: It looks like the user can scroll endlessly. But I want scrolling to end when the last or first item on the list is reached. Is there a parameter to set in CarouselView? Thanks!
Wei Wen 1,126 Reputation points

2021-10-20T21:02:52.68+00:00

@JarvanZhang Another thing I noticed is that every time the video is scrolled off the screen and then scrolled back, it will reload the video which takes a long time. I guess the CarouselView's item is recycled when it is scrolled off the screen? Is there a way to keep it not recycled and so that the next time the user scrolls it into view, it can be played immediately? For the image, because I used FFImageLoading, the image is cached so it seems always available.

As far as the endless scrolling, I was able to resolve the issue by setting Loop to false. But I also want to scroll to the right item. I used ScrollTo(index). But it is always the first item that is shown.
Wei Wen 1,126 Reputation points

2021-10-21T01:36:20.757+00:00

@JarvanZhang I asked about using custom components in CarouselView because I need to pass information to the components. From my experiment with ListView, it does not accept any input parameter through binding. For example, if I have a custom component called ResourceVideoView which contains a property called VideoData. VideoData contains information such as video name, and Uri. But I cannot do something like this in data template: <ResourceVideoView VideoData="{Binding videoData}" />, or <ResourceVideoView VideoData="{Binding .}" />
I think the constructor of VideoData that accept a parameter of VideoData is not used. It only uses the constructor with no parameter. If I cannot use binding to pass parameter, I cannot use custom component.
Wei Wen 1,126 Reputation points

2021-10-21T01:39:17.417+00:00

Sorry I meant the constructor of ResourceVideoView that contains parameter VideoData is not used if I do it in data template of CarouselView. It is the constructor without parameter that is used if ResourceVideoView is hard-wired in data template.
JarvanZhang 23,971 Reputation points

2021-10-21T05:42:31.443+00:00
To change the item programmatically, try to specify a value of CurrentItem.

<CarouselView x:Name="carousel" ItemsSource="{Binding DataColellection}"> <CarouselView.ItemTemplate> <DataTemplate>  </DataTemplate> </CarouselView.ItemTemplate> </CarouselView> //specify the currentItem var dataCollection = viewModel.DataColellection; carousel.CurrentItem = dataCollection[1];

What do you use to play the video? CarouselView doesn't provide a property to change the caching category. If you use MediaElement to play the video, try to detect the bindingContext changed event to end the video. Here is a similar issue case, you could refer to it.
https://stackoverflow.com/questions/64716807/stop-and-reset-video-when-carousal-swiped-xamarin-forms

JarvanZhang 23,971

To use parameterized constructor in xaml, try using x:Arguments to pass the value.

public class CustomLayout : StackLayout
{
    public CustomLayout(string customProprrty)
    {
        this.CustomProperty = customProprrty;
    }
    public string CustomProperty { get; set; }
}

<CustomView>
    <x:Arguments>
        <Image Source="somepath"/>
    </x:Arguments>
</CustomView>

Wei Wen 1,126 Reputation points

2021-10-21T11:53:46.917+00:00

@JarvanZhang Currently I use MediaElement, but it is somewhat slow, especially with the fact that each time it is scrolled off and then back, reloading worsens the issue. So I am thinking about using VLC. To use VLC, I have to create a custom view to include it, and that is why I asked about custom component. Thanks about the solution to set the current item, I will try it.
Wei Wen 1,126 Reputation points

2021-10-21T18:50:17.287+00:00

Passing parameter this way does not work because parameter value is hardcoded here. But in CarouselView, each item is different, and so the passed in parameter should be different.

Share via

How to swipe from bottom up to view the next photo/video in a list of photos/videos

0 additional answers

Your answer