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

【问题标题】：How to make items fill remain space of collection view如何使项目填充集合视图的剩余空间
【发布时间】：2022-01-02 15:32:11
【问题描述】：

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

            <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

【问题讨论】：

您需要手动计算每个单元格的大小。

标签： android listview xamarin collectionview autosize

【解决方案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>

【讨论】：