Xamarin在一行上形成標簽和條目

Question

我有一個項目列表，每個標簽下都有一個條目。 我希望列表'item'的項目在一行上有一個條目，現在它們在彼此之下。 我希望左邊的標簽和右邊的條目在一行。

我的代碼到目前為止

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);
        }

Answer 1

具有Orientation = Horizo​​ntal的StackLayout是正確的選擇。 如果你有一個Items列表，我建議你也使用ListView。 使用帶有水平Stacklayout的ViewCell創建DataTemplate

Answer 2

我為您創建了一個自定義控件來實現。 此控件允許您使用控件而無需以任何方式調整視圖。

自定義控制

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);
        }
    }
}

如何實施控制
只需創建一個新的EntryTExtOneLine對象並將其添加到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;
        }
    }
}

結果

Answer 3

StackLayout layout = new StackLayout();

for(int i = 0; i < item.Count; i++) 
{
    StackLayout innerLayout = new StackLayout
    {
        Orientation = StackOrientation.Horizontal
    }
    var label = new Label
    {
        Text = item[i]
    };
    var entry = new Entry();
    innerLayout.Children.Add(label);
    innerLayout.Children.Add(entry);
    layout.Children.Add(innerLayout);
}

我沒有測試，但希望它會幫助你:)