xamlpopupmauimaui-community-toolkit

Label text in CarouselView using MCT Popup is overflowing in MAUI


Using a CarouselView within a MAUI Community Toolkit (MCT) Popup, labels set within the carousel datatemplate appear to be overflowing. Setting a fixed WidthRequest smaller than the width of the popup, does work for the label area. However, the text still overflows. As it appears, the overflowing happens only on the right side of the label. It seems like the label area has a correct width but the text within it is much wider.

It's nothing too special, just a carouselview with items:

<tk:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
          xmlns:m="clr-namespace:CarouselPopupTest.Models"
          xmlns:tk="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
          x:Class="CarouselPopupTest.Controls.Popup_Instructions">
    <Frame>
        <VerticalStackLayout>
            <CarouselView ItemsSource="{Binding Global.Instructions}"
                          IndicatorView="indicatorView"
                          IsSwipeEnabled="True"
                          Margin="0,0,0,16"
                          Loop="False">
                <CarouselView.ItemTemplate>
                    <DataTemplate x:DataType="m:Instruct">
                        <Frame>
                            <VerticalStackLayout>
                                <Label Text="{Binding Title}"
                                       HorizontalTextAlignment="Center"
                                       HorizontalOptions="Center"
                                       WidthRequest="224"/>
                                <Image Source="{Binding Image}"
                                       WidthRequest="224"/>
                                <Label Text="{Binding Description}"
                                       HorizontalTextAlignment="Center"
                                       HorizontalOptions="Center"
                                       WidthRequest="224"/>
                            </VerticalStackLayout>
                        </Frame>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>
            <IndicatorView MaximumVisible="8"
                           x:Name="indicatorView"
                           HorizontalOptions="End">
                <IndicatorView.IndicatorTemplate>
                    <DataTemplate>
                        <BoxView Style="{StaticResource IndicatorViewIndicator}"/>
                    </DataTemplate>
                </IndicatorView.IndicatorTemplate>
            </IndicatorView>
            <Grid ColumnDefinitions="*,*">
                <Button ImageSource="btn_check.svg"
                        Grid.Column="0"/>
            </Grid>
        </VerticalStackLayout>
    </Frame>
</tk:Popup>

Here's how it appears when viewing the popup-carousel in debug on any device:

enter image description here

Note: This screenshot was made after removing the <Image>.

Image views actually do render fine. Only the label elements keep overflowing for some unknown reason. Is this a bug or am I doing something that I'm not supposed to do here?


Solution

  • I reproduce this issue in .NET7. The ext is overflowing in the CarouselView in a CommunityToolkit Popup only for the first time it render.

    The workaround is to use .NET8 with the latest CommunityToolkit Maui (Version8.0.1), which seems to fix the issue.

    Hope it helps!