Wpf ListView Grouping - wpf

Question

I've been trying to replicate the Listview like the screenshot below
enter image description here
But my problem is I can't make it work. I'm pretty new to MVVM
This is my xaml code
<ListView Margin="10,10,10,6" x:Name="BusinessListView">
<ListView.View>
<GridView>
<GridViewColumn Header="Company" DisplayMemberBinding="{Binding Company}" />
</GridView>
</ListView.View>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock FontWeight="Bold" Text="{Binding BusinessType}"></TextBlock>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
And below is my viewmodel code
List<BusinessM> businesses = new List<BusinessM>();
businesses.Add(new BusinessM
{
BusinessType = "Enterprise",
ListBusiness = new List<BusinessInfo>
{
new BusinessInfo {Company = "Microsoft"}
}
});
BusinessListView.ItemsSource = businesses;
Model
public class BusinessM
{
public string BusinessType { get; set; }
public List<BusinessInfo> ListBusiness { get; set; }
public BusinessM()
{
ListBusiness = new List<BusinessInfo>();
}
}
public class BusinessInfo
{
public string Company { get; set; }
}
When I run the program it returns an error:
System.Windows.Data Error: 40 : BindingExpression path error: 'Company' property not found
What's wrong with my code? What I understand is I'm not referencing properly the property Company into the Listview?
If it's that's the case. How can I do it properly. I've been trying to solve it myself but I can't make it work.
Thank you.

Answer 1

You are getting the error specified because of the way your data structure is bounded to listview's item source property. Typically, you would have a flattened list of model and then you would use ColllectionViewSource to apply Grouping and/or Sorting on the collection.
In posted code, you are binding ItemSource to list of BusinessM which means each list view item represents object of type BusinessM. So when you bind GridViewColumn to Company,it expects BusinessM type to have a property with similar name, which by the way, is not the case.
I have modified you code so that I can explain you how it should be done (IMO) with example.
Model:
public class BusinessM
{
public string BusinessType { get; set; }
public string Company { get; set; }
}
Code behind (xaml.cs):
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
CollectionViewSource cvs = new CollectionViewSource();
cvs.Source = GenerateData();
cvs.GroupDescriptions.Add(new PropertyGroupDescription(nameof(BusinessM.BusinessType)));
BusinessListView.ItemsSource = cvs.View;
}
private List<BusinessM> GenerateData()
{
List<BusinessM> businesses = new List<BusinessM>();
for (int i = 1; i <= 10; i++)
{
for (int j = 1; j <= 5; j++)
{
businesses.Add(new BusinessM
{
BusinessType = $"Type {i}",
Company = $"{i}{j}"
});
}
};
return businesses;
}
}
View (xaml):
<ListView Margin="10,10,10,6" x:Name="BusinessListView">
<ListView.View>
<GridView>
<GridViewColumn Header="" Width="100">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Company" DisplayMemberBinding="{Binding Company}" />
</GridView>
</ListView.View>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Expander IsExpanded="True" Header="{Binding Name}">
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
</ListView>