How do I insert ToolBar separators when binding ItemSource

Question

I am binding a ToolBar to a collection of command view model objects. The objects in the collection have a property IsSeparator that when true I would like represented with a <Separator/> in the ToolBar.

My basic markup looks like this:

<ToolBar Grid.Row="1" ItemsSource="{Binding Path=ToolBarCommands}">
    <ToolBar.ItemTemplate>
        <DataTemplate>
            <Button ToolTip="{Binding Path=ToolTip}" Command="{Binding Path=Command}">
                <Button.Content>
                    <Image Width="16" Height="16"  Source="{Binding Path=IconStream}"/>
                </Button.Content>
            </Button>                    
        </DataTemplate>
    </ToolBar.ItemTemplate>
</ToolBar>

I've played around with ItemContainerStyle much like this example for MenuItems but to no avail.

Any help is appreciated.

Answer 1

Rather than inserting Separator objects, you could just grab Separator's ControlTemplate (in Blend, right click a separator -> Edit Template -> Edit a Copy) and incorporate it directly into your button template. You can use a DataTrigger to control its visibility, perhaps binding to a "BeginGroup" property on your object.

If you want to have a dedicated Separator object in your collection you could use a DataTemplateSelector.