Grouping items with a header using Caliburn.Micro
I am building a MVVM WPF application using Caliburn Micro. Unfortunately
I've not an expert in XAML. What I am trying to do is display a list of
schedule items. I want to group these items by date (so all items under
today would be together and then a separator and then all items under
tomorrow next) like so:
Date: 8/28/2013
Schedule Event One
Schedule Event Three
Schedule Event Four
Date: 8/29/2013
Schedule Event Two
Schedule Event Five
I can list them easily enough but breaking them up by group is more
difficult. The examples I've seen aren't very documented and they tend to
use code-behind or static resources. I am looking to do this using MVVM
and Caliburn Micro so neither of those types of solutions will work and I
can't figure out how to adapt them.
My (simplified for this post) model looks like this:
public class ScheduleItemModel
{
public string Title { get; set; }
public DateTime EventDate { get; set; }
public string Description { get; set; }
}
On the XAML side, I am using an ItemsControl inside a StackPanel like so:
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,0" BorderBrush="Black"
VerticalAlignment="Center">
<TextBlock FontSize="20" Margin="5,0,5,0"
VerticalAlignment="Center" Text="{Binding Title}"></TextBlock>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
This works to display all of the items in the list from my ViewModel
(which is an ObservableCollection of my Models). I tried adding a
GroupStyle to my template like so:
<ItemsControl.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border Grid.Row="0" BorderThickness="0,0,0,1"
BorderBrush="Black" Margin="5,0,5,0" >
<TextBlock FontSize="20" FontWeight="Thin"
Text="{Binding Path=Name}"
Margin="0,5,0,5" HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ItemsControl.GroupStyle>
The problem is that I don't know how to wire it all up.
No comments:
Post a Comment