与调整大小的 ImageButton（使用 AspectFit）一起使用时的 Xamarin 网格大小问题

Question

我想要的是两个并排的图像按钮，它们与屏幕底部的屏幕宽度相匹配。无论屏幕大小，我都希望纵​​横比相同。

I want it to look something like this

我尝试使用 Grid 来实现这一点。我有 2 个具有相同源图像的 ImageButton 元素。问题是当这些图像被调整为网格行的高度时，它们不会包裹新的图像高度，当它们被调整大小时，它们不会填满整个屏幕宽度。在这两种情况下，网格似乎都采用原始图像的高度。

Screen 1440 x 2960 in preview, when image is scaled down, grid height is bigger than it should be.

Screen 1800 x 2560 in preview, when image is supposed to be scaled up, but it seems that grid is clamping it to the original image height.

XAML：

<StackLayout 
Spacing="0">

<StackLayout
    VerticalOptions="Start">
</StackLayout>

<StackLayout
    VerticalOptions="CenterAndExpand">
</StackLayout>

<StackLayout
    Orientation="Horizontal"
    BackgroundColor="Bisque"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="FillAndExpand">

    <Grid x:Name="grid"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="FillAndExpand"
        ColumnSpacing="0"
        RowSpacing="0">

        <ImageButton
           x:Name="imageButton"                         
           Source="key1.png"
            Grid.Row="0"
            Grid.Column="0"/>

        <ImageButton                        
           Source="key1.png"
           Grid.Row="0"
           Grid.Column="1" />
    </Grid>

</StackLayout>

我找到了缩小图像大小时的解决方法：

imageButton.SizeChanged += (o, e) => 
        {
            grid.RowDefinitions.Clear();
            grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(imageButton.Height, GridUnitType.Absolute) });
        };

但这不是我想要的解决方案（特别是因为它在这两种情况下都不起作用）。我错过了什么？这应该很简单。这可能不是网格问题而是其他问题？我怎样才能做到这一点？

Answer 1

无论屏幕大小，我都希望纵​​横比相同。

尝试将RowDefinition 和ColumnDefinition 分配给Grid。并将VerticalOptions="EndAndExpand" 设置为 Grid 以使 imageButton 固定在屏幕底部。：

<StackLayout 
        Spacing="0">

                <StackLayout BackgroundColor="Yellow"
                     VerticalOptions="Start">
                </StackLayout>

                <StackLayout BackgroundColor="Green"
                        VerticalOptions="CenterAndExpand">
                </StackLayout>



    <Grid x:Name="grid"
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="EndAndExpand"
                        ColumnSpacing="0"
                        RowSpacing="0">

        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <ImageButton
                        x:Name="imageButton"                         
                        Source="Images.png"
                        Grid.Row="0"
                        Grid.Column="0"
                        Aspect="AspectFill"/>

        <ImageButton                        
                        Source="Images.png"
                        Grid.Row="0"
                        Grid.Column="1" 
                        Aspect="AspectFill"/>
    </Grid>
</StackLayout>