Button Xamarin自定义按钮图像下的说明文字

我试图将标签放在按钮内的图像下方，并将其居中。我有一个自定义的按钮渲染器，但由于某些原因，我不能产生所需的输出。代码是用C#Xamarin编写的

---

XAML代码：

              <Controls:ExtendedButton   
                  VerticalOptions="EndAndExpand"
                  HorizontalOptions="CenterAndExpand"
                  x:Name="search"
                  Text="Search"   
                  Image="Completed.png"
                  IsEnabled="{Binding IsLoading}"
                  Command="{Binding SearchCommand}"
                  WidthRequest ="120"
                  HeightRequest ="120"
                  TextColor="#FFFFFF"
                   >                    
            </Controls:ExtendedButton>

---

我想使用一个事实，即

ui按钮

支持已经支持

ui图像

以及

标题

文本，您只需要调整

ImageEdgeInsets

和

标题插入

并设置为x/y居中对齐

public class CenterImageButtonRenderer : ButtonRenderer
{
    public CenterImageButtonRenderer() { }

    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null)
        {
            if (Control != null)
            {
                Control.VerticalAlignment = UIControlContentVerticalAlignment.Center;
                Control.HorizontalAlignment = UIControlContentHorizontalAlignment.Center;

                #if DEBUG
                // Set the border so we can see button bounds on a white background for testing alignment
                Control.Layer.CornerRadius = 15;
                Control.Layer.BorderWidth = 5;
                Control.Layer.BorderColor = UIColor.Red.CGColor;
                #endif

                // The button image is not availabe due to lazy load, so we load "again", get the bounds and dispose of it... :-(
                var uiImage = UIImage.FromFile(((Button)e.NewElement).Image.File);
                var lineHeight = Control.TitleLabel.Font.LineHeight;
                Control.ImageEdgeInsets = new UIEdgeInsets(-lineHeight, uiImage.Size.Width + (uiImage.Size.Width / 2), 0, 0);
                Control.TitleEdgeInsets = new UIEdgeInsets(uiImage.Size.Height, -uiImage.Size.Width, 0, 0);
                uiImage.Dispose();
            }
        }
    }
}

结果是：

---

仅供参考，对于未来几代人，

Xamarin.Forms

按钮类现在支持属性

ContentLayout

，值为：Top、Bottom、Left、Right（图像位置）。因此，对于所需的输出，您可以使用本机按钮：

<Button   
 ContentLayout="Top"
 VerticalOptions="EndAndExpand"
 HorizontalOptions="CenterAndExpand"
 x:Name="search"
 Text="Search"   
 Image="Completed.png"
 IsEnabled="{Binding IsLoading}"
 Command="{Binding SearchCommand}"
 WidthRequest ="120"
 HeightRequest ="120"     
 TextColor="#FFFFFF"
/>

---

我不记得在哪里找到了这些信息，但see和

的效果非常好。刚刚编辑了ImageEdgeInsets。非常感谢。我真的很感激。

public class CenterImageButtonRenderer : ButtonRenderer
{
    public CenterImageButtonRenderer() { }

    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null)
        {
            if (Control != null)
            {
                Control.VerticalAlignment = UIControlContentVerticalAlignment.Center;
                Control.HorizontalAlignment = UIControlContentHorizontalAlignment.Center;

                #if DEBUG
                // Set the border so we can see button bounds on a white background for testing alignment
                Control.Layer.CornerRadius = 15;
                Control.Layer.BorderWidth = 5;
                Control.Layer.BorderColor = UIColor.Red.CGColor;
                #endif

                // The button image is not availabe due to lazy load, so we load "again", get the bounds and dispose of it... :-(
                var uiImage = UIImage.FromFile(((Button)e.NewElement).Image.File);
                var lineHeight = Control.TitleLabel.Font.LineHeight;
                Control.ImageEdgeInsets = new UIEdgeInsets(-lineHeight, uiImage.Size.Width + (uiImage.Size.Width / 2), 0, 0);
                Control.TitleEdgeInsets = new UIEdgeInsets(uiImage.Size.Height, -uiImage.Size.Width, 0, 0);
                uiImage.Dispose();
            }
        }
    }
}

var button = new CenterImageButton
{
    Text = "StackOverflow",
    Image = "so.png"
};

<Button   
 ContentLayout="Top"
 VerticalOptions="EndAndExpand"
 HorizontalOptions="CenterAndExpand"
 x:Name="search"
 Text="Search"   
 Image="Completed.png"
 IsEnabled="{Binding IsLoading}"
 Command="{Binding SearchCommand}"
 WidthRequest ="120"
 HeightRequest ="120"     
 TextColor="#FFFFFF"
/>