Xamarin.Forms - CollectionView 无法使用标签正确显示图像的大小

Question

我有一个收藏视图，显示书籍封面及其标题。问题是，一旦我将标签放在图像标签下，图像本身就会调整大小，而不是像我在代码中设置的那样对应于 200x145。

这是代码：

<CollectionView HorizontalScrollBarVisibility="Never"
                                Margin="0,0,20,15" 
                                ItemsSource="{Binding AuthorBooks}"
                                VerticalOptions="StartAndExpand"
                                ItemsLayout="HorizontalList"
                                HeightRequest="210">
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <Grid Margin="8,0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <PanCake:PancakeView Grid.Row="0" Margin="0,0,20,0">

                                        <ffimageloading:CachedImage Source="{Binding Cover,TargetNullValue='noimage_placeholder'}" HeightRequest="200" WidthRequest="145">
                                            <ffimageloading:CachedImage.GestureRecognizers>
                                                <TapGestureRecognizer Command="{Binding GoToBookDetailPage, Source={RelativeSource AncestorType={x:Type viewmodels:BookPageViewModel}}}"
                                              CommandParameter="{Binding .}" />
                                            </ffimageloading:CachedImage.GestureRecognizers>
                                        </ffimageloading:CachedImage>
                                    </PanCake:PancakeView>
                                    <Label Text="{Binding Title}" FontSize="14" Grid.Row="1" HorizontalOptions="Start" FontFamily="Inter" WidthRequest="145" LineBreakMode="TailTruncation" MaxLines="2" FontAttributes="Bold" TextColor="Black"/>
                                </Grid>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView> 

它是这样的：

图像应覆盖所有空间。

Answer 1

问题是您对网格的两个 RowDefinitions 使用

*

。当您对两者都使用

*

时，这意味着它们都将获得 50% 的可用空间。

将第二个 RowDefinition 更改为

auto

:

<Grid Margin="8,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
    <PanCake:PancakeView Grid.Row="0" Margin="0,0,20,0">
        <ffimageloading:CachedImage Source="{Binding Cover,TargetNullValue='noimage_placeholder'}" HeightRequest="200" WidthRequest="145">
            <ffimageloading:CachedImage.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding GoToBookDetailPage, Source={RelativeSource AncestorType={x:Type viewmodels:BookPageViewModel}}}"
                                      CommandParameter="{Binding .}" />
            </ffimageloading:CachedImage.GestureRecognizers>
        </ffimageloading:CachedImage>
    </PanCake:PancakeView>
    <Label Text="{Binding Title}" FontSize="14" Grid.Row="1" HorizontalOptions="Start" FontFamily="Inter" WidthRequest="145" LineBreakMode="TailTruncation" MaxLines="2" FontAttributes="Bold" TextColor="Black"/>
</Grid>

或固定值，例如

40

:

<Grid Margin="8,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="40"/>
    </Grid.RowDefinitions>
    <PanCake:PancakeView Grid.Row="0" Margin="0,0,20,0">
        <ffimageloading:CachedImage Source="{Binding Cover,TargetNullValue='noimage_placeholder'}" HeightRequest="200" WidthRequest="145">
            <ffimageloading:CachedImage.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding GoToBookDetailPage, Source={RelativeSource AncestorType={x:Type viewmodels:BookPageViewModel}}}"
                                      CommandParameter="{Binding .}" />
            </ffimageloading:CachedImage.GestureRecognizers>
        </ffimageloading:CachedImage>
    </PanCake:PancakeView>
    <Label Text="{Binding Title}" FontSize="14" Grid.Row="1" HorizontalOptions="Start" FontFamily="Inter" WidthRequest="145" LineBreakMode="TailTruncation" MaxLines="2" FontAttributes="Bold" TextColor="Black"/>
</Grid>

或者，您也可以使用带有

*

的因子，例如为了给图像 3/4 的可用空间，其余的给标签，你会这样做：

<Grid Margin="8,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="3*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <PanCake:PancakeView Grid.Row="0" Margin="0,0,20,0">
        <ffimageloading:CachedImage Source="{Binding Cover,TargetNullValue='noimage_placeholder'}" HeightRequest="200" WidthRequest="145">
            <ffimageloading:CachedImage.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding GoToBookDetailPage, Source={RelativeSource AncestorType={x:Type viewmodels:BookPageViewModel}}}"
                                      CommandParameter="{Binding .}" />
            </ffimageloading:CachedImage.GestureRecognizers>
        </ffimageloading:CachedImage>
    </PanCake:PancakeView>
    <Label Text="{Binding Title}" FontSize="14" Grid.Row="1" HorizontalOptions="Start" FontFamily="Inter" WidthRequest="145" LineBreakMode="TailTruncation" MaxLines="2" FontAttributes="Bold" TextColor="Black"/>
</Grid>