Grouping ListBox with Date

Question

I have no idea how to achieve this, but I have a date and time column in a ListBox. The Date column should not display if the date was already in there. I know that in combination with ListCollectionView and Listview/DataGrids, it is propably possible. But can I achieve this with a ListBox and a List. Keep in mind I am using the MVVM principle. This is my listbox:

<ListBox Grid.Row="2" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemsSource="{Binding Schedules}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Background="Transparent">
                            <Grid Background="Transparent">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition  Width="100"/>
                                    <ColumnDefinition  Width="100"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <TextBlock Grid.Column="0" Grid.Row="0"  Text="{Binding MyDateTime, StringFormat='d' }" HorizontalAlignment="Left"  VerticalAlignment="Center"/>
                                <TextBlock Grid.Column="1" Grid.Row="0"  Text="{Binding MyDateTime, StringFormat='t'}" HorizontalAlignment="Left"  VerticalAlignment="Center"/>
                                <TextBlock Grid.Column="2" Grid.Row="0"  Text="{Binding SomeText}"  TextTrimming="WordEllipsis" LineStackingStrategy="MaxHeight" MaxHeight="20" HorizontalAlignment="Left"  VerticalAlignment="Center"/>
                            </Grid>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

I have made this in excel to give an example of what I am trying to achieve:

I want the affect where I have highlighted with yellow

Answer 1

Converters

// Order Schedules using System.Linq
public class ToOrderedListConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        List<ScheduleItem> schedules = (List<ScheduleItem>)value;
        var subset = from item in schedules
                     orderby item.MyDateTime.TimeOfDay
                     orderby item.MyDateTime.ToString("yyyy/MM/dd") descending
                     select item;
        return subset.ToList();
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

// Show only first occurrence of date
public class DateToVisibilityConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        DateTime currentItem = (DateTime)values[0];
        List<ScheduleItem> schedules = (List<ScheduleItem>)values[1];
        ScheduleItem firstOccurrence =
            schedules.Find(item => item.MyDateTime.Year == currentItem.Year
                                && item.MyDateTime.Month == currentItem.Month
                                && item.MyDateTime.Day == currentItem.Day);

        if (firstOccurrence.MyDateTime == currentItem)
            return Visibility.Visible;
        else return Visibility.Collapsed;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

XAML

<ListBox Grid.Row="2" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
         ItemsSource="{Binding Schedules, Converter={StaticResource ToOrderedListConverter}}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Background="Transparent">
                <Grid Background="Transparent">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding MyDateTime, StringFormat='dd/MM/yyyy'}" HorizontalAlignment="Left" VerticalAlignment="Center">
                        <TextBlock.Visibility>
                            <MultiBinding Converter="{StaticResource DateToVisibilityConverter}">
                                <Binding Path="MyDateTime"/>
                                <Binding RelativeSource="{RelativeSource AncestorType={x:Type ListBox}}" 
                                         Path="ItemsSource"/>
                            </MultiBinding>
                        </TextBlock.Visibility>
                    </TextBlock>
                    <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding MyDateTime, StringFormat='t'}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                    <TextBlock Grid.Column="2" Grid.Row="0" Text="{Binding SomeText}"  TextTrimming="WordEllipsis" LineStackingStrategy="MaxHeight" MaxHeight="20" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                </Grid>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer 2

You can use this approach for your requirements.

https://code.msdn.microsoft.com/windowsdesktop/CollectionView-Tips-MVVM-d6ebb4a7#content