Question

我要求将多色文本作为xamarin表单按钮，该按钮针对IOS，Android以及将来的Win 10应用程序。 Xamarin Forms按钮控件不支持这种开箱即用，需要一些自定义。

这是预期的示例按钮图像。

Answer 1

我通常使用设计制作一个stacklayout，并在后端点击它，如下所示：

<StackLayout Margin="1" BackgroundColor="Black" Widthrequest="100" HeightRequest="50">
    <Stacklayout BackgroundColor="White" x:Name="yourButtonControl" Widthrequest="100" Orientation="Horizontal" Padding="5" HeightRequest="50">
        <Image Source="your image path" HorizontalOptions="StartAndExpand" />
        <Label HorizontalOptions="End">your text</Label>
    </StackLayout>
</StackLayout>

使StackLayout可点击：

var tapped = new TapGestureRecognizer();
tapped.Tapped += clickedEvent;
yourButtonControl.GestureRecognizers.Add(tapped);

您的活动：

public void clickedEvent(Object sender, EventArgs e){

}

Answer 2

您是否尝试在button上使用Image属性？

所以你会得到以下结果：

<Button Text="Text" Image="Tick.png"/>

您可以设计自己的（或购买）复选标记图形，如here所示：

Answer 3

您可以为Button创建自定义渲染。 iOS和Android都支持图像和文本按钮。 Windows没有，这就是为什么它不支持开箱即用的表单。

请查找iOS渲染器示例：

public class DashboardButtonRenderer : ButtonRenderer
{
    private const int ImageSize = 25;

    private UIButton _button;
    private DashboardButton _dashboardButton;

    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);
        if (e?.OldElement == null && e.NewElement != null)
        {
            _button = Control;
            e.NewElement.BorderRadius = 0;
            _dashboardButton = (DashboardButton)e.NewElement;
            _button.Font = UIFont.SystemFontOfSize((nfloat)_dashboardButton.FontSize, UIFontWeight.Semibold);
        }
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
        if (e?.PropertyName == DashboardButton.BadgeCountProperty.PropertyName)
        {
            AddBadgeToButton(_dashboardButton.BadgeCount);
        }
        if (e?.PropertyName == VisualElement.IsEnabledProperty.PropertyName)
        {
            _button.Enabled = _dashboardButton.IsEnabled;
        }            
    }

    public override void LayoutSubviews()
    {
        base.LayoutSubviews();

        if (string.IsNullOrEmpty(_dashboardButton?.ButtonImage))
        {
            return;
        }
        SetImage();     //Moved from ondraw to handle Device Orientation Change
    }

    public override void Draw(CGRect rect)
    {
        base.Draw(rect);
        Control.HorizontalAlignment = UIControlContentHorizontalAlignment.Center;
    }

    private void SetImage()
    {
        CGSize labelSize = Sizing.GetStringSize(_dashboardButton.Text, (float)_dashboardButton.FontSize, 0f, 0f, UIFontWeight.Semibold);

        UIImage image = new UIImage(_dashboardButton.ButtonImage);
        _button.SetTitle(_dashboardButton.Text, UIControlState.Normal);
        image = ImageHelper.ResizeImage(image, ImageSize, ImageSize);
        _button.SetImage(image, UIControlState.Normal);
        _button.TintColor = UIColor.Gray;

        var imageAllottedSpaceCenterY = (Control.Frame.Size.Height - _button.TitleLabel.Frame.Size.Height) / 2;

        var imageInsetTopBottom = imageAllottedSpaceCenterY - ImageSize / 2;
        var imageInsetLeftRight = Control.Frame.Size.Width / 2 - ImageSize / 2;

        var labelInsetBottom = (Control.Frame.Size.Height - ImageSize) / 2 - _button.Frame.Height / 2;
        var labelInsetLeftRight = _button.Frame.Width / 2 - labelSize.Width / 2;

        _button.ImageEdgeInsets = new UIEdgeInsets(imageInsetTopBottom, imageInsetLeftRight, imageInsetTopBottom, imageInsetLeftRight);

        var labelInsetRight = Device.Idiom != TargetIdiom.Phone ? labelInsetLeftRight + GetLabelLeftOffset(_dashboardButton.Text) : labelInsetLeftRight;

        _button.TitleEdgeInsets = new UIEdgeInsets(labelInsetBottom + imageInsetTopBottom + 30
        , labelInsetLeftRight - labelSize.Width / 2 + GetLabelLeftOffset(_dashboardButton.Text)
        , labelInsetBottom, labelInsetRight);
        AddBadgeToButton(_dashboardButton.BadgeCount);
        _button.TintColor = AgvanceColors.TintColor.ToUIColor();
    }        
}

如果你需要设置的只是多色按钮的文本，那么你可以使用this iOS解决方案。

Answer 4

我会选择绝对布局，因为我可以将布局中的元素完全放在我想要的位置。只需在布局顶部添加一个透明按钮，这样整个布局就像一个按钮

<AbsoluteLayout HeightRequest="50" WidthRequest="150">
    <Image Source="Check.png"
        AbsoluteLayout.LayoutFlags="All"
        AbsoluteLayout.LayoutBounds="0.1, 0.5, 0.2, 1.0"/>
    <Label Text="TEXT"
        AbsoluteLayout.LayoutFlags="All"
        AbsoluteLayout.LayoutBounds="0.9, 0.5, 0.7, 1.0"/>
    <Button Clicked="ButtonClicked" BackgroundColor="Transparent" BorderWidth="2"
        AbsoluteLayout.LayoutFlags="All"
        AbsoluteLayout.LayoutBounds="0.5, 0.5, 1.0, 1.0"/>
</AbsoluteLayout>

事件

public void ButtonClicked(Object sender, EventArgs args)
{
    // do something
}

Xamarin表单按钮中的多颜色文本

4 个答案: