随图像尺寸变化的按钮位置

Question

我正在使用Xamarin Forms，我想以编程方式添加Button。没什么容易的，但是我已经注意到，如果按钮使用Image而不是Text，则结果会大不相同。

现在我有了这个XAML，它定义了一个三层屏幕（页眉，内容和页脚）：

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Testing" 
             x:Class="Testing.MainPage"
             Title="MainPage"
             NavigationPage.HasNavigationBar="False">

    <ContentPage.Content>

        <!-- Content -->
        <StackLayout x:Name="contentpage" Padding="10,100,10,100">

            <!-- Header -->
            <StackLayout x:Name="header" Orientation="Horizontal" VerticalOptions="StartAndExpand">
                <Button Text="ABCD" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/>        
                <Button Text="EFGH" VerticalOptions="StartAndExpand" HorizontalOptions="EndAndExpand"/>        
            </StackLayout>
            <!-- /Header -->


            <!-- Center -->    
            <StackLayout x:Name="content" Opacity="1" Orientation="Vertical" VerticalOptions="Start" >
                <Button x:Name="test" Text="Fire fire fire" HorizontalOptions="CenterAndExpand" VerticalOptions="Start" />
            </StackLayout>
            <!-- /Center -->


            <!-- Bottom -->    
            <StackLayout x:Name="buttons" Orientation="Horizontal" VerticalOptions="EndAndExpand">
                <Button Text="1" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"  />
                <Button Text="2" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"  />
                <Button Text="3" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"  />
                <Button Text="4" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"  />
                <Button Text="5" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"  />
            </StackLayout>
            <!-- /Bottom -->

        </StackLayout> <!-- Content -->

    </ContentPage.Content>

</ContentPage>

然后在相应的C＃源代码中，向content添加一个按钮：

var custombutton = new Button();
custombutton.HorizontalOptions = LayoutOptions.CenterAndExpand;
custombutton.VerticalOptions = LayoutOptions.Start;
custombutton.Image = "mountain.jpg";
//custombutton.Text = "hello";


content.Children.Add(
    custombutton
);

如您所见，我想通过设置图像来更改按钮的属性，但是布局会发生巨大变化。

如您所见，如果我添加带有文本的按钮，一切正常（左），但是当我更改按钮的图像时，该按钮似乎不遵循其垂直选项（右），或者添加了一些奇怪的填充。当然，我只想添加带有文本或图像的按钮而不会丢失页脚StackLayout，但我不知道这里发生了什么。

我在这里想念东西吗？

尺寸更新

根据建议，我尝试了不同的布局，但是最终得到了相同的结果。最后一个测试使用Grid，而在ScrollView内部使用StackLayout。不同的视图和安排不会改变我的项目。

重要的是图像大小，如您所见：

此处的图像大小为1668 × 796和355 × 190像素。

此处提供了一个功能齐全的源代码：link to the solution。

控件更新

无论图像大小如何，使用Image都可以正常工作。不知道为什么Button会增加如此大的空间取决于图像。