MAUI HorizontalStackLayout has no effect-CodePudding

I am trying to do a little MAUI project on my own and it appears the HorizontalStackLayout has no effects on the childs controls.

Here the xaml code:

<CollectionView.ItemTemplate>
                <DataTemplate x:DataType="model:Game">
                    <Border HeightRequest="100"
                            Stroke="Gray"
                            BackgroundColor="GhostWhite"
                            StrokeThickness="3"
                            StrokeShape="RoundRectangle 10">
                        <VerticalStackLayout>
                            <Label Text="{Binding Name}"
                                   HorizontalTextAlignment="Start"
                                   TextColor="Black"
                                   FontSize="30"
                                   Margin="10, 0, 0, 10"/>
                            <CollectionView ItemsSource="{Binding ConsolesList}"
                                            x:Name="ListConsole">
                                <CollectionView.ItemTemplate>
                                    <DataTemplate x:DataType="model:Console">
                                        <HorizontalStackLayout>
                                            <Label Text="{Binding Name}"
                                                       TextColor="Black"
                                                       Margin="10, 0, 0, 10"/>
                                        </HorizontalStackLayout>
                                    </DataTemplate>
                                </CollectionView.ItemTemplate>
                            </CollectionView>
                        </VerticalStackLayout>
                        <Border.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:MainViewModel}}, Path=TapCommand}"
                                                  CommandParameter="{Binding .}"/>
                        </Border.GestureRecognizers>
                    </Border>
                </DataTemplate>
            </CollectionView.ItemTemplate>

And here the result:

As you can see, the names of the consoles from the second label are positioned vertically instead of horizontally.

I tried to remove the horizontalStackLayout and change the VerticalStackLayout into an horizontal one but even then, nothing changes. I also tried to change the two by Horizontal and vertical stack layout with a normal stackLayout and giving the Orientation the vertical for the first and horizontal for the second, still nothing.

Am I missing something?

CodePudding user response：

your entire DataTemplate

<DataTemplate x:DataType="model:Console">
  <HorizontalStackLayout>
     <Label Text="{Binding Name}" TextColor="Black" Margin="10, 0, 0, 10"/>
  </HorizontalStackLayout>
</DataTemplate>

is repeated once for each item in ItemsSource. That means that your UI contains one HorizontalStackLayout for each console

CollectionView has an ItemsLayout property that can be set to HorizontalList to layout items within the template Horizontally instead of the default Vertical layout