ListBox Groupstyle display: How to design a group name?

Question

I want to group my items (images) in a ListBox by the date it was created. Then I just use this code:

<ListBox.GroupStyle>
            <GroupStyle />
</ListBox.GroupStyle>

BUT When I tried to apply some style(i.e Border), I got NO group name displayed. ONLY the Border Here my new implementation of the groupings using DateTime:

<ListBox.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Border BorderBrush="Gray" BorderThickness="1" CornerRadius="8">
                            <TextBlock Text="{Binding Path=DateCreated}" FontWeight="Bold" HorizontalAlignment="Center"/>
                        </Border>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListBox.GroupStyle>

Here is my ICollectionView in my MainWindow:

ICollectionView view = CollectionViewSource.GetDefaultView(CollectedFiles);
        view.GroupDescriptions.Add(new PropertyGroupDescription("DateCreated", new DateTimeToDateConverter()));
        view.SortDescriptions.Add(new SortDescription("FileFullName", ListSortDirection.Ascending));

NOTE: I use DateTimeToDateConverter() converter which returns date without time.

Answer 1

Reference: http://msdn.microsoft.com/en-us/library/system.windows.controls.groupstyle.headertemplate.aspx

When you define groups using the GroupDescriptions, your view object (a CollectionViewSource object or an object that derives from CollectionView) wraps each group in a CollectionViewGroup object.

Basically, when you add a PropertyGroupDescription WPF actually generates a CollectionViewGroup. You'll need to bind to the Name property, not the DateCreated property (which doesn't exist on the new CollectionViewGroup the WPF engine created for you).

<ListBox.GroupStyle>
    <GroupStyle>
        <GroupStyle.HeaderTemplate>
             <DataTemplate>
                  <Border BorderBrush="Gray" BorderThickness="1" CornerRadius="8">
                       <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" HorizontalAlignment="Center" />
                  </Border>
              </DataTemplate>
          </GroupStyle.HeaderTemplate>
     </GroupStyle>
</ListBox.GroupStyle>