在CollectionView中水平填充项目，每个项目在xamarin表单中采用屏幕宽度

Question

我尝试将CollectionView中的项目水平放置在一行中，因为每个项目都应该填满屏幕宽度。然而，在当前的设置中，它不会填充屏幕的宽度。我正在寻找的是在水平方向上一次一个项目。

<DataTemplate x:Key="UpdateRecentItemTemplate">
            <ContentView BackgroundColor="Yellow" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <yummy:PancakeView Style="{StaticResource Pancake}" VerticalOptions="Center" HeightRequest="80" BackgroundGradientStartPoint="0,0" BackgroundGradientEndPoint="0,1">
                    <yummy:PancakeView.Shadow>
                        <yummy:DropShadow Color="{Binding BindingContext.FirstColor, Source={x:Reference MyPage}}" BlurRadius="1"></yummy:DropShadow>
                    </yummy:PancakeView.Shadow>
                    <yummy:PancakeView.BackgroundGradientStops>
                        <yummy:GradientStopCollection>
                            <yummy:GradientStop Color="{Binding BindingContext.FirstColor, Source={x:Reference MyPage}}" Offset="0" />
                            <yummy:GradientStop Color="{Binding BindingContext.SecondColor, Source={x:Reference MyPage}}" Offset="1" />
                        </yummy:GradientStopCollection>
                    </yummy:PancakeView.BackgroundGradientStops>
                    <StackLayout VerticalOptions="Center" BackgroundColor="Transparent">
                        <Label Grid.Row="0">
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span Text="{Binding ChapterID, StringFormat=' {0} '}" FontSize="Small"/>
                                    <Span Text="{Binding ArabicEnglishName, StringFormat=' {0} '}" FontSize="Medium" FontAttributes="Bold"/>
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>
                        <Label Grid.Row="1">
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span Text="{Binding AyaNumber, StringFormat=' Ayat No. {0}'}" FontSize="Medium"/>
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>
                    </StackLayout>
</yummy:PancakeView>
            </ContentView>

[![<Grid HeightRequest="140" Padding="0" BackgroundColor="Red">
                                    <CollectionView ItemsSource="{Binding Recents}"
                                                    VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never" HorizontalOptions="FillAndExpand"
                                            ItemTemplate="{StaticResource UpdateRecentItemTemplate}" x:Name="RecentView">
                                        <CollectionView.ItemsLayout>
                                            <GridItemsLayout Orientation="Horizontal"  HorizontalItemSpacing="5" Span="1" />
                                        </CollectionView.ItemsLayout>
                                    </CollectionView>
                                </Grid>

​

​

Answer 1

最简单的方法是使用Carouselview而不是CollectionView。使用Carouselview，我们可以设法一次水平显示一个项目。所以用Carouselview更改了CollectionView，并且它起作用了。此外，我一次只有4个项目要展示，所以在这种情况下，Carouselview比CollectionView更接近。