首页 > 解决方案 > 如何在 Xamarin 中的模型中绑定列表对象

问题描述

我有以下问题,我正在尝试将模型内的列表数据绑定到我的 xaml 文件。我想将 IOSensors 列表绑定到某些文本标签中的 xaml 文件。

型号:类 IOModule {

    public IOModule(string Name, string Type, string Version, string Location, string Desc)
    {
        this.Name = Name;
        this.Type = Type;
        this.Version = Version;
        this.Serial = Location;
        this.Status = Desc;
        this.list = new List<IOSensor>();

    }

    public void addSensorInput(IOSensor sensor)
    {
        list.Add(sensor);
    }

    [JsonProperty("Name")]
    public String Name { get; set; }
    [JsonProperty("Type")]
    public String Type { get; set; }
    [JsonProperty("Version")]
    public String Version { get; set; }
    [JsonProperty("Serial")]
    public String Serial { get; set; }
    [JsonProperty("Status")]
    public String Status { get; set; }

    public List<IOSensor> list { get; }


    public List<String> getIDs
    {
        get
        {
            List<string> list1 = new List<string>();
            foreach (IOSensor sens in list)
            {
                list1.Add(sens.ID);
            }
            return list1;
        }
    }
}



public class IOSensor
{

    public IOSensor(String ID, String Type, String GasComp, String MeasureType, String value)
    {
        this.ID = ID;
        this.IOType = Type;
        this.GasComp = GasComp;
        this.MeasurementType = MeasureType;
        this.Value = value;

    }
    [JsonProperty("ID")]
    public String ID { get; set; }
    [JsonProperty("IOType")]
    public String IOType { get; set; }
    [JsonProperty("GasComp")]
    public String GasComp { get; set; }
    [JsonProperty("MeasurementType")]
    public String MeasurementType { get; set; }
    [JsonProperty("Value")]
    public String Value { get; set; }
}

视图模型:

class IoModulesViewModels : BaseViewModel
{

    public Item item;
    public ObservableCollection<IOModule> modlists;


    public IoModulesViewModels(Item item)
    {
        this.item = item;
        this.modlists= new ObservableCollection<IOModule>();
        //sendReq();

        IOModule mod1 = new IOModule("1", "2", "3", "4", "5");
        mod1.addSensorInput(new IOSensor("44", "55", "66", "77", "88"));
        mod1.addSensorInput(new IOSensor("444", "545", "646", "747", "848"));
        modlists.Add(mod1);
        modlists.Add(mod1);

    }
}

xml:

 public partial class IoModulesPage : ContentPage
{

    IoModulesViewModels ioModModels;
    public IoModulesPage(Item item)
    {
        InitializeComponent();
        BindingContext = this.ioModModels = new IoModulesViewModels(item);

        Label header = new Label
        {
            Text = "ListView",
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
            HorizontalOptions = LayoutOptions.Center
        };

        ListView lw = new ListView
        {
            ItemsSource = ioModModels.modlists,
            HasUnevenRows = true,
            ItemTemplate = new DataTemplate(() =>
            {
                var grid = new Grid();

                Label modHeaderName = new Label();
                modHeaderName.SetBinding(Label.TextProperty, "Name");
                Label modHeaderType = new Label();
                modHeaderType.SetBinding(Label.TextProperty, "Type");
                Label modHeaderVersion = new Label();
                modHeaderVersion.SetBinding(Label.TextProperty, "Version");
                Label modHeaderSerial = new Label();
                modHeaderSerial.SetBinding(Label.TextProperty, "Serial");
                Label modHeaderStatus = new Label();
                modHeaderStatus.SetBinding(Label.TextProperty, "Status");

                grid.Children.Add(modHeaderName);
                grid.Children.Add(modHeaderType, 1, 0);
                grid.Children.Add(modHeaderVersion, 2, 0);
                grid.Children.Add(modHeaderSerial, 3, 0);
                grid.Children.Add(modHeaderStatus, 4, 0);


                ListView lp = new ListView
                {
                    ItemsSource = ioModModels.modlists,
                    HasUnevenRows = true,
                    ItemTemplate = new DataTemplate(() =>
                    {

                        Label header2 = new Label
                        {
                            Text = "ID,Type,GasComp,MeasurementType,Value",
                            FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
                            HorizontalOptions = LayoutOptions.Fill
                        };

                        Grid gridIn = new Grid();
                        Label modID = new Label();
                        modID.SetBinding(Label.TextProperty, "getIDs");
                        Label modIOType = new Label();
                        modIOType.SetBinding(Label.TextProperty, "list.IOType");
                        Label modGasComp = new Label();
                        modGasComp.SetBinding(Label.TextProperty, "GasComp");
                        Label modMeasurementType = new Label();
                        modMeasurementType.SetBinding(Label.TextProperty, "list[0].MeasurementType");
                        Label modValue = new Label();
                        modValue.SetBinding(Label.TextProperty, "list[0].Value");

                        gridIn.Children.Add(modID);
                        gridIn.Children.Add(modIOType, 1, 0);
                        gridIn.Children.Add(modGasComp, 2, 0);
                        gridIn.Children.Add(modMeasurementType, 3, 0);
                        gridIn.Children.Add(modValue, 4, 0);
                        gridIn.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
                        gridIn.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });


                        return new ViewCell
                        {
                            View = new StackLayout
                            {
                                Padding = new Thickness(0, 10),
                                Orientation = StackOrientation.Vertical,
                                Children =
                                {
                                    header2,
                                    gridIn
                                }
                            }


                        };
                    })
                };

                Frame frame = new Frame()
                {
                    BorderColor=Color.Gray,
                    CornerRadius = 5,
                    Padding = 8,

                    Content = new StackLayout
                    {
                        Orientation=StackOrientation.Horizontal,
                        Children =
                        {
                            grid,
                            lp
                        }

                    }
                };


                return new ViewCell
                {

                    View = new StackLayout
                    {

                        Padding = new Thickness(0, 10),
                        Spacing = 2,
                        Orientation = StackOrientation.Horizontal,
                        Children =
                        {
                           frame
                        }
                    }

                };
            }

            )
        };

        // Accomodate iPhone status bar.
        this.Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5);
        // Build the page.
        this.Content = new StackLayout
        {
            Children =
            {
                header,
                lw
            }
        };

    }
}

