Need to display list view items with custom alignment
I am trying to display the listview group items as like in the attached screenshot, but still i have facing issue while displaying group view items
Requirement:
Group header needs to display in horizontal alignment and corresponding group items are needs to be aligned in vertical alignment
<ListView x:Name="listview" BorderThickness="0" ItemsSource="{Binding Source={StaticResource cvs}}" SelectedItem="{Binding SelectedProduct}"> <ListView.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding Product}" /> </DataTemplate> </ListView.ItemTemplate> <ListView.GroupStyle> <GroupStyle> <GroupStyle.HeaderTemplate> <DataTemplate> <TextBlock Padding="5,0,0,0" FontSize="14" FontWeight="Bold" Text="{Binding Name}"/> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.ContainerStyle> <Style TargetType="{x:Type GroupItem}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="GroupItem"> <StackPanel Orientation="Vertical"> <ContentPresenter/> <ItemsPresenter/> </StackPanel> </ControlTemplate> </Setter.Value> </Setter> </Style> </GroupStyle.ContainerStyle> </GroupStyle> </ListView.GroupStyle> <ListView.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled"/> </ItemsPanelTemplate> </ListView.ItemsPanel> Please suggestion a solution to achieve this.
To change the orientation you would have to set the GroupStyle.Panel. Because of your requirement to arrange the items multiline you should use a WrapPanel.
To make it behave properly you should disable the horizontal ScrollViewer of the ListView (to allow the items to wrap) and give the ListView a fixed height (in order to make the vertical ScrollViewer visible).
Since you don’t modify the layout of the GroupItem and the ListView you can safely remove the GroupStyle.ContainerStyle (at least the Controltemplate override) and the ListView.ItemsPanel template override. In fact setting ItemsPanelTemplate of a ListBox or ListView explicitly to StackPanel or generally to something other than a VirtualizingPanel removes the ability to virtualize items. UI virtualization significantly improves performance, so you don’t want to disable it.
<ListView ItemsSource="{Binding Source={StaticResource cvs}}" Height="400" ScrollViewer.HorizontalScrollBarVisibility="Disabled"> <ListView.GroupStyle> <GroupStyle> <GroupStyle.Panel> <ItemsPanelTemplate> <WrapPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </GroupStyle.Panel> <GroupStyle.HeaderTemplate> <DataTemplate> <TextBlock Padding="5,0,0,0" FontSize="14" FontWeight="Bold" Text="{Binding Name}" /> </DataTemplate> </GroupStyle.HeaderTemplate> </GroupStyle> </ListView.GroupStyle> </ListView> 
You should define the Panel property for GroupStyle and you can remove the ItemsPanel for the ListView:
<GroupStyle.Panel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </GroupStyle.Panel> Complete code for setting the groups for anyone interested:
<Window.Resources> <CollectionViewSource x:Key='cvs' Source="{Binding Path=Products}"> <CollectionViewSource.GroupDescriptions> <PropertyGroupDescription PropertyName="ProductType" /> </CollectionViewSource.GroupDescriptions> </CollectionViewSource> </Window.Resources> <Grid> <ListView x:Name="listview" BorderThickness="0" ItemsSource="{Binding Source={StaticResource cvs}}" SelectedItem="{Binding SelectedProduct}"> <ListView.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding Product}" /> </DataTemplate> </ListView.ItemTemplate> <ListView.GroupStyle> <GroupStyle> <GroupStyle.Panel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </GroupStyle.Panel> <GroupStyle.HeaderTemplate> <DataTemplate> <TextBlock Padding="5,0,0,0" FontSize="14" FontWeight="Bold" Text="{Binding Name}"/> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.ContainerStyle> <Style TargetType="{x:Type GroupItem}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="GroupItem"> <StackPanel Orientation="Vertical"> <ContentPresenter/> <ItemsPresenter/> </StackPanel> </ControlTemplate> </Setter.Value> </Setter> </Style> </GroupStyle.ContainerStyle> </GroupStyle> </ListView.GroupStyle> </ListView> </Grid> Regarding the model used: I set up a simple ProductCvs class
public class ProductCvs { public string Product { get; set; } public string ProductType { get; set; } } 
