Question

I have a very simple list of objects that represt people. Each object has a Sex and a Name. The following code displays the list of people, correctly grouped by their Sex, but there seems to be some kind of horizontal padding for each item in the group. How can I remove this so that both the group headers and the items within each group are both flush against the vertical?

C# code:

using System.Collections.Generic;
using System.Windows;
using System.Windows.Data;
using System.ComponentModel;

namespace ComboBoxColour
{
  /// <summary>
  /// Interaction logic for MainWindow.xaml
  /// </summary>
  public partial class MainWindow : Window
  {
    private CollectionViewSource _viewSource;
    public ICollectionView CollectionView { get; set; }

    public List<Person> people;
    public List<Person> People
    {
      get { return people; }
      set { people = value; }
    }

    public MainWindow()
    {
      this.DataContext = this;

      People = new List<Person>();
      People.Add(new Person("Alice", SexEnum.Female));
      People.Add(new Person("Bob", SexEnum.Male));
      People.Add(new Person("Claire", SexEnum.Female));
      People.Add(new Person("Daniel", SexEnum.Male));

      this._viewSource = new CollectionViewSource { Source = this.People };
      this.CollectionView = this._viewSource.View;

      this.CollectionView.GroupDescriptions.Clear();
      this.CollectionView.SortDescriptions.Clear();

      this.CollectionView.GroupDescriptions.Add(new PropertyGroupDescription("Sex"));
      this.CollectionView.SortDescriptions.Add(new SortDescription("Name", ListSortDirection.Ascending));

      InitializeComponent();
    }
  }

  public enum SexEnum{Male,Female};

  public class Person
  {
    private string name;
    public string Name
    {
      get { return name; }
      set { name = value; }
    }

    private SexEnum sex;
    public SexEnum Sex
    {
      get { return sex; }
      set { sex = value; }
    }

    public Person(string Name, SexEnum Sex)
    {
      this.Name = Name;
      this.Sex = Sex;
    }
  }
}

WPF code:

<Window x:Class="ComboBoxColour.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel Orientation="Vertical">
        <ItemsControl ItemsSource="{Binding CollectionView}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Button Content="{Binding Name}" Grid.Column="0"/>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Button Content="{Binding Items[0].Sex}" Grid.Column="0"/>
                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ItemsControl.GroupStyle>
    </ItemsControl>
</StackPanel>
</Window>

Answer 1

Change the Template of the GroupItem by adding this to the GroupStyle:

<GroupStyle.ContainerStyle>
    <Style TargetType="GroupItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GroupItem">
                    <StackPanel>
                        <ContentPresenter/>
                        <ItemsPresenter/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</GroupStyle.ContainerStyle>

(The ItemsPanel is useless by the way, that is the default already)