Многострочный текст Button Xamarin.Forms

Question

theres - это способ установить многострочный текст на кнопку Xamarin.Forms?

Я пробовал Button.Text = "something \ n xxjjjxx" Но не работает.

Answer 1

Я не думаю, что часто видел две выложены кнопки. У вас есть два варианта, которые, я думаю, могут сработать:

1. Создайте собственный рендерер и расширьте соответствующий класс кнопок, чтобы делать больше на каждой собственной платформе. Может быть труднее
2. Создайте класс Xamarin.Forms, который расширяет представление, которое может содержать StackLayout и более мелкие элементы, такие как многострочные метки, тогда вы можете использовать TapGestureRecognizer для использования с вашим видом и рассматривать его как кнопку.

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, чтобы сделать текст привязываемым. Просто установите значение текста вместо содержания, как это:

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

Все Заслуга Danvanderboom его примеру: ConentButton by Danvanderboom

Answer 3

Это в основном проблема с прошивкой, потому что 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 не требует пользовательского средства визуализации, потому что он оборачивает по умолчанию.

Это known issue с формами Xamarin.

Answer 4

Простое решение будет использовать: