Issue
I have the following problem, in which I'm trying to Data Bind a List inside a Model to my xaml file. I want to bind the list of IOSensors to the xaml file in some text labels.
Model: class 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; }
}
ViewModel:
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);
}
}
Xaml:
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
}
};
}
}
As you can see in the xaml file, I ve been trying many apporaches in which i can bind the list of IOSensors, but so far no luck. The Page is loading and showing some results (for example the Syntax with "list[0].property" works but i want it to work for every entry of the list.
Thanks ina dvance
Solution
As Jason said that you want to display a nested list of data, so I suggest you can use ListView Group to display data.
I modify your code, and creating one sample, that you can take a look:
Two models:
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
}
};
}
}
This is screenshot;
Answered By - Cherry Bu - MSFT
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.