Xamarin-圖像溢出StackLayout

Question

我正在嘗試以Xamarin形式為iOS和Android制作畫廊風格的網格視圖，但是出現一個布局選項似乎被忽略的問題，並且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);

提前致謝！

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看看我是否可以擁有更簡單的代碼