CODEWITHSUNDEEP
c#.netwpflistview
max
max

Reputation: 323

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

Screenshot

 <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.

enter image description here

Upvotes: 1

Views: 78

Answers (2)

BionicCode
BionicCode

Reputation: 28948

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>

Upvotes: 1

Ostas
Ostas

Reputation: 949

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; }
}

Upvotes: 1

Related Questions