正如您在 xaml 文件中看到的那样,我一直在尝试许多可以绑定 IOSensors 列表的方法,但到目前为止还没有运气。页面正在加载并显示一些结果(例如带有“list [0] .property”的语法有效,但我希望它适用于列表的每个条目。

提前致谢

标签: c#.netxamarinxamarin.forms

解决方案


正如 Jason 所说,你想显示一个嵌套的数据列表,所以我建议你可以使用 ListView Group 来显示数据。

我修改了您的代码,并创建了一个示例,您可以看一下:

两种型号:

 public class IOModule:List<IOSensor>
{

    [JsonProperty("Name")]
    public String Name { get; set; }
    [JsonProperty("Type")]
    public String Type { get; set; }
    [JsonProperty("Version")]
    public String Version { get; set; }
    [JsonProperty("Serial")]
    public String Serial { get; set; }
    [JsonProperty("Status")]
    public String Status { get; set; }
    public List<IOSensor> list => this;


}

public class IOSensor
{

    [JsonProperty("ID")]
    public String ID { get; set; }
    [JsonProperty("IOType")]
    public String IOType { get; set; }
    [JsonProperty("GasComp")]
    public String GasComp { get; set; }
    [JsonProperty("MeasurementType")]
    public String MeasurementType { get; set; }
    [JsonProperty("Value")]
    public String Value { get; set; }
}

 public partial class Page8 : ContentPage
{

    public ObservableCollection<IOModule> modlists { get; set; }
    public Page8()
    {
        InitializeComponent();
        modlists = new ObservableCollection<IOModule>();


        IOModule mod1 = new IOModule()
        {
           new IOSensor(){ID="IOSensor 1",IOType="",GasComp="",MeasurementType="",Value=""},
           new IOSensor(){ID="IOSensor 2",IOType="",GasComp="",MeasurementType="",Value=""}
        };
        mod1.Name = "IOModule 1";
        modlists.Add(mod1);


        IOModule mod2 = new IOModule()
        {
           new IOSensor(){ID="IOSensor 3",IOType="",GasComp="",MeasurementType="",Value=""},
           new IOSensor(){ID="IOSensor 4",IOType="",GasComp="",MeasurementType="",Value=""}
        };

        mod2.Name = "IOModule 2";
        modlists.Add(mod2);


        IOModule mod3 = new IOModule()
        {
           new IOSensor(){ID="IOSensor 5",IOType="",GasComp="",MeasurementType="",Value=""},
           new IOSensor(){ID="IOSensor 6",IOType="",GasComp="",MeasurementType="",Value=""}
        };
        mod3.Name = "IOModule 3";
        modlists.Add(mod3);

        //this.BindingContext = this;

        Label header = new Label
        {
            Text = "ListView",
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
            HorizontalOptions = LayoutOptions.Center
        };

        ListView lw = new ListView();
        lw.ItemsSource = modlists;
        lw.IsGroupingEnabled = true;
        lw.ItemTemplate = new DataTemplate(() =>
              {
                  var grid = new Grid();

                  Label modHeaderName = new Label();
                  modHeaderName.SetBinding(Label.TextProperty, "ID");
                  Label modHeaderType = new Label();
                  modHeaderType.SetBinding(Label.TextProperty, "IOType");
                  Label modHeaderVersion = new Label();
                  modHeaderVersion.SetBinding(Label.TextProperty, "GasComp");
                  Label modHeaderSerial = new Label();
                  modHeaderSerial.SetBinding(Label.TextProperty, "MeasurementType");
                  Label modHeaderStatus = new Label();
                  modHeaderStatus.SetBinding(Label.TextProperty, "Value");

                  grid.Children.Add(modHeaderName);
                  grid.Children.Add(modHeaderType, 1, 0);
                  grid.Children.Add(modHeaderVersion, 2, 0);
                  grid.Children.Add(modHeaderSerial, 3, 0);
                  grid.Children.Add(modHeaderStatus, 4, 0);
                  return new ViewCell { View = grid };

              });
        lw.GroupHeaderTemplate = new DataTemplate(() =>
        {
            var grid = new Grid();
            Label modHeaderName = new Label() {
                FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
                FontAttributes = FontAttributes.Bold,
            };
            modHeaderName.SetBinding(Label.TextProperty, "Name");
            //Label modHeaderType = new Label();
            //modHeaderType.SetBinding(Label.TextProperty, "Type");
            //Label modHeaderVersion = new Label();
            //modHeaderVersion.SetBinding(Label.TextProperty, "Version");
            //Label modHeaderSerial = new Label();
            //modHeaderSerial.SetBinding(Label.TextProperty, "Serial");
            //Label modHeaderStatus = new Label();
            //modHeaderStatus.SetBinding(Label.TextProperty, "Status");

            grid.Children.Add(modHeaderName);
            //grid.Children.Add(modHeaderType, 1, 0);
            //grid.Children.Add(modHeaderVersion, 2, 0);
            //grid.Children.Add(modHeaderSerial, 3, 0);
            //grid.Children.Add(modHeaderStatus, 4, 0);
            return new ViewCell { View = grid };

        });


        this.Content = new StackLayout
        {
            Children =
    {
        header,
        lw
    }
        };


    }
}

这是截图;

在此处输入图像描述


推荐阅读