I have one ListView on my page having ItemSource as List<AssetModel> as shown below:
public class AssetModel
{
public string AssetId { get; set; }
public string Description { get; set; }
public List<TaskDetail> TaskDetailList { get; set; }
}
public class TaskDetail
{
public string Description { get; set; }
}
How can I bind TaskDetail list in my parent list?
Desired Layout:
It seems like a classic grouping listview use case. James Montemagno wrote an article about this kind of need that should help you a lot.
In summary, the grouping feature expects an object of type 'List of List' (IEnumerable<IEnumerable<>>), where each 'master item' is a list of 'detail item'.
To make it easy, you can use the class provided at the above mentioned article:
public class Grouping<K, T> : ObservableCollection<T>
{
public K Key { get; private set; }
public Grouping(K key, IEnumerable<T> items)
{
Key = key;
foreach (var item in items)
this.Items.Add(item);
}
}
Then, the list property you must change its type to, for example, this:
ObservableCollection<Grouping<AssetModel, TaskDetail>> AssetsList { get; set; } =
new ObservableCollection<Grouping<AssetModel, TaskDetail>>();
This AssetsList is what you should bind to the ItemsSource of ListView
To fill this property, you'll need, for example, do this:
for (int i = 0; i < 5; i++)
{
var asset = new AssetModel();
asset.AssetId = new Guid().ToString();
asset.Description = $"Asset { i + 1} ";
asset.TaskDetailList = new List<TaskDetail>();
for (int j = 0; j < 3; j++)
asset.TaskDetailList.Add(new TaskDetail() { Description = $"Detail { (i + 1) } - { (j + 1) }" });
var group = new Grouping<AssetModel, TaskDetail>(asset, asset.TaskDetailList);
AssetsList.Add(group);
}
Then in your XAML you define your ListView Grouping properties:
<ListView ItemsSource="{Binding AssetsList}"
HasUnevenRows="True"
SeparatorVisibility="None"
SeparatorColor="Transparent"
IsGroupingEnabled="True">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="AssetId"
FontAttributes="Bold"/>
<Label Text={Binding Key.AssetId}/>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Description"
FontAttributes="Bold"/>
<Label Text={Binding Key.Description}/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label Text={Binding Description}/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Related
I have a design with vertical and horizontal scrolling.I need to add two lists in to the same page.So I have used bindable layout for this but the scrolling is not working on this. Please help me on the below. I am stuck on this for a week.
Here is my View and ViewModel
<StackLayout BackgroundColor="WhiteSmoke">
<Grid ColumnDefinitions="*,*" RowDefinitions="Auto,*,Auto">
<StackLayout
Grid.Row="0"
Grid.Column="1"
BindableLayout.ItemsSource="{Binding ListSource.TestList2}"
Orientation="Horizontal"
VerticalOptions="FillAndExpand">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label
Margin="0" WidthRequest="75"
FontSize="16"
HeightRequest="58"
HorizontalOptions="FillAndExpand"
MaxLines="3"
Text="{Binding Subname}"
VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<StackLayout x:Name="layout1"
Grid.Row="1" Margin="30,0,0,0"
Grid.Column="0" Grid.ColumnSpan="2"
BindableLayout.ItemsSource="{Binding ListSource.TestList}"
Orientation="Vertical">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="*,*">
<Label
Grid.Column="0"
Margin="3"
Text="{Binding name}" />
<StackLayout
Grid.Column="1"
Margin="0"
BindableLayout.ItemsSource="{Binding classes}"
HorizontalOptions="FillAndExpand"
Orientation="Horizontal">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<RadioButton WidthRequest="75"
HorizontalOptions="FillAndExpand"
IsChecked="{Binding IsFailed}"/>
<Entry Placeholder="Subject"
IsVisible="{Binding IsEntry}"/>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</Grid>
</StackLayout>
ViewModel
public class ListViewVM:BaseViewModel
{
private TestClass _listSource;
public TestClass ListSource
{
get { return _listSource; }
set { _listSource = value;
OnPropertyChanged("ListSource");
}
}
//public
public ListViewVM()
{
TestClass kk=new TestClass();
kk.BindData();
ListSource = new TestClass();
ListSource.TestList =new List<TestName>(kk.TestList);
ListSource.TestList2= new List<TestSubject>( kk.TestList2);
ListSource.TestList.ForEach(x => x.classes=kk.TestList2);
var item = ListSource;
}}
Model
public class TestClass
{
public List<TestName> TestList { get; set; }
public List<TestSubject> TestList2 { get; set; }
public void BindData()
{
TestList = new List<TestName>() { new TestName {id=1,name="Jo"},
new TestName {id=2,name="Annie" },
new TestName {id=3,name="Alex" }};
TestList2 = new List<TestSubject>() { new TestSubject { id=1,Subname="Maths"},
new TestSubject { id=2,Subname="Physics"},
new TestSubject { id=2,Subname="Chemestry"},
new TestSubject { id=2,Subname="Other",IsEntry=true}};
}
}
public class TestName
{
public int id { get; set; }
public string name { get; set; }
public List<TestSubject> classes { get; set; }
}
public class TestSubject
{
public int id { get; set; }
public string Subname { get; set; }
public bool IsFailed {get;set;}
public bool IsOthersSelected { get; set; }
public bool IsEntry { get; set; }
}
Current UI
Some conditions is there , the user should select only one option from each row, but in my design they can select multiple option. If I add the RadioButton without that stacklayout the selection case is working but that time I cannot add the Entry field.If the user select "other" , then I need display an input field at the end along with "other" option for adding the other subject . So that field also mandatory for me.
I'm new to Xamarin (and new in coding in general).
I'm using xct TouchEffect within a ListView to try to get a LongPress menu.
Since the TouchEffect.LongPressCommand is a Command, I can only bound it to the model page from some reason.
So... I'm trying to send information to the Code-behind via MessagingCenter.
The problem I have is the message is not receiving.
I read a lot and tried to figure it out, and I guess to be able to receive the message, the subscriber needs to be instantiate/initialize first.
The main problem I have is... I don't know how to do it lol.
Or the whole thing I'm trying to do is wrong?
I will add some code but if anything else is needed please let me know.
Note: the loading page (when the app start) is a GroupPage(which working fine), the problem is with the ItemsPage.
Thank you so much for everyone.
ItemsPage.xaml
<ContentPage.BindingContext>
<localvm:ItemViewModel/>
</ContentPage.BindingContext>
<ListView ItemsSource="{Binding Items, Mode=TwoWay}" x:Name="lstView"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
SelectedItem="{Binding SelectedItem}" HasUnevenRows="True" RowHeight="50">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="0,0,8,0" Margin="4,0,4,0" xct:TouchEffect.LongPressCommand="{Binding LongPressItemCommand}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding ItemName}" TextColor="Black" Grid.Column="1" FontSize="Medium"></Label>
<Label Text="{Binding ItemDescription}" Grid.Column="1" VerticalTextAlignment="End"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
ItemsPage.cs
namespace MobileApp2
{
public partial class ItemsPage : ContentPage
{
public ItemsPage()
{
InitializeComponent();
MessagingCenter.Subscribe<Item, Guid>(this, "PopupMenuItemMsg",
(page, itemId) =>
{
Main_PopupMenu(itemId);
});
}
public async void Main_PopupMenu(Guid itemId)
{
DisplayActionSheet("Test", "Test", "OK");
}
}
}
Items.cs (model)
namespace MobileApp2
{
public class Item : INotifyPropertyChanged
{
public Command LongPressItemCommand { get; }
public Guid ItemId { get; set; }
public Guid GroupId { get; set; }
private string itemName = string.Empty;
public string ItemName
{
get { return itemName; }
set
{
if (value != null) itemName = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("ItemName"));
}
}
private string itemDescription = string.Empty;
public string ItemDescription
{
get
{
return itemDescription.Trim();
}
set
{
if (value != null) itemDescription = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("ItemDescription"));
}
}
public Item(string itemName, string itemDescription)
{
ItemName = itemName;
ItemDescription = itemDescription;
}
public Item()
{
LongPressItemCommand = new Command(() =>
{
MessagingCenter.Send<Item, Guid>(this, "PopupMenuItemMsg", ItemId);
});
}
public event PropertyChangedEventHandler PropertyChanged;
}
}
You could check the code below with relative binding of Command.
Model:
public class Item
{
public string ItemName { get; set; }
public string ItemDescription { get; set; }
}
ViewModel:
public class ItemViewModel
{
public ICommand LongPressItemCommand { get; set; }
public Guid ItemId { get; set; }
public ObservableCollection<Item> Items { get; set; }
public ItemViewModel()
{
LongPressItemCommand = new Command(() =>
{
MessagingCenter.Send<ItemViewModel, Guid>(this, "PopupMenuItemMsg", ItemId);
});
CreateCollection();
}
public void LongPress()
{
}
public void CreateCollection()
{
Items = new ObservableCollection<Item>()
{
new Item(){ ItemName="A", ItemDescription="AA"},
new Item(){ ItemName="B", ItemDescription="BB"},
new Item(){ ItemName="C", ItemDescription="CC"},
};
}
}
Xaml:
<ContentPage.BindingContext>
<localvm:ItemViewModel></localvm:ItemViewModel>
</ContentPage.BindingContext>
<StackLayout>
<ListView ItemsSource="{Binding Items, Mode=TwoWay}" x:Name="lstView"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
SelectedItem="{Binding SelectedItem}" HasUnevenRows="True" RowHeight="50">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="0,0,8,0" Margin="4,0,4,0" xct:TouchEffect.LongPressCommand="{Binding Path=BindingContext.LongPressItemCommand, Source={x:Reference Name=lstView}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding ItemName}" TextColor="Black" Grid.Column="0" FontSize="Medium"></Label>
<Label Text="{Binding ItemDescription}" Grid.Column="1" VerticalTextAlignment="End"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
Code behind:
MessagingCenter.Subscribe<ItemViewModel, Guid>(this, "PopupMenuItemMsg",
(page, itemId) =>
{
Main_PopupMenu(itemId);
});
Trying to set the initial value to a picker through the use of SelectedItem. I can do this without any issue if the picker isn't within a listview. However, once I try to accomplish this in a listview no dice.
I never can get the picker to display the initially downloaded value. If I use the same binding for an entry it displays the expected string.
Thoughts??
This can be reproduced in this simplistic standalone project. Please help. Thanks.
https://github.com/smarcus3/DebuggingProject
XAML
<ListView x:Name="listView" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" ItemsSource="{Binding downloadedRecipeIngredients}"> <!--SelectedItem="{Binding SelectedItem}"-->
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<!-- Element Label -->
<Entry VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Text="{Binding IngredientName}"/>
<!--<Picker x:Name="pickerIngredient" HorizontalOptions = "StartAndExpand" ItemsSource="{Binding listIngredients}" BindingContext="{Binding Source={x:Reference Page}, Path=BindingContext}" SelectedItem="{Binding IngredientName}" WidthRequest="100"/>-->
<Picker x:Name="pickerIngredientancestor" HorizontalOptions = "StartAndExpand" WidthRequest="100" ItemsSource="{Binding listIngredients, Source={RelativeSource AncestorType={x:Type viewModel:testPageViewModel}}}" SelectedItem="{Binding IngredientName}"/>
<Entry Text="{Binding Quantity}" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" />
<Entry Text="{Binding UnitName}" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" />
<Entry Text="{Binding Comments}" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" />
<!-- Assessment Menu Icon -->
<Label Text="Clickable Label" VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.btnPress, Source={x:Reference Page}}" CommandParameter="{Binding .}" />
</Label.GestureRecognizers>
</Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
VIEW MODEL
public class testPageViewModel : BaseViewModel
{
clRecipeIngredient[] _downloadedRecipeIngredients;
public clRecipeIngredient[] downloadedRecipeIngredients
{
get {
return _downloadedRecipeIngredients;
}
set
{
//if (downloadedRecipeIngredients != value)
//{
_downloadedRecipeIngredients = value;
OnPropertyChanged("downloadedRecipeIngredients");
//}
}
}
//Lists for Pickers
ObservableCollection<string> _listIngredients = new ObservableCollection<string>();
public ObservableCollection<string> listIngredients { get { return _listIngredients; } }
private clRecipeDataBase recipeDataBase;
public testPageViewModel()
{
recipeDataBase = new clRecipeDataBase();
btnPress = new Command<clRecipeIngredient>(madeIt);
getData();
}
async void getData()
{
//PICKER INGREDIENT DATA
clIngredient[] tmp = await recipeDataBase.getIngredientData();
for (int i = 0; i < tmp.Length; i++)
{
_listIngredients.Add(tmp[i].IngredientName);
}
_downloadedRecipeIngredients = await recipeDataBase.getRecipeIngredientsDataByRecipeID(310); //HARDCODED TO CRISPY PIZZA RECIPE
OnPropertyChanged("downloadedRecipeIngredients");
}
public ICommand btnPress { get; private set; }
void madeIt(clRecipeIngredient x)
{
Console.WriteLine(x.IngredientName + " -- " + x.Comments);
//_downloadedRecipeIngredients.Remove(x);
}
}
clRecipeIngredients
public class clRecipeIngredient
{
public int RecipeIngredientsID { get; set; }
public int RecipeIDLookedUP { get; set; }
public int IngredientIDLookedUp { get; set; }
public double Quantity { get; set; }
public int UnitIDLookedUp { get; set; }
public bool HiddenFlag { get; set; }
public string UnitName { get; set; }
public string IngredientName { get; set; }
public string Comments { get; set; }
I checked your sample and you could modify it like following .
in Xaml
<Picker HorizontalOptions = "StartAndExpand" WidthRequest="100" ItemsSource="{Binding Path=BindingContext.listIngredients, Source={x:Reference Page}}" SelectedItem="{Binding IngredientName, Mode=TwoWay}" />
in ViewModel
ObservableCollection had implemented the interface INotifyPropertyChanged in default . So you could simplify the code in your ViewModel .
Note : You could not set the value of SelectItem as a string directly even if they are equal . You need to set it like following
ing.IngredientName = listIngredients[0];
So the ViewModel could like
public class testPageViewModel : BaseViewModel
{
public ObservableCollection<clRecipeIngredient> downloadedRecipeIngredients
{
get;set;
}
public ObservableCollection<string> listIngredients { get; set; }
//private clRecipeDataBase recipeDataBase;
public testPageViewModel()
{
//recipeDataBase = new clRecipeDataBase();
btnPress = new Command<clRecipeIngredient>(madeIt);
downloadedRecipeIngredients = new ObservableCollection<clRecipeIngredient>();
listIngredients = new ObservableCollection<string>();
getData();
}
async void getData()
{
//PICKER INGREDIENT DATA
//clIngredient[] arrayIngredients = await recipeDataBase.getIngredientData();
//clIngredient[] arrayIngredients = new clIngredient[5];
//arrayIngredients[0].IngredientName = "Apple";
//arrayIngredients[1].IngredientName = "Salt";
//arrayIngredients[2].IngredientName = "Buuter";
//arrayIngredients[3].IngredientName = "Flour";
//arrayIngredients[4].IngredientName = "Egg";
listIngredients.Add("Apple");
listIngredients.Add("Salt");
listIngredients.Add("Butter");
listIngredients.Add("Flour");
listIngredients.Add("Egg");
//for (int i = 0; i < arrayIngredients.Length; i++)
//{
// _listIngredients.Add(arrayIngredients[i].IngredientName);
//}
//clRecipeIngredient[] arryRecipeIngredients = await recipeDataBase.getRecipeIngredientsDataByRecipeID(310); //HARDCODED TO CRISPY PIZZA RECIPE
clRecipeIngredient ing = new clRecipeIngredient();
ing.IngredientName = listIngredients[0];
ing.Quantity = 1;
ing.UnitName = "Cups";
ing.Comments = "Comments0";
clRecipeIngredient ing2 = new clRecipeIngredient();
ing2.IngredientName = listIngredients[1];
ing2.Quantity = 2;
ing2.UnitName = "Whole";
ing2.Comments = "Comments1";
downloadedRecipeIngredients.Add(ing);
downloadedRecipeIngredients.Add(ing2);
}
public ICommand btnPress { get; private set; }
void madeIt(clRecipeIngredient x)
{
Console.WriteLine(x.IngredientName + " -- " + x.Comments);
//_downloadedRecipeIngredients.Remove(x);
}
}
And don't forget to implement INotifyPropertyChanged in your model as the value of IngredientName will been changed .
public class clRecipeIngredient : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(
[CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this,new PropertyChangedEventArgs(propertyName));
}
//...
string ingredientName;
public string IngredientName
{
get
{
return ingredientName;
}
set
{
if (ingredientName != value)
{
ingredientName = value;
OnPropertyChanged("IngredientName");
}
}
}
//...
}
Its still unclear why you cannot directly set the selectedItem with a string as I can do in pickers not inside of a ListView.
However, setting the picker to use the SelectedIndex property works great. This is the KEY. For ListView's containing pickers I will not set their value based on INDEX instead of SelectedItem.
Final Code Snippets
XAML
<Picker HorizontalOptions = "StartAndExpand" WidthRequest="100" ItemsSource="{Binding Path=BindingContext.listIngredients, Source={x:Reference Page}}" SelectedIndex="{Binding IngredientIDLookedUp}" />
View Model
clRecipeIngredient[] arryRecipeIngredients = await recipeDataBase.getRecipeIngredientsDataByRecipeID(310); //HARDCODED TO CRISPY PIZZA RECIPE
clRecipeIngredient ing = new clRecipeIngredient();
_downloadedRecipeIngredients.Clear();
for (int i = 0;i < arryRecipeIngredients.Length;i++)
{
for (int j=0; j<_listIngredients.Count;j++)
{
//FIND THE SELECTED INDEX BASED ON PICKER’S LIST and STORE IN THE CUSTOM CLASS
if(arryRecipeIngredients[i].IngredientName == _listIngredients[j])
{
arryRecipeIngredients[i].IngredientIDLookedUp = j;
}
}
_downloadedRecipeIngredients.Add(arryRecipeIngredients[i]);
}
I have 3 classes which are named Users, Cards, and BindingUser which is a class to bind them together.
public class User
{
public int Uid { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}
public class CardData
{
public int _id { get; set; }
public string CardName { get; set; }
public string CardNote { get; set; }
}
public class BindingUser
{
public User bUser { get; set; }
public ObservableCollection<CardData> cardDatas { get; set; }
public BindingUser()
{
cardDatas = new ObservableCollection<CardData>();
}
}
I am trying to create a Horizontal stack layout, filled with frames for each user and in each frame is a list of cards belonging to that user.
I have tried doing this with listviews, stacklayouts and pretty much every other method google shows but each has the same result.
I get the frames for users, but they aren't populated.
My xaml looks like this, I know this is wrong but I formatted it like this to show what I am trying to achieve. In this example, the FirstName and LastName are working fine but the listviews aren't being populated.
<ContentPage.Content>
<StackLayout Orientation="Horizontal" BackgroundColor="#EBEBEB" HeightRequest="130" BindableLayout.ItemsSource="{Binding bindingUsers}" WidthRequest="410">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout HeightRequest="300" VerticalOptions="Start" Orientation="Vertical">
<Frame CornerRadius="0"
HorizontalOptions="Start"
VerticalOptions="Start"
Margin="0"
Padding="0"
WidthRequest="410"
HeightRequest="80"
BackgroundColor="Red"
HasShadow="true">
<StackLayout Orientation="Vertical">
<Label Text="{Binding bUser.FirstName}"/>
<Label Text="{Binding bUser.LastName}"/>
</StackLayout>
</Frame>
<StackLayout Orientation="Vertical" BackgroundColor="Blue">
<ListView BindableLayout.ItemsSource="{Binding bindingUsers.cardDatas}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text ="{Binding CardName}"/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ContentPage.Content>
Can someone point me in the right direction for what I am trying to achieve?
In .net forms it is such a simple task, and would take me minutes to do, but this has me beaten.
Here you have considered two things,
The first one, for listview, you have to use ItemsSource property instead of BindableLayout.ItemsSource.
The second one is the BindingContext of the template will be a single item of the bindable layout source. For example, in your case CardData. So the source, your trying to binding to the ListView is not a part of CardData. So when you bind different objects inside the data template, you have bound with BindingContext keyword like BindingContext.YourProperty with source reference. Refer to the below code,
<StackLayout x:Name="baseLayout" Orientation="Horizontal" BackgroundColor="#EBEBEB" HeightRequest="130"
BindableLayout.ItemsSource="{Binding cardDatas}" WidthRequest="410">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout HeightRequest="300" VerticalOptions="Start" Orientation="Vertical">
<Frame CornerRadius="0"
HorizontalOptions="Start"
VerticalOptions="Start"
Margin="0"
Padding="0"
WidthRequest="410"
HeightRequest="80"
BackgroundColor="Red"
HasShadow="true">
<StackLayout Orientation="Vertical">
<Label Text="{Binding BindingContext.bUser.FirstName, Source={x:Reference baseLayout}}"/>
<Label Text="{Binding BindingContext.bUser.LastName, Source={x:Reference baseLayout}}"/>
</StackLayout>
</Frame>
<StackLayout Orientation="Vertical" BackgroundColor="Blue">
<ListView ItemsSource="{Binding BindingContext.cardDatas, Source={x:Reference baseLayout}}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text ="{Binding CardName}"/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
And the model and view model class based on your codes,
public class User
{
public int Uid { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}
public class CardData
{
public int _id { get; set; }
public string CardName { get; set; }
public string CardNote { get; set; }
}
public class BindingUser
{
public User bUser { get; set; }
public ObservableCollection<CardData> cardDatas { get; set; }
public BindingUser()
{
cardDatas = new ObservableCollection<CardData>()
{
new CardData()
{
_id = 1,
CardName = "Testing1",
CardNote = "Test data1",
},
new CardData()
{
_id = 2,
CardName = "Testing2",
CardNote = "Test data2",
},
new CardData()
{
_id = 3,
CardName = "Testing3",
CardNote = "Test data3",
},
};
bUser = new User
{
Uid = 23432,
FirstName = "First User",
LastName = "Last User",
};
}
}
It's better use the MVVM model if you're binding complex data, the view model helps you get a clearer picture of the view and model, I made some change to the code and hope it helps:
XAML:
<StackLayout BindableLayout.ItemsSource="{Binding Data}"
Orientation="Horizontal" BackgroundColor="#EBEBEB">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame CornerRadius="0"
HorizontalOptions="Start"
VerticalOptions="Start"
Margin="0"
Padding="0"
WidthRequest="410"
BackgroundColor="Red"
HasShadow="true">
<StackLayout Orientation="Vertical">
<Label Text="{Binding FirstName}"/>
<Label Text="{Binding LastName}"/>
</StackLayout>
</Frame>
<ListView ItemsSource="{Binding cardDatas}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text ="{Binding CardName}"/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
set BindingContext in MainPage:
public partial class MainPage : ContentPage
{
DemoViewModel viewModel = new DemoViewModel();
public MainPage()
{
InitializeComponent();
this.BindingContext = viewModel;
}
}
DemoViewModel:
class DemoViewModel
{
public ObservableCollection<BindingUser> Data { get; set; }
public DemoViewModel() {
Data = new ObservableCollection<BindingUser>
{
new BindingUser(1, "aa"),
new BindingUser(2, "bb"),
new BindingUser(3, "cc"),
new BindingUser(4, "dd")
};
}
}
Class User is deleted, CardData remains the same, also you can add it back if needed.
BindingUser:
class BindingUser
{
public int Uid { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public ObservableCollection<CardData> cardDatas { get; set; }
public BindingUser(int uid, string name)
{
Uid = uid;
FirstName = name;
LastName = name;
cardDatas = new ObservableCollection<CardData>()
{
new CardData()
{
_id = 1,
CardName = "card 1",
},
new CardData()
{
_id = 2,
CardName = "card 2",
},
new CardData()
{
_id = 3,
CardName = "card 3",
},
};
}
}
I need to develop a code displaying all Products along with their options so that they can be eventually checked with sliders for later price calculation.
What i want to achieve
The code for the MainPage with some dummy data for testing
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
List<Product> products = new List<Product>();
var stronaInternetowa = new Product("Webpage", 100f, new ProductOption("Option1", 10f));
var sklepInternetowy = new Product("Shop", 100f, new ProductOption("Option1", 10f));
products.Add(stronaInternetowa);
products.Add(sklepInternetowy);
listView.ItemsSource = products;
}
}
The ProductOption class for storing the data about the options for Product.
class ProductOption
{
public string OptionName { get; private set; }
public float OptionPrice { get; private set; }
public ProductOption(string name, float price)
{
OptionName = name;
OptionPrice = price;
}
}
XAML of MainPage with the ListView example of what i want to get
<ListView x:Name="listView" RowHeight="100">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label Text="{Binding Name}"></Label>
<!-- Here i would like to display all of the ProductOptions in the list along with Sliders -->
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The Product class.
class Product
{
public string Name { get; set; }
public float Price { get; set; }
public List<ProductOption> ProductOptions { get; private set; } = new List<ProductOption>();
public Product(string name, float price,params ProductOption[] productOption)
{
Name = name;
Price = price;
foreach(ProductOption p in productOption)
{
ProductOptions.Add(p);
}
}
}
What I've tried so far:
Grouping, doesn't really work for me the way I tried to do it.
Nested ListView, but it isn't supported.
You can do some changes to enable the grouping:
XAML should be:
<ListView
x:Name="listView"
IsGroupingEnabled="True"
HasUnevenRows="True">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="45">
<Grid Padding="10" BackgroundColor="WhiteSmoke">
<Label FontSize="18">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Name}"/>
<Span Text=", "/>
<Span Text="{Binding Price}"/>
</FormattedString>
</Label.FormattedText>
</Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="40">
<Grid Padding="10" BackgroundColor="White">
<Label FontSize="15">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding OptionName}"/>
<Span Text=", "/>
<Span Text="{Binding OptionPrice}"/>
</FormattedString>
</Label.FormattedText>
</Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Product model should be:
Make a note that I inherited the Product with List<ProductOptions>
public class Product : List<ProductOption>
{
public string Name { get; set; }
public float Price { get; set; }
public List<ProductOption> ProductOptions => this;
public Product(string name, float price, params ProductOption[] productOption)
{
Name = name;
Price = price;
foreach (ProductOption p in productOption)
{
ProductOptions.Add(p);
}
}
}
When I tried with following data:
var stronaInternetowa = new Product("Webpage", 100f, new ProductOption("Option1", 10f), new ProductOption("Option2", 20f), new ProductOption("Option3", 30f));
var sklepInternetowy = new Product("Shop", 100f, new ProductOption("Option1", 10f), new ProductOption("Option2", 20f));
I get the following result: