Grouped list with embed expander - xamarin.forms

Question

I recently started to learn Xamarin and am now trying to find a solution for my project. I have a code in HAML and I can fill my order with dishes with ingredients. Dishes with ingredients are an expander, and I want to add a grouping by guests. Guests can be 1, 2 or more, and each has its own set of dishes. I tried to use CollectionView to group, but there is an error on UWP --- GitHub # 10890.
Maybe I should create my order in code, but I don’t understand how to make bindings to the Expander (((
I need one more grouping: “guest 1”, “guest 2”, etc. In one order there are several guests and each has his own list, and I also need to add a dish to the list of a particular guest when adding.
I need a structure (image):
Guest 1
Dish 1
Ingredient 1
Ingredient 2
Guest 2
Dish 1
Ingredient 1
Ingredient 2
Ingredient 3
Dish 2 (no ingredients)
Dish 3
Ingredient 1
Ingredient 2
My XAML without groups:
<ScrollView Grid.Row="1" Grid.RowSpan="5" Grid.Column="1" Margin="25" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand">
<StackLayout BindableLayout.ItemsSource="{Binding Path=Items}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView BackgroundColor="{Binding Color}" WidthRequest="3" HorizontalOptions="Start"
VerticalOptions="FillAndExpand"/>
<syncfusion:SfExpander Grid.Column="1" >
<syncfusion:SfExpander.Header>
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="3.5*"/>
</Grid.ColumnDefinitions>
<BoxView Grid.Column="1" BackgroundColor="#F2F4F8" WidthRequest="1" HorizontalOptions="Start"
VerticalOptions="FillAndExpand"/>
<StackLayout Grid.Column="2" HorizontalOptions="Start" VerticalOptions="Center" Margin="20">
<Label Text="{Binding Name}" TextColor="Black" FontSize="15"/>
</StackLayout>
</Grid>
</syncfusion:SfExpander.Header>
<syncfusion:SfExpander.Content>
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="3.5*"/>
</Grid.ColumnDefinitions>
<BoxView Grid.Column="1" BackgroundColor="#F2F4F8" WidthRequest="1" HorizontalOptions="Start"
VerticalOptions="FillAndExpand"/>
<StackLayout Grid.Column="2" Spacing="10">
<Label Text="Ingredients" TextColor="Black" Opacity="0.5" FontSize="10" Margin="20,0"/>
<StackLayout BindableLayout.ItemsSource="{Binding Items}" HorizontalOptions="Start" VerticalOptions="Center" Margin="20,0,0,20">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label TextColor="#2F3246" FontSize="12">
<Label.FormattedText>
<FormattedString>
<FormattedString.Spans>
<Span Text="{Binding Name}" FontAttributes="Bold"/>
</FormattedString.Spans>
</FormattedString>
</Label.FormattedText>
</Label>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</Grid></syncfusion:SfExpander.Content>
</syncfusion:SfExpander>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
<!--Order Test-->
I tried to do this in code, it works and gives me the desired grouping, but I don’t understand how to implement PropertyChanged
XAML:
<Grid x:Name="OrderGrid" Grid.Row="1" Grid.RowSpan="5" Grid.Column="1" Margin="25" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand">
</Grid>
CODE:
scrollView = new ScrollView();
stack = new StackLayout();
var List = new OrderPageViewModel();
OrderList = List.Items;
if (OrderList != null)
foreach (var shoppingItem in OrderList)
{
expander = new Expander();
//Expander Header
var headergrid = new Grid()
{
HeightRequest = 60
};
var headerLabel = new Label()
{
TextColor = Color.White,
BackgroundColor = Color.Teal,
HorizontalTextAlignment = TextAlignment.Center,
Text = shoppingItem.Name,
VerticalTextAlignment = TextAlignment.Center
};
headergrid.Children.Add(headerLabel);
expander.Header = headergrid;
var contentgrid = new Grid();
var stackExpanderContent = new StackLayout();
foreach (var shoppingDetailItem in shoppingItem.Items)
{
//Expander Content
var contentLabel = new Label()
{
TextColor = Color.Black,
BackgroundColor = Color.White,
Text = shoppingDetailItem.Name,
VerticalTextAlignment = TextAlignment.Center,
HeightRequest = 50
};
stackExpanderContent.Children.Add(contentLabel);
}
contentgrid.Children.Add(stackExpanderContent);
expander.Content = contentgrid;
stack.Children.Add(expander);
}
scrollView.Content = stack;
scrollView.VerticalOptions = LayoutOptions.StartAndExpand;
OrderGrid.Children.Add(scrollView);

Answer 1

You need to reconstruct your xaml and model class .
It is a bit complex than the original one .
Xaml
<ScrollView Grid.Row="1" Grid.RowSpan="5" Grid.Column="1" Margin="25" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand">
<StackLayout BindableLayout.ItemsSource="{Binding Path=Items}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding ID}" TextColor="Red" FontSize="12"/>
<StackLayout BindableLayout.ItemsSource="{Binding Path=Items}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView BackgroundColor="Red" WidthRequest="3" HorizontalOptions="Start" VerticalOptions="FillAndExpand"/>
<syncfusion:SfExpander Grid.Column="1" >
<syncfusion:SfExpander.Header>
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="3.5*"/>
</Grid.ColumnDefinitions>
<BoxView Grid.Column="1" BackgroundColor="#F2F4F8" WidthRequest="1" HorizontalOptions="Start"
VerticalOptions="FillAndExpand"/>
<StackLayout Grid.Column="2" HorizontalOptions="Start" VerticalOptions="Center" Margin="20">
<Label Text="{Binding Name}" TextColor="Black" FontSize="15"/>
</StackLayout>
</Grid>
</syncfusion:SfExpander.Header>
<syncfusion:SfExpander.Content>
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="3.5*"/>
</Grid.ColumnDefinitions>
<BoxView Grid.Column="1" BackgroundColor="#F2F4F8" WidthRequest="1" HorizontalOptions="Start"
VerticalOptions="FillAndExpand"/>
<StackLayout Grid.Column="2" Spacing="10">
<Label Text="Ingredients" TextColor="Black" Opacity="0.5" FontSize="10" Margin="20,0"/>
<StackLayout BindableLayout.ItemsSource="{Binding Items}" HorizontalOptions="Start" VerticalOptions="Center" Margin="20,0,0,20">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label TextColor="#2F3246" FontSize="12">
<Label.FormattedText>
<FormattedString>
<FormattedString.Spans>
<Span Text="{Binding Name}" FontAttributes="Bold"/>
</FormattedString.Spans>
</FormattedString>
</Label.FormattedText>
</Label>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</Grid>
</syncfusion:SfExpander.Content>
</syncfusion:SfExpander>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
Code hebind
public class Item
{
public string Name { get; set; }
}
public class Model
{
public string Name { get; set; }
public List<Item> Items { get; set; }
}
public class Guest
{
public string ID { get; set; }
public List<Model> Items { get; set; }
}
// Learn more about making custom code visible in the Xamarin.Forms previewer
// by visiting https://aka.ms/xamarinforms-previewer
[DesignTimeVisible(false)]
public partial class MainPage : ContentPage
{
public List<Guest> Items { get; set; }
public MainPage()
{
InitializeComponent();
Items = new List<Guest>();
Model model = new Model { Name = "Cole", Items = new List<Item> { new Item { Name = "aa" }, new Item { Name = "bb" } } };
Model model2 = new Model { Name = "Tom", Items = new List<Item> { new Item { Name = "cc" }, new Item { Name = "dd" } } };
Model model3 = new Model { Name = "Kevin", Items = new List<Item> { new Item { Name = "ee" }} };
Items.Add(new Guest { ID = "Guest 1", Items = new List<Model> { model } });
Items.Add(new Guest { ID = "Guest 2", Items = new List<Model> { model2 ,model3} });
this.BindingContext = this;
}
}
Test result