Since you have already provided GroupDescriptons
at your CollectionViewSource, groupStyle will pick the property name from there only.
All you need is to bind with Name
property of CollectionViewGroup
class to access the value of the property on which grouping is applied. In group style, binding is against CollectionViewGroup class and not against your Model class.
So, this is how you will do it:
<TextBlock Text="{Binding Name}" FontWeight="Bold"
Background="ForestGreen" Margin="0,5,0,0"/>
And regarding to align groups horizontally, you can set ItemsPanelTemplate
of Group to be VirtualizingStackPanel
with Orientation
set to Horizontal
which makes your groups to be aligned horizontally.
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" FontWeight="Bold"
Background="ForestGreen" Margin="0,5,0,0"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListBox.GroupStyle>