我有一个收藏视图,显示书籍封面及其标题。问题是,一旦我将标签放在图像标签下,图像本身就会调整大小,而不是像我在代码中设置的那样对应于 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>
图像应覆盖所有空间。
问题是您对网格的两个 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>