I have a list of items with an entry under each label. I want the items of the list 'item' on a line with one entry, now are they under each other. I want the label on the left and the entry on the right in one line.
my code so far
StackLayout layout = new StackLayout();
for(int i = 0; i < item.Count; i++)
{
var label = new Label
{
Text = item[i]
};
var entry = new Entry();
Grid stackLayout = new Grid
{
HorizontalOptions = LayoutOptions.CenterAndExpand,
Children = {
label,
entry
},
};
layout.Children.Add(stackLayout);
}
Xamarin.Forms Text Input Layout or Label Entry is a container control that allows you add a floating label, a password toggle icon to show or hide passwords, leading and trailing icons, and assistive labels such as error messages and help text on top of input controls.
Single-line text or password input. The Xamarin.Forms Entry is used for single-line text input. The Entry, like the Editor view, supports multiple keyboard types. Additionally, the Entry can be used as a password field. The Entry, like other text-presenting views, exposes the Text property.
Overview Xamarin.Forms Text Input Layout or Label Entry is a container control that allows you add a floating label, a password toggle icon to show or hide passwords, leading and trailing icons, and assistive labels such as error messages and help text on top of input controls.
Less than a year later it became a part of the “Material” design guidelines. There are a number of ways to implement floating labels in a Xarmarin Forms project – starting from building it from scratch or using wrappers for well-known native controls and ending with Xamarin Forms Material Visual.
StackLayout with Orientation = Horizontal is the right choice. I suggest also to use a ListView if you have a list of Items. Create a DataTemplate with a ViewCell with an Horizontal Stacklayout
I created a custom control for you to implement. This control will allow you to use the control without having to adjust the view in any way.
Custom Control
using Xamarin.Forms;
namespace StackOverflowHelp
{
/// <summary>
/// Custom <see cref="Grid"/> containing <see cref="Label"/> next to <see cref="Entry"/>
/// </summary>
public class EntryTextOneLine : Grid
{
/// <summary>
/// <see cref="Style"/> for <seealso cref="_text"/>
/// </summary>
private static Style _textStyle = new Style(typeof(Label))
{
Setters =
{
new Setter { Property = Label.TextColorProperty, Value = Color.Black },
new Setter { Property = Label.FontAttributesProperty, Value = FontAttributes.Bold },
new Setter { Property = HorizontalOptionsProperty, Value = LayoutOptions.FillAndExpand },
new Setter { Property = VerticalOptionsProperty, Value = LayoutOptions.CenterAndExpand },
new Setter { Property = Label.HorizontalTextAlignmentProperty, Value = TextAlignment.End }
}
};
/// <summary>
/// label next to entry
/// </summary>
private Label _text = new Label
{
Style = _textStyle
};
/// <summary>
/// <see cref="Entry"/>
/// </summary>
private Entry _entry = new Entry
{
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand
};
/// <summary>
/// <see cref="Label.Text"/> next to <see cref="_entry"/>
/// </summary>
public string EntryText {
get {
return _text.Text;
}
set {
_text.Text = value;
}
}
/// <summary>
/// Custom <see cref="Grid"/> containing <see cref="Label"/> next to <see cref="Entry"/>
/// </summary>
public EntryTextOneLine()
{
ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(0.3, GridUnitType.Star) });
ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(0.7, GridUnitType.Star) });
RowDefinitions.Add(new RowDefinition { Height = GridLength.Star });
Children.Add(_text, 0, 0);
Children.Add(_entry, 1, 0);
}
}
}
How to Implement Control
Just create a new EntryTExtOneLine object and add it to the StackLayout.
using Xamarin.Forms;
namespace StackOverflowHelp
{
public class EntryStackOverflow : ContentPage
{
private StackLayout _stack = new StackLayout();
public EntryStackOverflow()
{
var list = new[]
{
new { title = "testing title" },
new {title = "another title"},
new {title = "text wraps down to the next line if too long"},
new {title = "you get the point"}
};
foreach(var n in list)
{
var control = new EntryTextOneLine
{
EntryText = n.title
};
_stack.Children.Add(control);
}
Content = _stack;
}
}
}
Result
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With