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>
According to your reply, about this issue:
Text not showing and Incorrect Positioning...
Finally end it through the use of ImageButton
.