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

Question

我不知道如何将按钮内的图标居中并将其放在文本上方，我也没有找到有关它的信息，我被要求做一种 "tabb" 选项菜单, 但在屏幕下方，我发现它有点 "hard" 因为 "design implications" 等，所以我决定使用按钮会更容易，但现在的问题是如何居中图像和把文字写对了，如果有人能帮助我，那就太好了。到目前为止，这是我的代码：

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

谢谢！

Answer 1

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

Answer 2

您可以在按钮中使用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"/>

Answer 3

Button.Image 属性属于 FileImageSource 类型，因此任何 'local' 的图像都可以在按钮中使用。这意味着以下代码将起作用：

someButton.Image = "imageName.png";

或者你可以写

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

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

Xaml 等价于：

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

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

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

Center Icon and Text in a button Xamarin XAML

xaml

image

button

xamarin