Xamarin -图像溢出StackLayout

Question

我正试着在iOS和安卓系统上用Xamarin表单创建一个画廊样式的网格视图，但有一个问题，布局选项似乎被忽略了，我在iOS和安卓系统上得到了不同的结果。

基本布局是:边框(红色)包含一个堆栈布局(粉色)，水平和垂直选项都设置为FillAndExpand，在顶部包含一个标签，下面设置为填充堆栈的其余部分。图像似乎只是在堆栈和框架之外展开，而忽略了垂直选项集。

我尝试将这些垂直选项设置为Fill、FillAndExpand、CentreAndExpand，但都有相同的结果。

如果我删除了Stack布局和标签，并将图像作为框架中唯一的子元素，那么它将按预期工作，但我还需要显示一个标签。

在横向和纵向方向上的结果是相同的。

平台上的结果，iOS是这里的主要问题：

用于将图像添加到网格的代码：

var imageSource = ImageSource.FromStream(() => new MemoryStream(imageData));
var framedImage = new Frame
{
    Padding = 0,
    Margin = 3,
    GestureRecognizers = { tapGesture },
    Content = new StackLayout
    {
        Padding = 10,
        HorizontalOptions = LayoutOptions.FillAndExpand,
        VerticalOptions = LayoutOptions.FillAndExpand,
        BackgroundColor = Color.Pink,
        Children =
        {
            textLabel,
            new Image
            {
                VerticalOptions = LayoutOptions.FillAndExpand,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                Source = imageSource,
                Aspect = Aspect.AspectFit
            },
        }
    },
    BackgroundColor = StyleSheet.BackgroundColorLight,
    BorderColor = StyleSheet.OutlineColorDark,
    CornerRadius = 5,
    HasShadow = false
};

grid.Children.Add(framedImage, columnCounter, rowCounter);

提前感谢！

Answer 1

通过执行以下操作修复该问题：

var image = new Image
{
    VerticalOptions = LayoutOptions.FillAndExpand,
    HorizontalOptions = LayoutOptions.FillAndExpand,
    Source = imageSource,
    Aspect = Aspect.AspectFit
};

var framedImage = new Frame
{
    Padding = 2,
    Margin = 1,
    GestureRecognizers = { tapGesture },
    Content = image,
    HasShadow = false,
    VerticalOptions = LayoutOptions.FillAndExpand,
    HorizontalOptions = LayoutOptions.FillAndExpand
};

var innergrid = new Grid
{
    RowDefinitions =
    {
        new RowDefinition {Height = new GridLength(20, GridUnitType.Auto)},
        new RowDefinition {Height = new GridLength(20, GridUnitType.Star)},
    }
};

innergrid.Children.Add(textLabel, 0, 0);
innergrid.Children.Add(framedImage, 0, 1);

var frame = new Frame
{
    Padding = 5,
    Margin = 3,
    GestureRecognizers = { tapGesture },
    Content = innergrid,
    BackgroundColor = StyleSheet.BackgroundColorLight,
    BorderColor = StyleSheet.OutlineColorDark,
    CornerRadius = 5,
    HasShadow = true
};

grid.Children.Add(frame, columnCounter, rowCounter);

我可能会尝试使用新的FlexLayout，看看是否可以使用更简单的代码