Net maui how to set vertical carousel with videos ?

Sami 741 Reputation points
2023-07-10T14:22:18.83+00:00

Net maui how to set videos like as tiktok with vertical carousel or another solution ? thanks

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,591 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 30,566 Reputation points Microsoft Vendor
    2023-07-12T06:33:25.76+00:00

    Hello,

    how to set vertical carousel with videos.

    For your question, the following two points are mainly involved.

    • How to play a video using controls in MAUI.
    • How to place a video player in a vertically oriented carouselView in MAUI.

    For the first question, in MAUI, you can use the official MediaElement control to play the video. For the other question, in carouselView, you could adjust it to vertical orientation by setting the `Orientation property.

    Please refer to the following documentations and key Code snippets.

    Code snippets:

    // for using mediaelement, you need to install CommunityToolkit.Maui.MediaElement and CommunityToolkit.Maui Nuget Packages, and use them in MauiProgram.cs.
    builder
         .UseMauiApp<App>()
         .UseMauiCommunityToolkit()
         .UseMauiCommunityToolkitMediaElement()
    
    // in xaml you need to use communitytoolkit at first.
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    // Then use the vertical orientation in the layout and set the MediaElement.
    <CarouselView ItemsSource="{Binding Videos}">
            <CarouselView.ItemsLayout>
                <LinearItemsLayout Orientation="Vertical" />
            </CarouselView.ItemsLayout>
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                        <toolkit:MediaElement  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="{Binding .}"
                  ShouldShowPlaybackControls="True" ShouldAutoPlay="True" />
                    </StackLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
    

    Best Regards,

    Alec Liu.


    If the answer is the right solution, 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.