多行文本按钮Xamarin.Forms

Question

有一种方法可以将多行文本设置为Xamarin.Forms Button？

我已经尝试过Button.Text =“某事\ n xxjjjxx”，但是不起作用。

Answer 1

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




Answer 2

关于如何在 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 值而不是 Content ：

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

所有功劳都归功于 Danvanderboom 的示例： Danvanderboom 的 ConentButton

Answer 3

我想我不常看到两颗有衬里的纽扣。我认为你有两个可能有效的选择：

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