XAML MAUI水平堆栈布局无效

mutmk8jj  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(184)

我试图自己做一个小的MAUI项目,看起来HorizontalStackLayout对查尔兹控件没有影响。
下面是xaml代码:

<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>

结果是:

如您所见,第二个标签中的控制台名称是垂直放置的,而不是水平放置的。
我尝试移除horizontalStackLayout并将VerticalStackLayout更改为水平堆栈布局,但即使这样,也没有任何变化。我还尝试使用普通的stackLayout通过水平和垂直堆栈布局更改这两个堆栈布局,并为第一个堆栈布局指定垂直方向,为第二个堆栈布局指定水平方向,但仍然没有任何变化。
我错过了什么吗?

s4n0splo

s4n0splo1#

你的整个DataTemplate

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

对于ItemsSource中的每个项目重复一次。这意味着您的UI对于每个控制台都包含一个HorizontalStackLayout
CollectionView有一个ItemsLayout属性,可以将其设置为HorizontalList,以便在模板中对项进行布局水平,而不是默认的垂直布局

相关问题