如何減少 android 上按鈕上的文本和圖像之間的空間

Question

我有一個帶有圖像和圖像下方文本的按鈕，我想在 android 上減少兩者之間的空間，在 iOS 上之間沒有空格，這就是我所做的：

  <Grid x:Name="MainGrid">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" />

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

                        <Button x:Name="btnApplyLeave"  ContentLayout="Top,0" BackgroundColor="White"  FontSize="10" TextColor="#777777"" ImageSource="applyleave.png" BorderWidth="1" BorderColor ="#ededed" Text="Apply Leave" Grid.Row="0" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="Fill" HeightRequest="{Binding Width, Source={x:Reference btnApplyLeave}}" >
                            <Button.CornerRadius>
                                <OnPlatform Android="6">

                                </OnPlatform>
                            </Button.CornerRadius>
                        </Button>

                        <Button x:Name="captureIntent" ContentLayout="Top,0" ImageSource="capturescores.png" Text="Capture Scores" TextColor="#777777 FontSize="10" BorderWidth="1" BorderColor ="#ededed" BackgroundColor="White" Grid.Row="0" Grid.Column="1" VerticalOptions="Center" HorizontalOptions="Fill" HeightRequest="{Binding Width, Source={x:Reference captureIntent}}" >
                            <Button.CornerRadius>
                                <OnPlatform Android="6">

                                </OnPlatform>
                            </Button.CornerRadius>
                        </Button>
                    </Grid>

Answer 1

我不確定如何使用單個按鈕來完成，但您可以使用 TapGestureRecognizer 制作一個框架，該框架就像一個按鈕。 TapGestureRecognizer 既有 Tapped（如點擊按鈕）和 MVVM 的命令。 代碼需要在您的項目中進行一些調整，但您明白了：

    <Frame HeightRequest="{Binding yourHeight}" CornerRadius="6" HasShadow="false" 
           BackgroundColor="White" BorderColor="#ededed" HorizontalOptions="Fill">
        <Frame.GestureRecognizers>
            <TapGestureRecognizer />
        </Frame.GestureRecognizers>
        <Image Source="image.png" HorizontalOptions="Center" VerticalOptions="Center"/>
        <Label Text="TestText" HorizontalOptions="Center" VerticalOptions="Center"/>
    </Frame>

Answer 2

我發現這個問題與 android 平台中的ContentLayout有關。

如果我在 android 平台中將spacing的值設置為-200我們可以減小間距。

if (Device.RuntimePlatform == Device.Android)
        {
            btnApplyLeave.ContentLayout = new Button.ButtonContentLayout(Button.ButtonContentLayout.ImagePosition.Top, -200);
        }