How can a separator be added between items in an ItemsControl

Nathan picture Nathan · Mar 24, 2010 · Viewed 21.6k times · Source

I'm needing to display a list of numbers from a collection in an Items Control. So the items are: "1", "2", "3".

When they are rendered, I need them separated by a comma (or something similar). So the above 3 items would look like this: "1, 2, 3".

How can I add a separator to the individual items, without having one tacked on the end of the list?

I am not stuck on using an ItemsControl, but that's what I had started to use.

Answer

Kent Boogaart picture Kent Boogaart · Jul 28, 2010
<ItemsControl ItemsSource="{Binding Numbers}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- could use a WrapPanel if more appropriate for your scenario -->
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock x:Name="commaTextBlock" Text=", "/>
                <TextBlock Text="{Binding .}"/>
            </StackPanel>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
                    <Setter Property="Visibility" TargetName="commaTextBlock" Value="Collapsed"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>

    </ItemsControl.ItemTemplate>
</ItemsControl>

I arrived at your question because I was looking for a solution in Silverlight, which does not have a previous data relative source.