C# Xamarin-图像溢出堆栈布局

我试图在iOS和Android上用Xamarin表单创建一个画廊风格的网格视图，但有一个问题，布局选项似乎被忽略了，我在iOS和Android上得到了不同的结果

基本布局为： 具有边框（红色）的框架，其中堆栈布局（粉色）设置为FillAndExpand，用于水平和垂直选项，该选项在顶部包含标签，在下面设置图像以填充堆栈的其余部分。 图像似乎只是在堆栈和帧之外展开，而忽略了垂直选项集

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

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

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

在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);

---

提前谢谢

通过执行以下操作修复它：

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，看看是否可以使用更简单的代码

我不知道StackLayout是正确的选择。我会尝试两行的网格。第一个高度设置为自动（或某些特定值），第二个高度设置为*。也就是说，使用listview和/或flexlayout可能会使您的设计受益。使用Flowlistview根据框架内所需的高度，尝试使用两行网格，在其中放置标签和图像。此外，如果你仍然无法使用

网格

，你可以尝试新的@AditKothari，在开始我自己的实现之前，我已经看到了这个插件，但是我更喜欢自己做，因为它使未来的支持更容易（特别是当插件不再开发时！）。此外，我需要网格来处理不同的文件，而不仅仅是图像。