android - Xamarin 按钮边框问题

Question

我正在尝试使用 Xamarin.forms 制作应用。问题是在 Android 版本中，显示了按钮边框，我想将它们删除。我尝试了 BorderColor="Transparent" 但没有成功。

此外，我在使用文本时遇到了一些问题。事实上，我希望在图标和文本之间有一些填充(例如在 F 和 Facebook 之间)。有没有办法做到这一点 ？我如何处理有关文本大小的问题，例如 iPhone 5 和“Fa...ook”？我试着放一个较小的警察，但我想有最好的解决方案吗？

这是我的 Xaml 代码:

<Grid Margin="0,20,0,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Label Text="Waka'Lokos" Margin="0,20,0,0" HorizontalOptions="Center" FontSize="22.5" TextColor="White" Grid.Row="0" Grid.Column="1"/>
    <Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="fb" Text="Facebook" Grid.Row="1" Grid.Column="0" Image="fb.png" TextColor="#FEF4CA"/>
    <Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="contact" Text="Contact" Grid.Row="1" Grid.Column="1" Image="call.png" TextColor="#FEF4CA"/>
    <Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="insta" Text="Insta" Grid.Row="1" Grid.Column="2" Image="insta.png" TextColor="#FEF4CA"/>
    <Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="chants" Text="Chants" Grid.Row="2" Grid.Column="0" Image="micro.png" TextColor="#FEF4CA"/>
    <Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="communaute" Text="Team" Grid.Row="2" Grid.Column="1" Image="team.png" TextColor="#FEF4CA"/>
    <Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="youtube" Text="Youtube" Grid.Row="2" Grid.Column="2" Image="yt.png" TextColor="#FEF4CA"/>
    <Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="partenaires" Text="Partner" Grid.Row="3" Grid.Column="0" Image="partner.png" TextColor="#FEF4CA"/>
    <Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="plans" Text="Bons Plans" Grid.Row="3" Grid.Column="1" Image="money.png" TextColor="#FEF4CA"/>
    <Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="agenda" Text="Agenda" Grid.Row="3" Grid.Column="2" Image="agenda.png" TextColor="#FEF4CA"/>
</Grid>

Answer 1

对于同时包含文本和图像的按钮，我一直发现最简单的方法是使用带有图像和标签的堆栈布局，然后向其添加点击手势。这样你就可以更好地控制图像和文本的定位和缩放(并且它会处理你的边界问题)。所以像这样:

XAML:

<StackLayout x:Name="buttonStack" WidthRequest="50">
    <Image Source="fb.png" Aspect="AspectFit" HorizontalOptions="CenterAndExpand"/>
    <Label Text="Facebook" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center"/>
</StackLayout>

XAML.CS

  ...
  TapGestureRecognizer tap = new TapGestureRecognizer();
  tap.Tapped += HandleClickEvent;

  buttonStack.GestureRecognizers.Add(tap);
}

private void HandleClickEvent(object sender, EventArgs e)
{
  //some code here
}

如果你想伪造一个按钮点击动画，你可以试试这个。您可以将 250 毫秒调整为其他值以获得正确的感觉:

private async void HandleClickEvent(object sender, EventArgs e)
{
  await buttonStack.FadeTo(0,250);
  buttonStack.FadeTo(1,250);
  //some code here
}