WPF ItemsControl ItemTemplate border with GroupStyle

Question

This is the first time I've posted a pic, so hopefully it turns out well (a picture is worth a thousand words, and I don't want to type a thousand words). But, the image below is what I'm trying to accomplish.

I have a collection of objects that I'm needing grouped by property "Group". I'm using a CollectionViewSource that is bound to my data source that is doing the grouping for me.

I'm using an ItemsControl control (but could easily use another control) to display this information. I'm able to group the information by the property but I'd like to be able to surround the entire group with a border. I'm not wanting to surround each item in the group by the entire group.

How do I accomplish something like the picture below with a border around the entire group?

Answer 1

something like this should do the trick. use this as your group style. You will probably want to customize this more, but you should be able to get the general idea from this snippet.

the main thing to know is that you are binding to a GroupItem. Basically there are 3 properties on a GroupItem. the Name (of the group), the ItemCount (how many items in your grouping) and the items themselves.

<ControlTemplate TargetType="{x:Type GroupItem}">

    <Border BorderBrush="Black" BorderThickness="1" Margin="5">
        <StackPanel>
            <TextBlock Text="{Binding Name}"/>
            <Border BorderBrush="Black" BorderThickness="1" Margin="0,0,0,0">
                <ItemsPresenter />
            </Border>
        </StackPanel>
    </Border>

</ControlTemplate>

EDIT: When you Group a collection of items, the source is not a collection of your items, but a collection of GroupItems, wich then contains the items from your collection that belong to that group. this is why the x:Type is GroupItem. No binding is required here, other then to properties of the GroupItem that you wish to display.

You should put this in your <ItemControl> XAML like so:

    <ItemsControl>
        <ItemsControl.GroupStyle>
<!-------------- style from above goes here --------------->
        <ItemsControl.GroupStyle/>
    <ItemsControl/>

here is an article on grouping in WPF to help you out.