如何使项目填充集合视图的剩余空间

Question

我有一个集合视图来显示所选周的日期，我希望集合视图中的项目以相等的大小填充剩余空间。在不计算代码大小和设置填充的情况下，我如何做到这一点？

            <CollectionView Grid.Column="1" ItemsSource="{Binding DaysOfWeek}" BackgroundColor="Red" HorizontalOptions="FillAndExpand" HeightRequest="50" SelectionMode="Single">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Horizontal"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="{x:Type sys:DateTime}">
                    <Grid BackgroundColor="Green">
                        <Label Grid.Row="0" Text="{Binding Date, StringFormat='{}{0:ddd}'}" TextColor="White" HorizontalTextAlignment="Center"/>
                        <Label Grid.Row="1" Text="{Binding Day}" TextColor="White" HorizontalTextAlignment="Center"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

这就是我的结果：https://i.stack.imgur.com/7bPKY.png这就是我想要做的：https://i.stack.imgur.com/QnC5Y.png

Answer 1

我发现我可以使用Xamarin社区工具中的MathExpressionConverter来计算项目的宽度。

<ContentPage.Resources>
    <xct:MathExpressionConverter x:Key="MathExpressionConverter"/>
</ContentPage.Resources>

我取CollectionView的宽度，将其除以7，并将此值设置为项目的宽度

            <CollectionView x:Name="CollView" Grid.Column="1" ItemsSource="{Binding DaysOfWeek}" HorizontalOptions="FillAndExpand" HeightRequest="50" SelectionMode="Single">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Horizontal"/>
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="{x:Type sys:DateTime}">
                        <Grid WidthRequest="{Binding Source={x:Reference CollView}, Path=Width, Converter={StaticResource MathExpressionConverter}, ConverterParameter='x/7'}">
                            <Label Grid.Row="0" Text="{Binding Date, StringFormat='{}{0:ddd}'}" TextColor="White" HorizontalTextAlignment="Center"/>
                            <Label Grid.Row="1" Text="{Binding Day}" TextColor="White" HorizontalTextAlignment="Center"/>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>