How to Bind Nested List Object Data in Listview Xamarin forms - xaml

Question

i have a nested List Object and i want to bind them to the list all my data is proper also i have implemented INotifyChanged Event but the data on the UI Is not displays
here is my Xaml UI
<ListView x:Name ="lstView" Margin="0,5,0,5" VerticalScrollBarVisibility="Always" HasUnevenRows="True" VerticalOptions="FillAndExpand" ItemsSource="{Binding Grouped}" IsGroupingEnabled="true" SelectionMode="None" SeparatorVisibility="None" GroupDisplayBinding="{Binding LongName}" GroupShortNameBinding="{Binding ShortName}">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<Grid Margin="5,20,0,0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="95*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="radiochecked.png" VerticalOptions="End" />
<Frame Grid.Column="1" HasShadow="False" HorizontalOptions="Start" Padding="6,2,6,2" BackgroundColor="#608EF6">
<Label Text="{Binding LongName}" TextColor="White" VerticalTextAlignment="Center" ></Label>
</Frame>
</Grid>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="5,0,10,0" HorizontalOptions="FillAndExpand" RowSpacing="0" VerticalOptions="FillAndExpand" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="95*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<BoxView
Grid.Column="0" Grid.Row="0"
BackgroundColor="#566781"
HorizontalOptions="Center"
VerticalOptions="Fill"
WidthRequest="2" />
<Image Grid.Column="0" Grid.Row="1" Source="radiochecked.png" />
<BoxView
Grid.Column="0" Grid.Row="2"
BackgroundColor="#566781"
HorizontalOptions="Center"
VerticalOptions="Fill"
WidthRequest="2" />
<Frame Grid.Column="1" Grid.Row="0" HasShadow="False" Grid.RowSpan="3" Padding="0,0,2,0" Margin="0,10,0,5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" VerticalOptions="FillAndExpand">
<BoxView BackgroundColor="{Binding EncounterFrameColor}" WidthRequest="3"></BoxView>
<Grid Margin="0,8,0,0" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackLayout Spacing="0" Grid.Column="0">
<Label Text="{Binding EncounterMonth}" Margin="3,1,0,0" FontSize="10" TextColor="Black" VerticalOptions="Start" HorizontalOptions="Start"></Label>
<Label Text="{Binding MDate}" Margin="3,2,0,0" FontSize="15" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalOptions="Start" HorizontalOptions="Start"></Label>
</StackLayout>
<StackLayout Grid.Column="2" VerticalOptions="Start" Grid.Row="0" HorizontalOptions="FillAndExpand">
<Grid RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="15"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="{Binding EncounterImage}" Margin="0,2,0,0" VerticalOptions="Start" Grid.Row="0" Grid.Column="0"/>
<Label Text="{Binding Encounter}" TextColor="Black" FontSize="12" Grid.Row="0" VerticalOptions="Start" Grid.Column="1" ></Label>
<StackLayout Margin="0,0,0,5" Spacing="0" BindableLayout.ItemsSource="{Binding UserVitals}" Grid.Row="1" Grid.Column="1" >
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding Description}" Grid.Column="0" FontSize="10" TextColor="Black" />
<Label Text="{Binding Values}" HorizontalOptions="Start" Grid.Column="2" FontSize="10" TextColor="Black"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</Grid>
</StackLayout>
</Grid>
</StackLayout>
</Frame>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
i am trying to create Grouping Listview Which is grouping with the Year
here is my Model
public class EncounterFrameModel
{
public string EncounterMonth { get; set; }
public string MDate { get; set; }
public string Comment { get; set; }
// public bool IsReallyAVeggie { get; set; }
public string EncounterFrameColor { get; set; }
public string Image { get; set; }
public string Encounter { get; set; }
// public List<TotalItem> Totals { get;set; }
public string EncounterImage { get; set; }
public ObservableCollection<UserHealthDetails> UserVitals { get; set; }
public EncounterFrameModel()
{
}
}
public class UserHealthDetails
{
public string Description { get; set; }
public string Values { get; set; }
}
public class EncounteredYear
{
public EncounteredYear()
{
encounterFrameModels = new ObservableCollection<EncounterFrameModel>();
}
public string LongName { get; set; }
public string ShortName { get; set; }
public ObservableCollection<EncounterFrameModel> encounterFrameModels { get; set; }
}
can any one help me in binding this data

Answer 1

you could try this:
change your EncounteredYear model like this:
class EncounteredYear:ObservableCollection<EncounterFrameModel>
{
public string LongName { get; set; }
public string ShortName { get; set; }
}
in your page.xaml.cs set your data(Generate data according to your own situation):
ObservableCollection<EncounteredYear> grouped = new ObservableCollection<EncounteredYear>();
var gounp1 = new EncounteredYear() {...};
var gounp2 = new EncounteredYear() {...};
var gounp3 = new EncounteredYear() {...};
gounp1.Add(new EncounterFrameModel() {...});
gounp1.Add(new EncounterFrameModel() {...});
gounp1.Add(new EncounterFrameModel() {...});
gounp1.Add(new EncounterFrameModel() {...});
gounp2.Add(new EncounterFrameModel() {...});
gounp2.Add(new EncounterFrameModel() {...});
gounp2.Add(new EncounterFrameModel() {...});
gounp2.Add(new EncounterFrameModel() {...});
gounp3.Add(new EncounterFrameModel() {...});
gounp3.Add(new EncounterFrameModel() {...});
gounp3.Add(new EncounterFrameModel() {...});
gounp3.Add(new EncounterFrameModel() {...});
grouped.Add(gounp1);
grouped.Add(gounp2);
grouped.Add(gounp3);
lstView.ItemsSource = grouped;// bind the list of the grouplist
then you page's xaml as your before but delete ItemsSource="{Binding Grouped}" and must add <ViewCell> inside <DataTemplate>:
<ListView x:Name ="lstView" Margin="0,5,0,5" VerticalScrollBarVisibility="Always" HasUnevenRows="True" VerticalOptions="FillAndExpand" IsGroupingEnabled="true" SelectionMode="None" SeparatorVisibility="None" GroupDisplayBinding="{Binding LongName}" GroupShortNameBinding="{Binding ShortName}">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
...
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
...
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>