How can a separator be added between items in an ItemsControl
C#WpfItemscontrolC# Problem Overview
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.
C# Solutions
Solution 1 - C#
<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.
Solution 2 - C#
The current accepted answer gave me a xaml binding error for every template, which I was concerned could be affecting performance. Instead, I did the below, using the AlternationIndex to hide the first separator. (Inspired by this answer.)
<ItemsControl ItemsSource="{Binding Numbers}" AlternationCount="{Binding RelativeSource={RelativeSource Self}, Path=Items.Count}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="SeparatorTextBlock" Text=", "/>
<TextBlock Text="{Binding .}"/>
</StackPanel>
<DataTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Visibility" TargetName="SeparatorTextBlock" Value="Collapsed" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Solution 3 - C#
For a more generalized Silverlight-compatible solution, I derived a control from ItemsControl (SeperatedItemsControl). Each item is wrapped in a SeperatedItemsControlItem, just like ListBox's ListBoxItem. The template for SeperatedItemsControlItem contains a seperator and a ContentPresenter. The seperator for the first element in the collection is hidden. You can easily modify this solution to make a horizontal bar seperator between items, which is what I created it for.
MainWindow.xaml:
<Window x:Class="ItemsControlWithSeperator.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ItemsControlWithSeperator"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<local:ViewModel x:Key="vm" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource vm}">
<local:SeperatedItemsControl ItemsSource="{Binding Data}">
<local:SeperatedItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</local:SeperatedItemsControl.ItemsPanel>
<local:SeperatedItemsControl.ItemContainerStyle>
<Style TargetType="local:SeperatedItemsControlItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:SeperatedItemsControlItem" >
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="seperator">,</TextBlock>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</local:SeperatedItemsControl.ItemContainerStyle>
</local:SeperatedItemsControl>
</Grid>
C# Code:
using System;
using System.Windows;
using System.Windows.Controls;
namespace ItemsControlWithSeperator
{
public class ViewModel
{
public string[] Data { get { return new[] { "Amy", "Bob", "Charlie" }; } }
}
public class SeperatedItemsControl : ItemsControl
{
public Style ItemContainerStyle
{
get { return (Style)base.GetValue(SeperatedItemsControl.ItemContainerStyleProperty); }
set { base.SetValue(SeperatedItemsControl.ItemContainerStyleProperty, value); }
}
public static readonly DependencyProperty ItemContainerStyleProperty =
DependencyProperty.Register("ItemContainerStyle", typeof(Style), typeof(SeperatedItemsControl), null);
protected override DependencyObject GetContainerForItemOverride()
{
return new SeperatedItemsControlItem();
}
protected override bool IsItemItsOwnContainerOverride(object item)
{
return item is SeperatedItemsControlItem;
}
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
//begin code copied from ListBox class
if (object.ReferenceEquals(element, item))
{
return;
}
ContentPresenter contentPresenter = element as ContentPresenter;
ContentControl contentControl = null;
if (contentPresenter == null)
{
contentControl = (element as ContentControl);
if (contentControl == null)
{
return;
}
}
DataTemplate contentTemplate = null;
if (this.ItemTemplate != null && this.DisplayMemberPath != null)
{
throw new InvalidOperationException();
}
if (!(item is UIElement))
{
if (this.ItemTemplate != null)
{
contentTemplate = this.ItemTemplate;
}
}
if (contentPresenter != null)
{
contentPresenter.Content = item;
contentPresenter.ContentTemplate = contentTemplate;
}
else
{
contentControl.Content = item;
contentControl.ContentTemplate = contentTemplate;
}
if (ItemContainerStyle != null && contentControl.Style == null)
{
contentControl.Style = ItemContainerStyle;
}
//end code copied from ListBox class
if (this.Items.Count > 0)
{
if (object.ReferenceEquals(this.Items[0], item))
{
var container = element as SeperatedItemsControlItem;
container.IsFirstItem = true;
}
}
}
protected override void OnItemsChanged(System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
base.OnItemsChanged(e);
if (Items.Count > 1)
{
var container = (ItemContainerGenerator.ContainerFromIndex(1) as SeperatedItemsControlItem);
if (container != null) container.IsFirstItem = false;
}
if (Items.Count > 0)
{
var container = (ItemContainerGenerator.ContainerFromIndex(0) as SeperatedItemsControlItem);
if (container != null) container.IsFirstItem = true;
}
}
}
public class SeperatedItemsControlItem : ContentControl
{
private bool isFirstItem;
public bool IsFirstItem
{
get { return isFirstItem; }
set
{
if (isFirstItem != value)
{
isFirstItem = value;
var seperator = this.GetTemplateChild("seperator") as FrameworkElement;
if (seperator != null)
{
seperator.Visibility = isFirstItem ? Visibility.Collapsed : Visibility.Visible;
}
}
}
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
if (IsFirstItem)
{
var seperator = this.GetTemplateChild("seperator") as FrameworkElement;
if (seperator != null)
{
seperator.Visibility = Visibility.Collapsed;
}
}
}
}
}
Solution 4 - C#
You can also multibind to ItemsControl.AlternationIndex and ItemsControl.Count and compare the AlternationIndex to Count to see if you are the last item.
Set the AlternationIndex high enough to accomodate all your items then make a LastItemConverter with a Convert method looking something like this:
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
var alterationCount = (int)values[0];
var itemCount = (int)values[1];
if (itemCount > 1)
{
return alterationCount == (itemCount - 1) ? Visibility.Collapsed : Visibility.Visible;
}
return Visibility.Collapsed;
}
Solution 5 - C#
I figured I should give the solution I ended up with.
I ended up binding my collection of items to the Text of a TextBlock, and using a value converter to change the bound collection of items into the formatted string.