按钮 Xamarin XAML 中的中心图标和文本答案

【问题标题】：Center Icon and Text in a button Xamarin XAML按钮 Xamarin XAML 中的中心图标和文本
【发布时间】：2015-09-29 13:55:44
【问题描述】：

我不知道如何将按钮内的图标居中并将其放在文本上方，我也没有找到有关它的信息，我被要求做一种“选项卡”选项菜单，但在下方屏幕，我发现由于“设计含义”等原因，它有点“难”，所以我决定使用按钮会更容易，但现在的问题是如何使图像居中并使文本正确，如果有的话有人可以帮助我，那就太好了。到目前为止，这是我的代码：

<?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

谢谢！

【问题讨论】：

标签： image xaml button xamarin

【解决方案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"/>

【讨论】：

我正在尝试这个，但我在 android 和 ios 中看不到图像，只有文本可见
我在带有较大文本的按钮上尝试过，图像从中心向右移动

【解决方案2】：

您可以使用方向设置为垂直的 StackLayout，并在其中添加按钮和标签。

【讨论】：

【解决方案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" />

请参阅Working with Images doc，了解每个平台的构建操作的完整详细信息。

【讨论】：