Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Xamarin Forms label and entry on one line

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);
        }
like image 669
Rick Avatar asked Mar 18 '17 20:03

Rick


People also ask

What is label entry in Xamarin forms?

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.

How do I use single line text in Xamarin forms?

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.

What is input layout in Xamarin forms?

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.

Can I use floating labels in xarmarin forms?

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.


Video Answer


2 Answers

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

like image 155
Alessandro Caliaro Avatar answered Oct 20 '22 03:10

Alessandro Caliaro


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

enter image description here

like image 44
Joshua Poling Avatar answered Oct 20 '22 01:10

Joshua Poling