Net maui how to set vertical carousel with videos ?

Question

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

Answer 1

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.

• Specify CarouselView layout.
• MediaElement.

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.