Search code examples
xamlxamarinmaui

Issue with ContentLayout in .NET MAUI - Text not showing and Incorrect Positioning


I'm using a CollectionView to display a list of items in my .NET MAUI project, and I have a custom header with a few buttons arranged using StackLayout. However, I'm encountering an issue where the Button elements inside the StackLayout with ContentLayout="Top" are not showing their text. Instead, only the images are visible for those buttons. The Button elements without images display their text correctly.

<CollectionView SelectionMode="Single">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" Span="2" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>Item 1</x:String>
            <x:String>Item 2</x:String>
            <x:String>Item 3</x:String>
            <x:String>Item 4</x:String>
            <x:String>Item 5</x:String>
            <x:String>Item 6</x:String>
            <x:String>Item 7</x:String>
            <x:String>Item 8</x:String>
            <x:String>Item 9</x:String>
            <x:String>Item 10</x:String>
            <x:String>Item 11</x:String>
            <x:String>Item 12</x:String>
        </x:Array>
    </CollectionView.ItemsSource>
    <CollectionView.Header>
        <VerticalStackLayout
            x:Name="myStack"
            Padding="10,0"
            VerticalOptions="Start">
            <Label
                FontSize="Subtitle"
                HorizontalOptions="Center"
                Text="Start without template" />
            <HorizontalStackLayout HorizontalOptions="Center">
                <Button
                    BackgroundColor="Transparent"
                    ContentLayout="Top"
                    FontSize="Small"
                    ImageSource="line_1.png"
                    Text="1 Line"
                    TextColor="Black" />
                <Button
                    BackgroundColor="Transparent"
                    ContentLayout="Top"
                    FontSize="Small"
                    ImageSource="line_2.png"
                    MinimumHeightRequest="50"
                    Text="2 lines"
                    TextColor="Black" />
                <Button
                    BackgroundColor="Transparent"
                    ContentLayout="Top"
                    FontSize="Small"
                    ImageSource="line_3.png"
                    MinimumHeightRequest="50"
                    Text="{Binding Linethree}"
                    TextColor="Black" />
            </HorizontalStackLayout>
            <BoxView HeightRequest="1" />
            <Label
                Padding="10"
                FontSize="Subtitle"
                HorizontalOptions="Center"
                Text="Template categories" />
       </VerticalStackLayout>
    </CollectionView.Header>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Frame
                Margin="10"
                Padding="0"
                BorderColor="Transparent"
                HasShadow="False"
                HorizontalOptions="Center">
                <Frame.Content>
                    <StackLayout BackgroundColor="#e0e0e0" HorizontalOptions="FillAndExpand">
                        <Label
                            FontSize="Small"
                            HorizontalOptions="CenterAndExpand"
                            HorizontalTextAlignment="Center"
                            Text="Card printing"
                            VerticalOptions="Center"
                            VerticalTextAlignment="Center" />
                        <Image
                            Aspect="AspectFill"
                            HorizontalOptions="FillAndExpand"
                            Source="category.png" />
                    </StackLayout>
                </Frame.Content>
            </Frame>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Solution

  • According to your reply, about this issue:

    Text not showing and Incorrect Positioning...

    Finally end it through the use of ImageButton.