Xamarin集合控件内如何在图片下方堆叠文本并消除底部多余空白

问题原因&解决方案 #

你遇到的底部红色空白问题由三个设置共同导致：

• Grid第一行使用3*比例高度，会强制占用Frame内剩余的全部空间，图片用AspectFit等比缩放后无法填满行高，就会露出红色背景
• Frame设置了VerticalOptions="FillAndExpand"，会强制撑满集合条目分配的所有高度，间接放大了Grid的多余空白
• 图片底部自带15px的Margin，会拉开和下方Label的间距

按以下修改代码即可实现需求，不需要为不同高度的图片单独设置HeightRequest：

<StackLayout>
    <Frame
        Margin="10"
        Padding="0"
        BorderColor="{StaticResource Gray-500}"
        CornerRadius="5"
        HasShadow="False"
        HorizontalOptions="Center"
        VerticalOptions="Center"> <!-- 替换原FillAndExpand，让Frame自适应内容高度 -->
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" /> <!-- 替换原3*，行高适配图片实际渲染高度 -->
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Image
                Grid.Row="0"
                Margin="15,15,15,0" <!-- 把图片底部Margin改为0，消除和文本的间距 -->
                Aspect="AspectFit"
                BackgroundColor="Red"
                Source="{Binding Image, Converter={StaticResource BytesToImageSource}}" />

            <Label
                Grid.Row="1"
                Padding="15,0,15,15"
                FontSize="18"
                HorizontalTextAlignment="Center"
                Text="{Binding Data}"
                TextColor="{StaticResource Gray-900}"
                VerticalTextAlignment="Center" />
        </Grid>
    </Frame>
</StackLayout>

内容的提问来源于stack exchange，提问作者Reza