CODEWITHSUNDEEP
.netxamlxamarin.forms
Alir Kahi
Alir Kahi

Reputation: 1298

How to set min width or bigger in XAML of Xamarin.Forms

I like to know how I can set the width of an element to be minimum of X or bigger.

For example, consider the XAML below (contains only the markup for the text with blue background in the screenshot for simplicity):

<Grid RowSpacing="0"
  ColumnSpacing="0">
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Label
    Grid.Column="1"
    Grid.Row="0"
    Margin="10,0,10,0"
    Text="Lorem ipsum"
    BackgroundColor="Aqua"
    FontSize="24"
    HorizontalOptions="Start"
    TextColor="{Binding TextColor}"
    WidthRequest="{OnIdiom Default=400, Phone=300}"/>
</Grid>

I want the text element with blue background to take the space that it has but if the text is bigger, I want the width to expand.

enter image description here

But right now for bigger texts it looks like this: enter image description here

Whereas, I want to make it somehow look like this without (while still taking the min width in the first screenshot): enter image description here

Upvotes: 1

Views: 1162

Answers (1)

Leo Zhu
Leo Zhu

Reputation: 15021

Maybe you could consider using CustomRenderer to achieve this:

for example:

for android:

create a MiniWidthLabel

public class MiniWidthLabel :Label
{
    public static readonly BindableProperty MinWidthProperty =BindableProperty.Create("MinWidth", typeof(int), typeof(MiniWidthLabel), null);
    public int MinWidth
    {
        get { return (int)GetValue(MinWidthProperty); }
        set { SetValue(MinWidthProperty, value); }
    }
}

create a MinWidthLableRenderer in your Android project:

[assembly: ExportRenderer(typeof(MiniWidthLabel), typeof(MinWidthLableRenderer))]
namespace your namepace
{
 class MinWidthLableRenderer:LabelRenderer
  {

    public MinWidthLableRenderer(Context context) : base(context)
    {
    }
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);
        Control.SetMinWidth(((MiniWidthLabel)Element).MinWidth);

    }
  }
}

then use in your page.xaml:

<local:MiniWidthLabel Margin="10,0,10,0" Text="" BackgroundColor="Aqua"  MinWidth="200" FontSize="24" HorizontalOptions="Start"></local:MiniWidthLabel>

Upvotes: 1

Related Questions