Question

theres是一种将多行文本设置为Xamarin.Forms Button ??

的方法

我试过Button.Text =“something \ n xxjjjxx”但是不行。

Answer 1

关于如何在Github上实现这一点，有一个很好的例子。真的很简单。只需创建一个继承自ContentView并包含网格的控件。

[ContentProperty("Content")]
public class MultiLineButton : ContentView
{
    public event EventHandler Clicked;

    protected Grid ContentGrid;
    protected ContentView ContentContainer;
    protected Label TextContainer;

    public String Text
    {
        get
        {
            return (String)GetValue(TextProperty);
        }
        set
        {
            SetValue(TextProperty, value);
            OnPropertyChanged();
            RaiseTextChanged();
        }
    }

    public new View Content
    {
        get { return ContentContainer.Content; }
        set
        {
            if (ContentGrid.Children.Contains(value))
                return;

            ContentContainer.Content = value;
        }
    }

    public static BindableProperty TextProperty = BindableProperty.Create(
        propertyName: "Text",
        returnType: typeof(String),
        declaringType: typeof(MultiLineButton),
        defaultValue: null,
        defaultBindingMode: BindingMode.TwoWay,
        propertyChanged: TextValueChanged);

    private static void TextValueChanged(BindableObject bindable, object oldValue, object newValue)
    {
        ((MultiLineButton)bindable).TextContainer.Text = (String)newValue;
    }

    public event EventHandler TextChanged;
    private void RaiseTextChanged()
    {
        if (TextChanged != null)
            TextChanged(this, EventArgs.Empty);
    }

    public MultiLineButton()
    {
        ContentGrid = new Grid
        {
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand
        };

        ContentGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
        ContentGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });

        ContentContainer = new ContentView
        {
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
        };

        TextContainer = new Label
        {
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.FillAndExpand,
        };
        ContentContainer.Content = TextContainer;

        ContentGrid.Children.Add(ContentContainer);

        var button = new Button
        {
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            BackgroundColor = Color.FromHex("#01000000")
        };

        button.Clicked += (sender, e) => OnClicked();

        ContentGrid.Children.Add(button);

        base.Content = ContentGrid;

    }

    public void OnClicked()
    {
        if (Clicked != null)
            Clicked(this, new EventArgs());
    }
}

然后就可以这样使用：

<local:MultiLineButton x:Name="AssessmentToolDetailButton" 
    WidthRequest="100" HeightRequest="60" BackgroundColor="Blue">
    <StackLayout HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
        <Label Text="Hello" TextColor="White" Font="16"/>
        <Label Text="World" TextColor="White" Font="16"/>
    </StackLayout>
</local:MultiLineButton>

您也可以通过设置内容来在按钮中放置图像。

在我的示例中，我修改了Dans原始代码，以使文本可绑定。只需设置Text值而不是像这样的内容：

<local:MultiLineButton Text="{Binding Description}" />

所有功劳都归功于Danvanderboom的榜样： ConentButton by Danvanderboom

Answer 2

这主要是iOS的问题，因为Android会包装文本默认情况下。我尝试了Kasper提供的解决方案并且工作正常但是按钮没有圆角，外观也是与我的应用程序中的其他按钮不一致。

一个简单的解决方案是使用自定义渲染器（ButtonRenderer）将LineBreakMode设置为WordWrap。如果您随后在Xaml中设置按钮的宽度，则会在不同的行上显示单词。

<强>的iOS

public class WrappedButtonRenderer: ButtonRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);

        Control.TitleEdgeInsets = new UIEdgeInsets(4, 4, 4, 4);
        Control.TitleLabel.LineBreakMode = UILineBreakMode.WordWrap;
        Control.TitleLabel.TextAlignment = UITextAlignment.Center;
    }
}

Android 不需要自定义渲染器，因为它默认包装。

这是一个带有Xamarin Forms的known issue。

Answer 3

我不认为我经常看到两个带衬里的按钮。您认为有两种选择可能有用：

创建自定义渲染器并扩展相应的Button类以在每个本机平台上执行更多操作。可能会更难
创建一个Xamarin.Forms类，它扩展了一个可以包含StackLayout的视图和更小的元素（如多行标签），然后您可以使用TapGestureRecognizer与视图一起使用，并将其视为一个按钮。

Answer 4

一个简单的解决方案将使用：

&#x0a;

Answer 5

在fireydude's answer上进行了扩展，我为iOS创建了MultilineButton控件和渲染器，因此可以添加文本对齐方式。这将使用Xamarin.Forms.TextAlignment枚举。

MultilineButton.cs

using Xamarin.Forms;

namespace APP_NAMESPACE.Controls
{
    public class MultilineButton : Button
    {
        public static readonly BindableProperty HorizontalTextAlignmentProperty = BindableProperty.Create(
            propertyName: "HorizontalTextAlignment",
            returnType: typeof(TextAlignment),
            declaringType: typeof(MultilineButton),
            defaultValue: TextAlignment.Start
        );

        public TextAlignment HorizontalTextAlignment
        {
            get { return (TextAlignment)GetValue(HorizontalTextAlignmentProperty); }
            set { SetValue(HorizontalTextAlignmentProperty, value); }
        }
    }
}

MultilineButtonRenderer.cs

using APP_NAMESPACE.Controls;
using APP_NAMESPACE.iOS.Renderers;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(MultilineButton), typeof(MultilineButtonRenderer))]
namespace APP_NAMESPACE.iOS.Renderers
{
    public class MultilineButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            if (Control == null) { return; }

            UIControlContentHorizontalAlignment horizontalAlignment;
            UITextAlignment textAlignment;

            // We have to use ButtonRenderer, so cast the Element to MultilineButton to get the HorizontalTextAlignment property
            var button = (MultilineButton)Element;
            if (button == null) { return; }

            switch(button.HorizontalTextAlignment)
            {
                case TextAlignment.Center:
                    horizontalAlignment = UIControlContentHorizontalAlignment.Center;
                    textAlignment = UITextAlignment.Center;
                    break;
                case TextAlignment.End:
                    horizontalAlignment = UIControlContentHorizontalAlignment.Right;
                    textAlignment = UITextAlignment.Right;
                    break;
                default:
                    horizontalAlignment = UIControlContentHorizontalAlignment.Left;
                    textAlignment = UITextAlignment.Left;
                    break;
            }

            Control.HorizontalAlignment = horizontalAlignment;
            Control.TitleLabel.LineBreakMode = UILineBreakMode.WordWrap;
            Control.TitleLabel.TextAlignment = textAlignment;
        }
    }
}

然后在XAML中使用它：

<controls:MultilineButton Text="This Button is Centered!" HorizontalTextAlignment="Center" />

多行文本按钮Xamarin.Forms

5 个答案: