多行文本按钮Xamarin.Forms

问题描述 投票:5回答:5

那里有一种方法可以设置多行文本到Xamarin.Forms按钮?

我已经试过Button.Text =“东西\ n xxjjjxx”但不工作。

button xamarin.forms multiline
5个回答
2
投票

对于如何实现这一目标在Github上一个很好的例子。这是真的很简单。只要创建自己的控制,从内容查看继承,并包含一个网格。

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

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

在我的例子我为了使文本可绑定修改丹斯原代码。刚刚设置的文本值,而不是像这样的内容:

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

一切归功于Danvanderboom他的例子:ConentButton by Danvanderboom


2
投票

这主要是与iOS的一个问题,因为Android将包裹默认的文本。我试图通过卡斯帕提供的解决方案,它的工作,不过按钮没有圆角的外观是不是与我的应用程序的其他按钮是一致的。

一个简单的解决方案是使用一个自定义的呈现器(ButtonRenderer)到LineBreakMode设置为自动换行。如果然后设置按钮的宽度在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表单进行known issue


1
投票

我不认为我已经看到了两个内衬按钮频繁。你有,我认为可能的工作两种选择:

  1. 创建一个自定义呈现,并延长相应的按钮类做更多的每个本地平台上。可能是一个更难
  2. 创建Xamarin.Forms类,扩展了可以包含StackLayout和更小的元素,如多线的标签,那么你可以使用一个TapGestureRecognizer你的看法使用,并把它像一个按钮查看。

1
投票

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

&#x0a;

0
投票

扩展在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" />
© www.soinside.com 2019 - 2024. All rights reserved.