Question

我有一个项目列表，每个标签下都有一个条目。我希望列表'item'的项目在一行上有一个条目，现在它们在彼此之下。我希望左边的标签和右边的条目在一行。

我的代码到目前为止

var data =  {
    "Elektrotehnički fakultet Osijek": { "2008/09":1539, "2009/10":1678, "2010/11":1873, "2011/12":2231, "2012/13":2192, "2013/14":1841},
    "Fakultet elektrotehnike i računarstva Zagreb": { "2008/09":4795, "2009/10":4538, "2010/11":4320, "2011/12":4913, "2012/13":4634, "2013/14":3290},
    "Fakultet elektrotehnike strojarstva i brodogradnje Split": { "2008/09":2480, "2009/10":2685, "2010/11":2790, "2011/12":2769, "2012/13":2649, "2013/14":2633}
    }

var margin = {top: 50, bottom: 70, left:70, right: 30};
var width = 700 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;


var timeFormat2 = d3.time.format('%Y');
function returnArray(){
        var a = [];
        var keys = Object.keys(data["Elektrotehnički fakultet Osijek"]);
        for(var i = 0; i < Object.keys(data["Elektrotehnički fakultet Osijek"]).length; i++){
            a.push(timeFormat2(new Date(keys[i].substring(0, keys[i].indexOf('/')))))
        }
        console.log(a);
        return a;
    }

var x = d3.time.scale()
    .domain(returnArray())
    .range([0, width/5, 2*width/5, 3*width/5, 4*width/5, 5*width/5]);

var y = d3.scale.linear()
    .domain([0, 5000])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(function(d, i) { return Object.keys(data["Elektrotehnički fakultet Osijek"])[i].replace(/_/g, ' '); });

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);

var valueline = d3.svg.line()
    .x(function(d, i) { return x(i); })
    .y(function(d) { return y(d); });
var linechart = svg.append("path")
    .attr("class", "line")
    .attr("d", valueline(Object.values(data["Elektrotehnički fakultet Osijek"])))
    .style("stroke", "blue")
    .style("stroke-width", "2")
    .style("fill", "none")

Answer 1

具有Orientation = Horizontal的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);
}

我没有测试过，但希望它可以帮助你：）

Xamarin在一行上形成标签和条目

3 个答案: