在Xamarin XAML中按钮内使图标和文本居中

Question

我不知道如何在按钮内部居中图标并将其放在文本上方，我也没有找到相关信息。我被要求做一种类似于“选项卡”菜单的东西，但是在屏幕下方，我发现这有点困难，因为存在“设计方面的影响”等问题，所以我决定用按钮会更容易些，但现在的问题是如何将图片居中并获得正确的文本。如果有人能帮助我，那将是太棒了。这是我目前的代码：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         BackgroundColor="Silver"
         x:Class="XamForm.View.MainPage">
<Label Text="{Binding MainText}" VerticalOptions="Center"  HorizontalOptions="Center" />


 <StackLayout Padding="30">
<Label x:Name="lblCuantos" Text="No #" TextColor="Gray" FontSize="20"/>
<Label x:Name="lblNombre" Text="" FontSize="20"/>
<Button  x:Name="btn1" Text="Oprimir" Clicked="Accion"/>
<Button  x:Name="btn2"  BackgroundColor="White" Image="iconRes.png"  HorizontalOptions="CenterAndExpand" Text="Gridd" TextColor="Gray" Clicked="Accion2"/>
<Button  x:Name="btn3"  BackgroundColor="White" Image="iconRes.png"  HorizontalOptions="CenterAndExpand"  TextColor="Gray" Clicked="Accion2"/>


</StackLayout>
</ContentPage>

这是按钮本身的实际结果：

http://oi59.tinypic.com/11so9le.jpg

这是菜单最终应该看起来的样子：

http://oi62.tinypic.com/10pzw2f.jpg

谢谢！

- elunap

Answer 1

你可以在按钮中使用 ContentLayout="Top,0"。例如，在你的情况下，使用以下代码：

<Button  x:Name="btn2" ContentLayout="Top,0" BackgroundColor="White" Image="iconRes.png"  HorizontalOptions="CenterAndExpand" Text="Gridd" TextColor="Gray" Clicked="Accion2" />
<Button  x:Name="btn3" ContentLayout="Top,0" BackgroundColor="White" Image="iconRes.png"  HorizontalOptions="CenterAndExpand"  TextColor="Gray" Clicked="Accion2"/>

- Tushar patel

---

我正在尝试这个，但在安卓和iOS上只能看到文本，图片不可见。 - Bhuvaneshwaran Vellingiri

我已尝试在文本较大的按钮上进行，图片会从中心向右移动。 - doxsi

Answer 2

您可以使用 Orientation 设置为 Vertical 的 StackLayout，在其中添加 Button 和 Label。

- Immons

Answer 3

Button.Image 属性的类型是 FileImageSource，所以任何“本地”图像都可以用于按钮。这意味着以下代码将起作用：

someButton.Image = "imageName.png";

或者你可以写成

someButton.Image = ImageSource.FromFile("imageName.png");

如果 imageName.png 位于每个应用程序项目中（在 iOS 中的 Resources 文件夹，在 Android 中的 Resources/Drawable 文件夹以及 WinPhone 中的应用程序根目录；每个都设置了适当的构建操作）。

Xaml 等效代码如下：

<Button Text="Has Image" Image="someImage.png" />

请参考 图像处理文档以获取每个平台的构建行为的完整细节。

- Hemant Ramphul