.NET MAUI on Mac CarouselView.ItemTemplate with Frame HorizontalOptions set to "CenterAndExpand-CodePudding

I am using VisualStudio for mac 17.4.1, I am using .NET 7.0 MAUI and am on a MacBookPro M1 running Ventura 13.0.1 (22A400).

I am new to the .NET MAUI framework and I am trying to go through the Udemy course located here:

https://www.udemy.com/course/net-maui-course/learn/lecture/32295332#overview

In this course they walk through the CarouselView and how to fill it with data in the XAML file. When he builds the app, it looks like this:

enter image description here

With this code as the XAML file being rendered:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ControlsDemo.CollectionsControlsDemo"
             Title="CollectionsControlsDemo">
    <StackLayout>
        <CarouselView IndicatorView="indicatorView">
            <CarouselView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>mono</x:String>
                    <x:String>monodroid</x:String>
                    <x:String>monotouch</x:String>
                    <x:String>monorail</x:String>
                    <x:String>monodevelop</x:String>
                    <x:String>monotone</x:String>
                    <x:String>monopoly</x:String>
                    <x:String>monomodal</x:String>
                    <x:String>mononucleosis</x:String>
                </x:Array>
            </CarouselView.ItemsSource>
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Frame Margin="20"
                               BorderColor="White"
                               CornerRadius="5"
                               HasShadow="True"
                               HeightRequest="100"
                               HorizontalOptions="Center"
                               VerticalOptions="CenterAndExpand">
                            <Label Text="{Binding .}"/>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
        <IndicatorView x:Name="indicatorView"
                       HorizontalOptions="Center"
                       IndicatorColor="LightGray"
                       SelectedIndicatorColor="DarkGray"/>
    </StackLayout>
</ContentPage>

I am using the exact same code, but mine is rendering the application far too low to even be usable:

enter image description here

For me to even see the CarouselView I need to extend my application to take up the majority of the screen only to see a tiny portion of the actual CarouselView. When I tried to get rid of the VerticalOptions="CenterAndExpand" I could see the Carousel but then the indicator wouldn't be visualized. I have no idea what is happening and any help on this would be really helpful.

Thank you in advance for anyone who is able to help.

I've tried changing the TranslationY, Padding sizes as well as the VerticalOptions but all of which don't seem to make a big difference or don't make sense to set to extreme values. For an example, by setting the TranslationY to a high negative value like -1000, the Carousel would be visualized, but this doesn't make sense to set as the Translation as I would have assumed it would just render the XAML one after the other. It's almost acting like there is an element above the Carousel that is pushing it to be lower than it is, but that would be impossible upon inspecting the XAML code provided.

CodePudding user response：

To set the Frame in the center, you could set the VerticalOptions of CarouselView:

<CarouselView IndicatorView="indicatorView" VerticalOptions="CenterAndExpand">

To make the interface more beautiful you could slightly ajust the Margin of the IndicatorView:

<IndicatorView x:Name="indicatorView"
    Margin="0,0,0,20"        // make the indicatorview not too close to the bottom
    HorizontalOptions="Center"
    IndicatorColor="LightGray"
    SelectedIndicatorColor="DarkGray"/>

To change the size of the Frame, you could also set the WidthRequest or HeightRequest. You can set the suitable value for the control as you want

<DataTemplate>
    <StackLayout>
        <Frame Margin="20"
                      
            WidthRequest="200"
            HeightRequest="200"
            ....
        </Frame>
    </StackLayout>
</DataTemplate>

The first picture you post seems to be an Andriod app sample and different platforms behave differently when controls render. My answer works well on different platforms. For more information, you could refer to CarouselView and IndicatorView.

Hope it works for you.